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

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

先看一下效果：

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

初始化Canvas

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

initCanvas() {// 初始化canvas画布let canvasWrap = document.getElementsByClassName("canvas-wrap");this.wrapWidth = canvasWrap[0].clientWidth;this.wrapHeight = canvasWrap[0].clientHeight;this.imgCanvas = document.getElementById("imgCanvas");this.imgCtx = this.imgCanvas.getContext("2d");// 绘制canvasthis.drawCanvas = document.getElementById("drawCanvas");this.drawCtx = this.drawCanvas.getContext("2d");// 保存绘制区域 saveCanvasthis.saveCanvas = document.getElementById("saveCanvas");this.saveCtx = this.saveCanvas.getContext("2d");
}
  1. imgCanvas用于绘制原始图片
  2. drawCanvas用于临时绘制区域
  3. saveCanvas用于保存最终绘制的区域

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

initImgCanvas() {// 计算宽高比let ww = this.wrapWidth; // 画布宽度let wh = this.wrapHeight; // 画布高度 let iw = this.imgWidth; // 图片宽度let ih = this.imgHeight; // 图片高度if (iw / ih < ww / wh) {// 以高为主this.ratio = ih / wh;this.canvasHeight = wh;this.canvasWidth = (wh * iw) / ih;} else {// 以宽为主 this.ratio = iw / ww;this.canvasWidth = ww;this.canvasHeight = (ww * ih) / iw;}// 初始化画布大小this.imgCanvas.width = this.canvasWidth;this.imgCanvas.height = this.canvasHeight;this.drawCanvas.width = this.canvasWidth; this.drawCanvas.height = this.canvasHeight;this.saveCanvas.width = this.canvasWidth;this.saveCanvas.height = this.canvasHeight;// 图片加载绘制let img = document.createElement("img");img.src = this.imgUrl;img.onload = () => {console.log("图片已加载");this.imgCtx.drawImage(img, 0, 0, this.canvasWidth, this.canvasHeight);this.renderDatas(); // 渲染原有数据};
}

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

开始绘制

三. 绘制的主要逻辑

startDraw() {// 绘制区域if (this.isDrawing) return;this.isDrawing = true;// 绘制逻辑this.drawCanvas.addEventListener("click", this.drawImageClickFn);this.drawCanvas.addEventListener("dblclick", this.drawImageDblClickFn);this.drawCanvas.addEventListener("mousemove", this.drawImageMoveFn);
}

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

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

drawImageClickFn(e) {let drawCtx = this.drawCtx;if (e.offsetX || e.layerX) {let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;let lastPoint = this.drawingPoints[this.drawingPoints.length - 1] || [];if (lastPoint[0] !== pointX || lastPoint[1] !== pointY) {this.drawingPoints.push([pointX, pointY]);}}
}

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

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

