【JS】928- 用 Canvas 编辑你的图片

川长思鸟来 2023-01-13 04:29 123阅读 0赞

![ea89bd9f298f31b7cab821a12c9d1afc.png][]

### 写在前面    ###

> 最近接到一个需求：线下质检时根据上传的图片和实物进行对比检测，需要在图片上的动态标记出有瑕疵或污点等位置，便于后续流程检测和记录。
> 
> 想到了之前用过的 `canvas` 可以实现这个功能，话不多说，让我们一起认识一下 `canvas`。

#### canvas 自我介绍 ####

大家好，我是 `canvas` ，我能让大家通过 `canvas` 标签，用`JavaScript`来绘制图形。除此之外，动画，游戏图形，数据可视化，照片处理和实时视频处理都难不倒我噢~

##### 一、我的兼容性（心有多大，舞台就有多大） #####

大家使用前端技术前可以在Can I Use上查询一下兼容性噢~ 我就在里面找到了自己呢：

![canvas兼容性][canvas] canvas兼容性

##### 二、我能做什么\*\*（能力越大，责任越大） #####

我来告诉大家我是怎么工作的，从简单的开始噢（hello world~）

**1、拿起纸和笔**

// .html
    <canvas id="tutorial" width="150" height="150"></canvas>
    
    // .js
    const canvas = document.getElementById('tutorial');
    // ctx就是我的纸了
    const ctx = canvas.getContext('2d');
    // 准备一下我的笔(就拿个红色吧~)
    ctx.strokeStyle = 'red';
    // 填充颜色
    ctx.fillStyle = 'red';

**2、基本用法**

我自己总结了一些方法，大家用起来就快多了

*  ##### 画线 #####

![31f512cc4720c7ea6dca2650f92b8ff2.png][] line

ctx.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(); // 进行绘制

*  ###### 画个圈圈 ######

![c9f10ea49b1978cc42da879388ab8c67.png][] arc

ctx.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();

*  ###### 画个框框 ######
    
    ![a1631aca89a2d412b1264e188fb10e74.png][] arc

// x: 矩形左上角的 x 坐标
    // y: 矩形左上角的 y 坐标
    // width: 矩形的宽度，以像素计
    // height: 矩形的高度，以像素计
    // 填充矩形
    ctx.fillRect(x: 20, y: 20, width: 150, height: 100);
    // 无填充矩形
    ctx.strokeRect(20,20,150,100);

好啦，以上是我的基本技能，有兴趣的话可以在MDN WEB上查看我的全部技能噢~

> 回归到需求上，我们开发者应该如何使用 canvas 完成需求功能呢？

#### 实践 ####

结合 canvas 技能，方案设计思路如下：

> >  *  获取适配的图片
> >  *  转换图片：按照图片 1:1 绘制画布
> >  *  动态编辑：在画布上标记操作，可进行增删改
> >  *  生成图片：画布转换为图片

##### 1、获取并转换图片 `drawImage` #####

<img
      style={
        { width: 100px, height: 100px }}
      src="https://test.jpg"
      onLoad={onLoad}
    />
    <canvas></canvas>
    
    function 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 < 0 || _h < 0 ? curPoint : startPoint;
      return {
        _startPoint,
        _w,
        _h
      };
    };
    
    function drawRect() {
      // 获取绘制矩形需要的参数
      const newRect = getRectParam(curPoint)
      // 绘制矩形
      ctx.beginPath();
      ctx.rect(
        newRect._startPoint.x,
        newRect._startPoint.y,
        Math.abs(newRect._w),
        Math.abs(newRect._h)
      );
      ctx.stroke();
    }
    
    function mousemove(event) {
      const x = event.pageX;
      const y = event.pageY;
      // 获取
      const curPoint = getPointOnCanvas(canvas, x, y);
      drawRect();
    };

##### 3、canvas 转图片 #####

const dataURL = canvas.toDataURL('image/png')

以上是部分代码，来看看编辑效果：

![e22c0ffb9e50ac50d72d061c5c714aa7.gif][]

目前需求已顺利上线，质检师的使用反馈很不错。

#### 写在后面 ####

希望通过本文给大家带来一种前端处理图片的思路，有兴趣的同学可以尝试一下 canvas 的其他功能，如：添加文字，编辑的撤回等等。

接下来，会陆续推出三无项目重构的踩坑之旅、跨应用的拖拽能力实践等。每天进步一点点，质变从关注 **大转转 FE** 开始！

![3b8e5c4b8e1caab170231d09d0b08420.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[ea89bd9f298f31b7cab821a12c9d1afc.png]: /images/20221022/8777e92e4d7c41cc96af08aa18ea68c3.png
[canvas]: /images/20221022/2799a2910a2649118fc34bd4956f8755.png
[31f512cc4720c7ea6dca2650f92b8ff2.png]: /images/20221022/b725074d85f441948b38b88155d57c87.png
[c9f10ea49b1978cc42da879388ab8c67.png]: /images/20221022/ef5a370de06744599d13ca3dad69b2f9.png
[a1631aca89a2d412b1264e188fb10e74.png]: /images/20221022/1691ff11852845e38dcb131f39f89937.png
[e22c0ffb9e50ac50d72d061c5c714aa7.gif]: /images/20221022/05629baff4a84a3684a7fb9498b84c3e.png
[3b8e5c4b8e1caab170231d09d0b08420.gif]: /images/20221022/060945b00f8b4e389a685d035ada6ab8.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect