devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Canvas绘制图片和区域（前端使用Canvas绘制图片，并在图片上绘制区域）_h5 canvas如何绘画区域

作者：Cpp五条 | 2024-05-25 13:44:18

赞

踩

h5 canvas如何绘画区域

简介：在Web开发中，有时候我们需要在图片上进行一些交互式操作，比如绘制区域、标记等。这种场景下，我们可以使用HTML5的<canvas>元素来实现。Canvas 是 HTML5 提供的一种图形绘制接口，可以通过 JavaScript 在网页上绘制图形、动画和其他视觉效果。这里来记录一下，如何在一张图片上，绘制区域。

先看效果

如何使用Canvas在图片上绘制区域？

一. 首先，我们需要初始化三个canvas画布（初始化Canvas）

  1. initCanvas() {
  2.   // 初始化canvas画布
  3.   let canvasWrap = document.getElementsByClassName("canvas-wrap");
  4.   this.wrapWidth = canvasWrap[0].clientWidth;
  5.   this.wrapHeight = canvasWrap[0].clientHeight;
  6.  
  7.   this.imgCanvas = document.getElementById("imgCanvas");
  8.   this.imgCtx = this.imgCanvas.getContext("2d");
  9.  
  10.   // 绘制canvas
  11.   this.drawCanvas = document.getElementById("drawCanvas");
  12.   this.drawCtx = this.drawCanvas.getContext("2d");
  13.  
  14.   // 保存绘制区域 saveCanvas
  15.   this.saveCanvas = document.getElementById("saveCanvas");
  16.   this.saveCtx = this.saveCanvas.getContext("2d");
  17. }
  1. imgCanvas用于绘制原始图片
  2. drawCanvas用于临时绘制区域
  3. saveCanvas用于保存最终绘制的区域

二. 计算并设置canvas的宽高比例，以适应图片尺寸

  1. initImgCanvas() {
  2.   // 计算宽高比
  3.   let ww = this.wrapWidth; // 画布宽度
  4.   let wh = this.wrapHeight; // 画布高度 
  5.   let iw = this.imgWidth; // 图片宽度
  6.   let ih = this.imgHeight; // 图片高度
  7.  
  8.   if (iw / ih < ww / wh) {
  9.     // 以高为主
  10.     this.ratio = ih / wh;
  11.     this.canvasHeight = wh;
  12.     this.canvasWidth = (wh * iw) / ih;
  13.   } else {
  14.     // 以宽为主 
  15.     this.ratio = iw / ww;
  16.     this.canvasWidth = ww;
  17.     this.canvasHeight = (ww * ih) / iw;
  18.   }
  19.  
  20.   // 初始化画布大小
  21.   this.imgCanvas.width = this.canvasWidth;
  22.   this.imgCanvas.height = this.canvasHeight;
  23.   this.drawCanvas.width = this.canvasWidth; 
  24.   this.drawCanvas.height = this.canvasHeight;
  25.   this.saveCanvas.width = this.canvasWidth;
  26.   this.saveCanvas.height = this.canvasHeight;
  27.  
  28.   // 图片加载绘制
  29.   let img = document.createElement("img");
  30.   img.src = this.imgUrl;
  31.   img.onload = () => {
  32.     console.log("图片已加载");
  33.     this.imgCtx.drawImage(img, 0, 0, this.canvasWidth, this.canvasHeight);
  34.     this.renderDatas(); // 渲染原有数据
  35.   };
  36. }

这里先计算画布和图片的宽高比,根据比例关系决定以宽为主还是以高为主进行等比缩放。然后设置三个canvas的宽高,并在图片加载完成后将其绘制到imgCanvas上。renderDatas函数用于渲染已有的绘制数据(如果有的话)。

开始绘制

三. 绘制的主要逻辑

  1. startDraw() {
  2.   // 绘制区域
  3.   if (this.isDrawing) return;
  4.   this.isDrawing = true;
  5.   // 绘制逻辑
  6.   this.drawCanvas.addEventListener("click", this.drawImageClickFn);
  7.   this.drawCanvas.addEventListener("dblclick", this.drawImageDblClickFn);
  8.   this.drawCanvas.addEventListener("mousemove", this.drawImageMoveFn);
  9. }

