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); };

代码解释

1. 定义裁剪区域(100, 100, 200, 200)，表示从原图像的(100, 100)开始裁剪，裁剪区域宽高分别为200像素。
2. 指定了目标绘制位置(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(); };

代码解释

1. 使用 translate 方法将坐标系原点移动到画布的中心。
2. 使用 rotate 方法旋转坐标系。
3. 使用 drawImage 方法绘制图像，通过减去图像的一半宽度和高度来确保图像绘制在新的坐标系原点上。
4. 使用 save 和 restore 方法来保存和恢复绘图状态，避免影响后续的绘图操作。

旋转如图：