用canvas编辑你的图片

见贤思齐

写在前面最近接到一个需求：线下质检时根据上传的图片和实物进行对比检测，需要在图片上的动态标记出有瑕疵或污点等位置，便于后续流程检测和记录。想到了之前用过的canvas可以实现这个功能，话不多说，让我们一起认识一下canvas。canvas自我介绍大家好，我是canvas，我能让大家通过canvas标签，用JavaScript来绘制图形。除此之外，动画，游戏图形，数据可视化，照片处理和实时视频处理都难不倒我噢~一、我的兼容性（心有多大，舞台就有多大）大家使用前端技术前可以在CanIUse上查询一下兼容性噢~我就在里面找到了自己呢：canvas兼容性二、我能做什么**（能力越大，责任越大）我来告诉大家我是怎么工作的，从简单的开始噢（helloworld~）1、拿起纸和笔// .html// .jsconst canvas = document.getElementById('tutorial');// ctx就是我的纸了const ctx = canvas.getContext('2d');// 准备一下我的笔(就拿个红色吧~)ctx.strokeStyle = 'red';// 填充颜色ctx.fillStyle = 'red';2、基本用法我自己总结了一些方法，大家用起来就快多了画线linectx.beginPath();ctx.lineWidth="5";ctx.strokeStyle="red"; // 红色路径ctx.moveTo(0,75);ctx.lineTo(250,75);ctx.stroke(); // 进行绘制ctx.beginPath();ctx.strokeStyle="blue"; // 蓝色路径ctx.moveTo(50,0);ctx.lineTo(150,130);ctx.stroke(); // 进行绘制画个圈圈arcctx.beginPath();// ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);//x: 圆的中心的x坐标。//y: 圆的中心的y坐标。//r: 圆的半径。//sAngle: 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。//eAngle: 结束角，以弧度计。//counterclockwise: 可选。规定应该逆时针还是顺时针绘图。False= 顺时针，true= 逆时针。ctx.arc(100,75,50,0,2*Math.PI);ctx.stroke();画个框框arc// x: 矩形左上角的 x 坐标// y: 矩形左上角的 y 坐标// width: 矩形的宽度，以像素计// height: 矩形的高度，以像素计// 填充矩形ctx.fillRect(x: 20, y: 20, width: 150, height: 100);// 无填充矩形ctx.strokeRect(20,20,150,100);好啦，以上是我的基本技能，有兴趣的话可以在MDNWEB上查看我的全部技能噢~回归到需求上，我们开发者应该如何使用canvas完成需求功能呢？实践结合canvas技能，方案设计思路如下：获取适配的图片转换图片：按照图片1:1绘制画布动态编辑：在画布上标记操作，可进行增删改生成图片：画布转换为图片1、获取并转换图片drawImagefunction onLoad() {  // 设置canvas为图片大小  canvas.height = img.height;  canvas.width = img.width;  // 绘制图片 (0,0)开始1:1绘制img  // ctx.drawImage(img,x,y,width,height);  ctx.drawImage(img, 0, 0, img.width, img.height);}2、编辑功能(此处主要实现框选功能)canvas.addEventListener("mousedown", onMouseDown);canvas.addEventListener("mousemove", onMouseMove);function getPointOnCanvas() {  // canvas相对于视窗的位置集合  const rect = canvas.getBoundingClientRect();  return {    x: x - rect.left * (canvas.width / rect.width),    y: y - rect.top * (canvas.height / rect.height)  }}function onMouseDown(event) {  var x = event.pageX;  var y = event.pageY;  // 获取起点  startPoint = getPointOnCanvas(canvas, x, y);  ctx.beginPath();  ctx.moveTo(startPoint.x, startPoint.y);}function getRectParam(curPoint) => {  const _w = curPoint.x - startPoint.x;  const _h = curPoint.y - startPoint.y;  const _startPoint = _w