我们在drawCanvas上监听click、dblclick和mousemove事件,分别对应点击、双击和鼠标移动三种绘制交互。

四. 点击事件用于开始一个新的区域绘制

  1. drawImageClickFn(e) {
  2.   let drawCtx = this.drawCtx;
  3.   if (e.offsetX || e.layerX) {
  4.     let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
  5.     let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
  6.     let lastPoint = this.drawingPoints[this.drawingPoints.length - 1] || [];
  7.     if (lastPoint[0] !== pointX || lastPoint[1] !== pointY) {
  8.       this.drawingPoints.push([pointX, pointY]);
  9.     }
  10.   }
  11. }

这里获取鼠标点击的坐标,并将其推入drawingPoints数组中,用于临时保存当前绘制区域的点坐标。

五. 鼠标移动事件用于实时绘制区域

  1. drawImageMoveFn(e) {
  2.   let drawCtx = this.drawCtx;
  3.   if (e.offsetX || e.layerX) {
  4.     let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
  5.     let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
  6.     // 绘制
  7.     drawCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
  8.  
  9.     // 绘制点
  10.     drawCtx.fillStyle = "blue";
  11.     this.drawingPoints.forEach((item, i) => {
  12.       drawCtx.beginPath();
  13.       drawCtx.arc(...item, 6, 0, 180);
  14.       drawCtx.fill(); //填充
  15.     });
  16.  
  17.     // 绘制动态区域
  18.     drawCtx.save();
  19.     drawCtx.beginPath();
  20.     this.drawingPoints.forEach((item, i) => {
  21.       drawCtx.lineTo(...item);
  22.     });
  23.     drawCtx.lineTo(pointX, pointY);
  24.     drawCtx.lineWidth = "3";
  25.     drawCtx.strokeStyle = "blue";
  26.     drawCtx.fillStyle = "rgba(255, 0, 0, 0.3)";
  27.     drawCtx.stroke();
  28.     drawCtx.fill(); //填充
  29.     drawCtx.restore();
  30.   }
  31. }

这里先清空drawCanvas,然后遍历drawingPoints数组,绘制已经点击的点。接着再绘制一个动态区域,即从第一个点开始,连线到当前鼠标位置,形成一个闭合多边形区域。

六. 双击事件用于完成当前区域的绘制

  1. drawImageDblClickFn(e) {
  2.   let drawCtx = this.drawCtx;
  3.   let saveCtx = this.saveCtx;
  4.   if (e.offsetX || e.layerX) {
  5.     let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
  6.     let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
  7.     let lastPoint = this.drawingPoints[this.drawingPoints.length - 1] || [];
  8.     if (lastPoint[0] !== pointX || lastPoint[1] !== pointY) {
  9.       this.drawingPoints.push([pointX, pointY]);
  10.     }
  11.   }
  12.   // 清空绘制图层
  13.   drawCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
  14.   // 绘制区域至保存图层
  15.   this.drawSaveArea(this.drawingPoints);
  16.  
  17.   this.drawedPoints.push(this.drawingPoints);
  18.   this.drawingPoints = [];
  19.   this.isDrawing = false;
  20.  
  21.   // 绘制结束逻辑
  22.   this.drawCanvas.removeEventListener("click", this.drawImageClickFn);
  23.   this.drawCanvas.removeEventListener("dblclick", this.drawImageDblClickFn);
  24.   this.drawCanvas.removeEventListener("mousemove", this.drawImageMoveFn);
  25. }

双击时,先获取双击的坐标点,并将其推入drawingPoints数组中。然后清空drawCanvas,并调用drawSaveArea方法,将当前绘制区域渲染到saveCanvas上。

七. 遍历区域点坐标的方法

  1. drawSaveArea(points) {
  2.   if (points.length === 0) return;
  3.   this.saveCtx.save();
  4.   this.saveCtx.beginPath();
  5.   points.forEach((item, i) => {
  6.     this.saveCtx.lineTo(...item);
  7.   });
  8.   this.saveCtx.closePath();
  9.   this.saveCtx.lineWidth = "2";
  10.   this.saveCtx.fillStyle = "rgba(255,0, 255, 0.3)";
  11.   this.saveCtx.strokeStyle = "red";
  12.   this.saveCtx.stroke();
  13.   this.saveCtx.fill(); 
  14.   this.saveCtx.restore();
  15. }