drawImageMoveFn(e) {let drawCtx = this.drawCtx;if (e.offsetX || e.layerX) {let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;// 绘制drawCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);// 绘制点drawCtx.fillStyle = "blue";this.drawingPoints.forEach((item, i) => {drawCtx.beginPath();drawCtx.arc(...item, 6, 0, 180);drawCtx.fill(); //填充});// 绘制动态区域drawCtx.save();drawCtx.beginPath();this.drawingPoints.forEach((item, i) => {drawCtx.lineTo(...item);});drawCtx.lineTo(pointX, pointY);drawCtx.lineWidth = "3";drawCtx.strokeStyle = "blue";drawCtx.fillStyle = "rgba(255, 0, 0, 0.3)";drawCtx.stroke();drawCtx.fill(); //填充drawCtx.restore();}
}

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

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

drawImageDblClickFn(e) {let drawCtx = this.drawCtx;let saveCtx = this.saveCtx;if (e.offsetX || e.layerX) {let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;let lastPoint = this.drawingPoints[this.drawingPoints.length - 1] || [];if (lastPoint[0] !== pointX || lastPoint[1] !== pointY) {this.drawingPoints.push([pointX, pointY]);}}// 清空绘制图层drawCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);// 绘制区域至保存图层this.drawSaveArea(this.drawingPoints);this.drawedPoints.push(this.drawingPoints);this.drawingPoints = [];this.isDrawing = false;// 绘制结束逻辑this.drawCanvas.removeEventListener("click", this.drawImageClickFn);this.drawCanvas.removeEventListener("dblclick", this.drawImageDblClickFn);this.drawCanvas.removeEventListener("mousemove", this.drawImageMoveFn);
}

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

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

drawSaveArea(points) {if (points.length === 0) return;this.saveCtx.save();this.saveCtx.beginPath();points.forEach((item, i) => {this.saveCtx.lineTo(...item);});this.saveCtx.closePath();this.saveCtx.lineWidth = "2";this.saveCtx.fillStyle = "rgba(255,0, 255, 0.3)";this.saveCtx.strokeStyle = "red";this.saveCtx.stroke();this.saveCtx.fill(); this.saveCtx.restore();
}

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

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

保存和渲染数据

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

savePoints() {// 将画布坐标数据转换成提交数据let objectPoints = [];objectPoints = this.drawedPoints.map((area) => {let polygon = {};area.forEach((point, i) => {polygon[`x${i + 1}`] = Math.round(point[0] * this.ratio);polygon[`y${i + 1}`] = Math.round(point[1] * this.ratio);});return {polygon: polygon,};});this.submitData = objectPoints;console.log("最终提交数据", objectPoints);
}

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

九. 渲染数据

renderDatas() {// 将提交数据数据转换成画布坐标this.drawedPoints = this.submitData.map((item) => {let polygon = item.polygon;let points = [];for (let i = 1; i < Object.keys(polygon).length / 2 + 1; i++) {if (!isNaN(polygon[`x${i}`]) && !isNaN(polygon[`y${i}`])) {points.push([polygon[`x${i}`] / this.ratio,polygon[`y${i}`] / this.ratio,]);}}this.drawSaveArea(points);return points;});
}

渲染数据的逻辑是，遍历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实现，可以改成像下面这样

let canvasWrap, wrapWidth, wrapHeight, imgCanvas, imgCtx, drawCanvas, drawCtx, saveCanvas, saveCtx;
let ratio, canvasWidth, canvasHeight, imgWidth, imgHeight, imgUrl;
let isDrawing = false;
let drawingPoints = [];
let drawedPoints = [];
let submitData = [];// 1. 初始化Canvas画布
function initCanvas() {// 获取canvas容器元素并设置宽高canvasWrap = document.getElementsByClassName("canvas-wrap")[0];wrapWidth = canvasWrap.clientWidth;wrapHeight = canvasWrap.clientHeight;// 获取canvas元素并获取2D绘图上下文imgCanvas = document.getElementById("imgCanvas");imgCtx = imgCanvas.getContext("2d");drawCanvas = document.getElementById("drawCanvas");drawCtx = drawCanvas.getContext("2d");saveCanvas = document.getElementById("saveCanvas");saveCtx = saveCanvas.getContext("2d");
}// 2. 初始化图片Canvas
function initImgCanvas() {// 计算画布和图片的宽高比let ww = wrapWidth;let wh = wrapHeight;let iw = imgWidth;let ih = imgHeight;if (iw / ih < ww / wh) {ratio = ih / wh;canvasHeight = wh;canvasWidth = (wh * iw) / ih;} else {ratio = iw / ww;canvasWidth = ww;canvasHeight = (ww * ih) / iw;}// 设置三个canvas的宽高imgCanvas.width = canvasWidth;imgCanvas.height = canvasHeight;drawCanvas.width = canvasWidth;drawCanvas.height = canvasHeight;saveCanvas.width = canvasWidth;saveCanvas.height = canvasHeight;// 加载图片并绘制到imgCanvas上let img = document.createElement("img");img.src = imgUrl;img.onload = () => {console.log("图片已加载");imgCtx.drawImage(img, 0, 0, canvasWidth, canvasHeight);renderDatas(); // 渲染已有数据};
}// 3. 开始绘制
function startDraw() {if (isDrawing) return;isDrawing = true;// 监听drawCanvas的click、dblclick和mousemove事件drawCanvas.addEventListener("click", drawImageClickFn);drawCanvas.addEventListener("dblclick", drawImageDblClickFn);drawCanvas.addEventListener("mousemove", drawImageMoveFn);
}// 4. 清空所有绘制区域
function clearAll() {saveCtx.clearRect(0, 0, canvasWidth, canvasHeight);drawedPoints = [];
}// 5. 获取并加载图片
function getImage() {imgUrl = "需要渲染的图片地址";imgWidth = 200;imgHeight = 300;imgUrl && initImgCanvas();
}// 6. 点击事件,记录点坐标
function drawImageClickFn(e) {if (e.offsetX || e.layerX) {let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;let lastPoint = drawingPoints[drawingPoints.length - 1] || [];if (lastPoint[0] !== pointX || lastPoint[1] !== pointY) {drawingPoints.push([pointX, pointY]);}}
}// 7. 鼠标移动事件,实时绘制区域
function drawImageMoveFn(e) {if (e.offsetX || e.layerX) {let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;drawCtx.clearRect(0, 0, canvasWidth, canvasHeight);drawCtx.fillStyle = "blue";drawingPoints.forEach((item, i) => {drawCtx.beginPath();drawCtx.arc(...item, 6, 0, 180);drawCtx.fill();});drawCtx.save();drawCtx.beginPath();drawingPoints.forEach((item, i) => {drawCtx.lineTo(...item);});drawCtx.lineTo(pointX, pointY);drawCtx.lineWidth = "3";drawCtx.strokeStyle = "blue";drawCtx.fillStyle = "rgba(255, 0, 0, 0.3)";drawCtx.stroke();drawCtx.fill();drawCtx.restore();}
}// 8. 双击事件,完成当前区域绘制
function drawImageDblClickFn(e) {if (e.offsetX || e.layerX) {let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;let lastPoint = drawingPoints[drawingPoints.length - 1] || [];if (lastPoint[0] !== pointX || lastPoint[1] !== pointY) {drawingPoints.push([pointX, pointY]);}}drawCtx.clearRect(0, 0, canvasWidth, canvasHeight);drawSaveArea(drawingPoints);drawedPoints.push(drawingPoints);drawingPoints = [];isDrawing = false;drawCanvas.removeEventListener("click", drawImageClickFn);drawCanvas.removeEventListener("dblclick", drawImageDblClickFn);drawCanvas.removeEventListener("mousemove", drawImageMoveFn);
}// 9. 绘制区域到saveCanvas
function drawSaveArea(points) {if (points.length === 0) return;saveCtx.save();saveCtx.beginPath();points.forEach((item, i) => {saveCtx.lineTo(...item);});saveCtx.closePath();saveCtx.lineWidth = "2";saveCtx.fillStyle = "rgba(255,0, 255, 0.3)";saveCtx.strokeStyle = "red";saveCtx.stroke();saveCtx.fill();saveCtx.restore();
}// 10. 保存绘制数据
function savePoints() {let objectPoints = [];objectPoints = drawedPoints.map((area) => {let polygon = {};area.forEach((point, i) => {polygon[`x${i + 1}`] = Math.round(point[0] * ratio);polygon[`y${i + 1}`] = Math.round(point[1] * ratio);});return {polygon: polygon,};});submitData = objectPoints;console.log("最终提交数据", objectPoints);
}// 11. 渲染已有数据
function renderDatas() {drawedPoints = submitData.map((item) => {let polygon = item.polygon;let points = [];for (let i = 1; i < Object.keys(polygon).length / 2 + 1; i++) {if (!isNaN(polygon[`x${i}`]) && !isNaN(polygon[`y${i}`])) {points.push([polygon[`x${i}`] / ratio, // 根据ratio换算canvas坐标polygon[`y${i}`] / ratio,]);}}drawSaveArea(points); // 调用drawSaveArea将区域绘制到saveCanvas上return points;});
}// 使用方式
initCanvas(); // 1. 初始化Canvas画布
getImage(); // 5. 获取并加载图片 
startDraw(); // 3. 开始绘制

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

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

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

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

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

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

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

十二. 全部代码

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/687863.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Allegro如何输出各层PCB视图的PDF文件

Allegro如何输出各层PCB视图的PDF文件

如何输出各层PCB视图的PDF文件 1、说明 用Allegro设计好PCB后&#xff0c;有时需要出各层的PDF文档出来进行汇报和展示&#xff0c;这时就需要将各层的平面视图全部以PDF的形式加载出来&#xff0c;具体方法如下。 2、PDF文件的输出方法&#xff08;以四层板为例&#xff09; …
阅读更多...
C——单链表

C——单链表

一.前言 我们在前面已经了解了链表中的双向链表&#xff0c;而我们在介绍链表分类的时候就说过常用的链表只有两种——双向带头循环链表和单向不带头不循环链表。下来我来介绍另一种常用的链表——单向不带头不循环链表也叫做单链表。不清楚链表分类的以及不了解双向链表的可以…
阅读更多...
【bug记录】Vue3 Vant UI 中 van-popup 不弹出

【bug记录】Vue3 Vant UI 中 van-popup 不弹出

原因&#xff1a;语法使用错误&#xff0c;使用了 Vue 2 的语法 Vue3语法&#xff1a; Vue2语法&#xff1a;
阅读更多...
前端Vue uView 组件＜u-search＞ 自定义右侧搜索按钮样式

前端Vue uView 组件＜u-search＞ 自定义右侧搜索按钮样式

前言 uView 文档的效果不是ui设计的样式 需要重新编辑 原效果 ui设计效果 解决方案 设置里说明的需要传一个样式对象 这个对象 需要写在 script 标签里面 这里需要遵循驼峰命名 比如font-size 改为 fontSize lineHeight和textAlign为水平锤子居中效果 searchStyle: {ba…
阅读更多...
Linux虚拟机运行“yum install gcc-c++”报错“Loading mirror speeds from cached hostfile”

Linux虚拟机运行“yum install gcc-c++”报错“Loading mirror speeds from cached hostfile”

目录 一、在Linux上安装Redis时&#xff0c;在终端执行命令“yum install gcc-c”时&#xff0c;报错&#xff1a; 二、然后发现linux的网络不通&#xff0c;什么网站都访问不了 三、连上网后&#xff0c;再变换yum源 四、重新运行yum install gcc 一、在Linux上安装Redis时…
阅读更多...
WPF之工具栏菜单栏功能区。

WPF之工具栏菜单栏功能区。

1&#xff0c;菜单栏&#xff0c;工具栏&#xff0c;状态栏。 1.1&#xff0c;Menu中可添加菜单分隔条<Separator></Separator>作为分割线&#xff0c;使用Separator可以通过改变其template来自定义&#xff0c;Separator是无焦点的&#xff0c;如果简单的在MenuIt…
阅读更多...
IIS配置SSL，根据pem和key生成pfx，openssl的版本不能太高

IIS配置SSL，根据pem和key生成pfx，openssl的版本不能太高

1、生成pfx文件 供应商给的文件是pef和key后缀的两个文件&#xff0c;在IIS里不好导入(如果有知道好导入的可以给我留言&#xff0c;谢谢。)。 1.1 下载OpenSSL工具&#xff0c;并安装。 主要用于将.pem文件转成.pfx文件。 下载OpenSSL的链接&#xff1a;http://slproweb.com/…
阅读更多...
Oracle 多表查询

Oracle 多表查询

关联查询 一、sql:1992语法的连接笛卡尔积等值连接非等值连接自连接外连接 二、sql:1999语法的连接交叉连接自然连接USING创建连接ON创建连接左外连接右外连接FULL OUTER JOININNER JOIN 三、子查询子查询的种类单行子查询多行子查询 在From字句中使用子查询练习 四、行转列 一…
阅读更多...
视频拼接融合产品的产品与架构设计(二)

视频拼接融合产品的产品与架构设计(二)

视频拼接融合产品的产品与架构设计一 以上是第一期&#xff0c;以前思考的时候还是比较着急&#xff0c;现在思考的更多了&#xff0c;现实世界的拼接更加需要我们沉下心来做&#xff0c;尤其是对于更多画面&#xff0c;画面更加清晰怎么做 本篇章不在于其他功能&#xff0c;在…
阅读更多...
TL（TypeLetters）的另类用法：自动去空行

TL（TypeLetters）的另类用法：自动去空行

你可能还不知道吧&#xff1a;可以使用TL&#xff08;TypeLetters&#xff09;自动去掉文件的空行。 先看文件&#xff1a;文件中有很多空白行&#xff0c;我们可以手动去把它们一行一行的删除掉。 有了TL&#xff08;TypeLetters&#xff09;&#xff0c;一切都简单了&#x…
阅读更多...
mongoDB分组查询

mongoDB分组查询

完整代码 //根据医院编号 和 科室编号 &#xff0c;查询排班规则数据Overridepublic Map<String, Object> getRuleSchedule(long page, long limit, String hoscode, String depcode) {//1 根据医院编号 和 科室编号 查询Criteria criteria Criteria.where("hosco…
阅读更多...
SQL的命令

SQL的命令

目录 创建用户 ​编辑 DDL数据库操作 查询 创建 使用 删除 创建数据库表 在表中修改字段 查询表 DML 添加数据 修改 删除 DQL 查询 创建用户 DDL数据库操作 查询 show databases; 创建 权限问题导致无法创建&#xff0c;连接root修改用户权限 CREATE DATABAS…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023