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

Canvas绘制图片和区域（前端使用Canvas绘制图片，并在图片上绘制区域）_canvas 绘制图片

作者：神奇cpp | 2024-08-06 04:14:02

赞

踩

canvas 绘制图片

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

 

 

204cfb1789394df79e6694497d70322f.gif

 

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

具体流程：

  1. renderDatas函数的作用是将已有的绘制数据(submitData)转换成canvas坐标，
  2. 并调用drawSaveArea方法将其渲染到saveCanvas上，
  3. 该函数遍历submitData中的每个polygon对象，
  4. 根据ratio将其坐标值转换成canvas的坐标值，
  5. 然后调用drawSaveArea方法绘制该区域，
  6. 最终返回一个包含所有区域点坐标的数组drawedPoints，
  7. 最后，需要按顺序调用initCanvas() -> getImage() -> startDraw()等方法,分别完成初始化画布、加载图片和开始绘制的功能。

 

十二. 全部代码

全部的VueJS代码和原生JavaScript代码，请打赏后，直接点我头像，私我，获取全部代码。
 

 

 

 

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

 

 

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

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

  

闽ICP备14008679号