drawSaveArea方法会遍历当前区域的所有点坐标,并在saveCanvas上绘制一个闭合的多边形区域,边框为红色,填充为半透明的紫色。接下来,将当前绘制区域的点坐标数组drawingPoints推入drawedPoints数组中,用于保存所有已绘制的区域数据。然后,重置drawingPoints和isDrawing的状态,并移除所有绘制事件的监听器。

至此,一个区域的绘制就完成了。如果需要继续绘制新的区域,只需再次调用startDraw方法即可。

保存和渲染数据

八. 保存数据：我们需要将绘制的区域数据保存下来，以及从已有数据中渲染出区域

  1. savePoints() {
  2.   // 将画布坐标数据转换成提交数据
  3.   let objectPoints = [];
  4.   objectPoints = this.drawedPoints.map((area) => {
  5.     let polygon = {};
  6.     area.forEach((point, i) => {
  7.       polygon[`x${i + 1}`] = Math.round(point[0] * this.ratio);
  8.       polygon[`y${i + 1}`] = Math.round(point[1] * this.ratio);
  9.     });
  10.     return {
  11.       polygon: polygon,
  12.     };
  13.   });
  14.   this.submitData = objectPoints;
  15.   console.log("最终提交数据", objectPoints);
  16. }

这里遍历所有已绘制的区域drawedPoints,将每个区域的点坐标根据ratio进行缩放(实际图片尺寸),并转换成一个polygon对象的形式,最终保存在submitData中。

九. 渲染数据

  1. renderDatas() {
  2.   // 将提交数据数据转换成画布坐标
  3.   this.drawedPoints = this.submitData.map((item) => {
  4.     let polygon = item.polygon;
  5.     let points = [];
  6.     for (let i = 1; i < Object.keys(polygon).length / 2 + 1; i++) {
  7.       if (!isNaN(polygon[`x${i}`]) && !isNaN(polygon[`y${i}`])) {
  8.         points.push([
  9.           polygon[`x${i}`] / this.ratio,
  10.           polygon[`y${i}`] / this.ratio,
  11.         ]);
  12.       }
  13.     }
  14.     this.drawSaveArea(points);
  15.     return points;
  16.   });
  17. }

渲染数据的逻辑是，遍历submitData中的每个polygon对象，根据ratio将其坐标值转换成canvas的坐标值，并调用drawSaveArea方法将其渲染到saveCanvas上。至此，我们就完成了在canvas上绘制图片区域的全部逻辑。可以根据具体需求进行相应的调整和扩展。

十. 执行过程

具体全部的执行顺序如下:

  1. 初始化Canvas
    • 调用initCanvas()方法初始化三个Canvas画布
    • 调用initImgCanvas()方法计算并设置画布宽高比例，加载并绘制图片
  2. 开始绘制
    • 调用startDraw()方法
    • 监听drawCanvas的click、dblclick、mousemove事件
    • 点击时,在drawImageClickFn中记录点坐标
    • 移动时,在drawImageMoveFn中实时绘制区域
    • 双击时,在drawImageDblClickFn中完成当前区域绘制，保存至saveCanvas
  3. 保存和渲染数据
    • 调用savePoints()方法,将绘制区域的点坐标数据转换并保存到submitData中
    • 调用renderDatas()方法,将submitData中的数据转换并渲染到saveCanvas上

简单来说，就是先初始化画布，然后开始绘制区域的交互，最后保存和渲染数据。

