canvas绘制图片-育师

项目中有一个点击图片，在点击区域画圆标注的需求，需要知道点击的位置，并判断位置是否正确，类似“找不同”小游戏。这种就需要用到canvas了

基本说明

canvas是一个 HTML 元素，用于绘制图形和图像，通过 JavaScript 来控制其行为。
<img>元素是用来在网页中显示图像的 HTML 元素。
drawImage()方法是Canvas 提供的一种方法，用于将图像、视频或另一个 canvas 的内容绘制到当前 canvas 上。

canvas 与 <img> 元素的结合，可以实现动态图像处理，包括但不限于图像裁剪、缩放、旋转等。

实现方法

最简单的方式是直接使用drawImage方法来绘制<img>元素的内容到 Canvas 上。需要注意的是，在使用drawImage之前，必须等待<img>元素加载完成。

<template> <div> <canvas id="myCanvas"></canvas> </div> </template> <script setup lang="ts"> import { onMounted } from "vue"; const draw = () => { // 创建 canvas 元素 const canvas:any = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d", { willReadFrequently: true, }); // 创建 img 元素 const img = new Image(); img.src = '/src/assets/pro.png'; // 图片加载完成后绘制到 canvas img.onload = () => { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // 也可以省略后两个参数，默认画满 // ctx.drawImage(img, 0, 0); }; canvas.addEventListener("click", (e:any) => { const x = e.clientX; const y = e.clientY; console.log("点击的位置", x, y); // 点击的位置画出圆形 ctx.beginPath(); ctx.strokeStyle = "#0f0"; ctx.lineWidth = 5; ctx.arc(x, y - 50, 50, 0, 360); ctx.stroke(); }) } onMounted(() => { draw() }); </script>

效果如图：

注意：

img.src会把图片路径加载为绝对路径
如果直接使用相对路径的话，会找不到图片资源，要使用require引入相对路径
img.src = '@/assets/pro.png' 加载失败
img.src = require('@/assets/pro.png') 加载成功
或者可以把图片放在public文件夹下，直接引入
img.src = 'pro.png';
若使用在线的图片，可能会有跨域问题，设置 img.crossOrigin
img.crossOrigin = ""; //解决图片跨域问题
img.src = "https://imgs.699pic.com/images/401/061/200.png!detail.oblique.v1";

其他功能

1. 使用`drawImage`绘制并裁剪图像

img.onload = () => { canvas.width = img.width; canvas.height = img.height; // 指定裁剪区域 x, y, width, height，以及目标绘制位置 dx, dy, dWidth, dHeight // (img, x, y, width, height, dx, dy, dWidth, dHeight) ctx.drawImage(img, 100, 100, 200, 200, 0, 0, canvas.width, canvas.height); };

代码解释

定义裁剪区域(100, 100, 200, 200)，表示从原图像的(100, 100)开始裁剪，裁剪区域宽高分别为200像素。
指定了目标绘制位置(0, 0)以及绘制区域的宽高canvas.width和canvas.height。

裁剪如图：

2. 使用`drawImage`绘制图像并做其他变换

除了裁剪之外，我们还可以利用transform方法来改变图像的位置、大小和方向。这里我们将展示如何旋转图像。

img.onload = () => { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // 保存当前的绘图状态 ctx.save(); // 设置转换中心点 ctx.translate(canvas.width / 2, canvas.height / 2); // 旋转 45 度角 ctx.rotate(Math.PI / 4); // Math.PI / 4 = 45deg // 绘制图像 ctx.drawImage(img, -img.width / 2, -img.height / 2, img.width, img.height); // 恢复之前的绘图状态 ctx.restore(); };