十一. 当然，如果想使用原生JS实现，可以改成像下面这样

  1. let canvasWrap, wrapWidth, wrapHeight, imgCanvas, imgCtx, drawCanvas, drawCtx, saveCanvas, saveCtx;
  2. let ratio, canvasWidth, canvasHeight, imgWidth, imgHeight, imgUrl;
  3. let isDrawing = false;
  4. let drawingPoints = [];
  5. let drawedPoints = [];
  6. let submitData = [];
  7.  
  8. // 1. 初始化Canvas画布
  9. function initCanvas() {
  10.   // 获取canvas容器元素并设置宽高
  11.   canvasWrap = document.getElementsByClassName("canvas-wrap")[0];
  12.   wrapWidth = canvasWrap.clientWidth;
  13.   wrapHeight = canvasWrap.clientHeight;
  14.  
  15.   // 获取canvas元素并获取2D绘图上下文
  16.   imgCanvas = document.getElementById("imgCanvas");
  17.   imgCtx = imgCanvas.getContext("2d");
  18.   drawCanvas = document.getElementById("drawCanvas");
  19.   drawCtx = drawCanvas.getContext("2d");
  20.   saveCanvas = document.getElementById("saveCanvas");
  21.   saveCtx = saveCanvas.getContext("2d");
  22. }
  23.  
  24. // 2. 初始化图片Canvas
  25. function initImgCanvas() {
  26.   // 计算画布和图片的宽高比
  27.   let ww = wrapWidth;
  28.   let wh = wrapHeight;
  29.   let iw = imgWidth;
  30.   let ih = imgHeight;
  31.  
  32.   if (iw / ih < ww / wh) {
  33.     ratio = ih / wh;
  34.     canvasHeight = wh;
  35.     canvasWidth = (wh * iw) / ih;
  36.   } else {
  37.     ratio = iw / ww;
  38.     canvasWidth = ww;
  39.     canvasHeight = (ww * ih) / iw;
  40.   }
  41.  
  42.   // 设置三个canvas的宽高
  43.   imgCanvas.width = canvasWidth;
  44.   imgCanvas.height = canvasHeight;
  45.   drawCanvas.width = canvasWidth;
  46.   drawCanvas.height = canvasHeight;
  47.   saveCanvas.width = canvasWidth;
  48.   saveCanvas.height = canvasHeight;
  49.  
  50.   // 加载图片并绘制到imgCanvas上
  51.   let img = document.createElement("img");
  52.   img.src = imgUrl;
  53.   img.onload = () => {
  54.     console.log("图片已加载");
  55.     imgCtx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
  56.     renderDatas(); // 渲染已有数据
  57.   };
  58. }
  59.  
  60. // 3. 开始绘制
  61. function startDraw() {
  62.   if (isDrawing) return;
  63.   isDrawing = true;
  64.   // 监听drawCanvas的click、dblclick和mousemove事件
  65.   drawCanvas.addEventListener("click", drawImageClickFn);
  66.   drawCanvas.addEventListener("dblclick", drawImageDblClickFn);
  67.   drawCanvas.addEventListener("mousemove", drawImageMoveFn);
  68. }
  69.  
  70. // 4. 清空所有绘制区域
  71. function clearAll() {
  72.   saveCtx.clearRect(0, 0, canvasWidth, canvasHeight);
  73.   drawedPoints = [];
  74. }
  75.  
  76. // 5. 获取并加载图片
  77. function getImage() {
  78.   imgUrl = "需要渲染的图片地址";
  79.   imgWidth = 200;
  80.   imgHeight = 300;
  81.   imgUrl && initImgCanvas();
  82. }
  83.  
  84. // 6. 点击事件,记录点坐标
  85. function drawImageClickFn(e) {
  86.   if (e.offsetX || e.layerX) {
  87.     let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
  88.     let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
  89.     let lastPoint = drawingPoints[drawingPoints.length - 1] || [];
  90.     if (lastPoint[0] !== pointX || lastPoint[1] !== pointY) {
  91.       drawingPoints.push([pointX, pointY]);
  92.     }
  93.   }
  94. }
  95.  
  96. // 7. 鼠标移动事件,实时绘制区域
  97. function drawImageMoveFn(e) {
  98.   if (e.offsetX || e.layerX) {
  99.     let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
  100.     let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
  101.     drawCtx.clearRect(0, 0, canvasWidth, canvasHeight);
  102.  
  103.     drawCtx.fillStyle = "blue";
  104.     drawingPoints.forEach((item, i) => {
  105.       drawCtx.beginPath();
  106.       drawCtx.arc(...item, 6, 0, 180);
  107.       drawCtx.fill();
  108.     });
  109.  
  110.     drawCtx.save();
  111.     drawCtx.beginPath();
  112.     drawingPoints.forEach((item, i) => {
  113.       drawCtx.lineTo(...item);
  114.     });
  115.     drawCtx.lineTo(pointX, pointY);
  116.     drawCtx.lineWidth = "3";
  117.     drawCtx.strokeStyle = "blue";
  118.     drawCtx.fillStyle = "rgba(255, 0, 0, 0.3)";
  119.     drawCtx.stroke();
  120.     drawCtx.fill();
  121.     drawCtx.restore();
  122.   }
  123. }
  124.  
  125. // 8. 双击事件,完成当前区域绘制
  126. function drawImageDblClickFn(e) {
  127.   if (e.offsetX || e.layerX) {
  128.     let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
  129.     let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
  130.     let lastPoint = drawingPoints[drawingPoints.length - 1] || [];
  131.     if (lastPoint[0] !== pointX || lastPoint[1] !== pointY) {
  132.       drawingPoints.push([pointX, pointY]);
  133.     }
  134.   }
  135.   drawCtx.clearRect(0, 0, canvasWidth, canvasHeight);
  136.   drawSaveArea(drawingPoints);
  137.  
  138.   drawedPoints.push(drawingPoints);
  139.   drawingPoints = [];
  140.   isDrawing = false;
  141.  
  142.   drawCanvas.removeEventListener("click", drawImageClickFn);
  143.   drawCanvas.removeEventListener("dblclick", drawImageDblClickFn);
  144.   drawCanvas.removeEventListener("mousemove", drawImageMoveFn);
  145. }
  146.  
  147. // 9. 绘制区域到saveCanvas
  148. function drawSaveArea(points) {
  149.   if (points.length === 0) return;
  150.   saveCtx.save();
  151.   saveCtx.beginPath();
  152.   points.forEach((item, i) => {
  153.     saveCtx.lineTo(...item);
  154.   });
  155.   saveCtx.closePath();
  156.   saveCtx.lineWidth = "2";
  157.   saveCtx.fillStyle = "rgba(255,0, 255, 0.3)";
  158.   saveCtx.strokeStyle = "red";
  159.   saveCtx.stroke();
  160.   saveCtx.fill();
  161.   saveCtx.restore();
  162. }
  163.  
  164. // 10. 保存绘制数据
  165. function savePoints() {
  166.   let objectPoints = [];
  167.   objectPoints = drawedPoints.map((area) => {
  168.     let polygon = {};
  169.     area.forEach((point, i) => {
  170.       polygon[`x${i + 1}`] = Math.round(point[0] * ratio);
  171.       polygon[`y${i + 1}`] = Math.round(point[1] * ratio);
  172.     });
  173.     return {
  174.       polygon: polygon,
  175.     };
  176.   });
  177.   submitData = objectPoints;
  178.   console.log("最终提交数据", objectPoints);
  179. }
  180.  
  181. // 11. 渲染已有数据
  182. function renderDatas() {
  183.   drawedPoints = submitData.map((item) => {
  184.     let polygon = item.polygon;
  185.     let points = [];
  186.     for (let i = 1; i < Object.keys(polygon).length / 2 + 1; i++) {
  187.       if (!isNaN(polygon[`x${i}`]) && !isNaN(polygon[`y${i}`])) {
  188.         points.push([
  189.           polygon[`x${i}`] / ratio, // 根据ratio换算canvas坐标
  190.           polygon[`y${i}`] / ratio,
  191.         ]);
  192.       }
  193.     }
  194.     drawSaveArea(points); // 调用drawSaveArea将区域绘制到saveCanvas上
  195.     return points;
  196.   });
  197. }
  198.  
  199. // 使用方式
  200. initCanvas(); // 1. 初始化Canvas画布
  201. getImage(); // 5. 获取并加载图片 
  202. startDraw(); // 3. 开始绘制

renderDatas函数的作用是将已有的绘制数据(submitData)转换成canvas坐标，

并调用drawSaveArea方法将其渲染到saveCanvas上。

该函数遍历submitData中的每个polygon对象，

根据ratio将其坐标值转换成canvas的坐标值，

然后调用drawSaveArea方法绘制该区域。

最终返回一个包含所有区域点坐标的数组drawedPoints。

最后，需要按顺序调用initCanvas() -> getImage() -> startDraw()等方法,分别完成初始化画布、加载图片和开始绘制的功能。

十二. 全部代码

全部的vuejs代码和原生js代码直接点我头像，私我，获取全部代码。
 

创作不易，感觉有用，就一键三连，感谢(●'◡'●)

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/622283
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号