vue组件 canvas 实现图片涂鸦

效果图

方案背景

需求

1 需要对图片进行标注，导出图片。

2 需要标注N多图片最后同时保存。

3 需要根据多边形区域数据（区域、颜色、名称）标注。

对应方案

1 用canvas实现涂鸦、圆形、矩形的绘制，最终生成图片base64编码用于上传

2 大量图片批量上传很耗时间，为了提高用户体验，改为只实现圆形、矩形绘制，最终保存成坐标，下次显示时根据坐标再绘制。

3 多边形区域的显示是根据坐标点绘制，名称显示的位置为多边形质心。

代码

  .canvas{

    cursor: crosshair;

  }

必须传入的参数

    图片路径 url: string

    绘图区域宽度 width: string

    绘图区域高度 height: string

选择传入的参数

    是否可以绘制,默认true

        canDraw: boolean

    坐标点信息,不传入则不绘制

        info: string

    是否可绘制，默认true

        canDraw: boolean

    绘图颜色，默认red

        lineColor: string

    绘图笔宽度，默认2

        lineWidth: number

    绘图笔类型，rec、circle，默认rec

        lineType: string

可以调用的方法

    清空画布 clean()

    返回坐标点信息 getInfo()

特殊说明

    canvas对象不能获得坐标,是通过父元素坐标获取的，所以该组件的父元素以上的层级不能有太多的定位、嵌套，否则绘制坐标会偏移。

    域名不同的图片可能存在跨域问题，看过很多资料没有太好的办法，最后项目中是用node服务做了一个图片转为base64的接口，再给canvas绘制解决的。并不一定适用于其他项目，如果有更好的办法解决欢迎分享。

    导出坐标点数据只能导出规则图案的坐标点，因为随意涂鸦的坐标点太多时会崩溃的（虽然没试过具体到什么程度会崩溃），如果有高性能的实现方式欢迎分享。

    如果涂鸦后保存再请求图片url出现请求不到的情况，是因为CDN缓存的问题，在图片路径后面拼个随机码就可以解决。

原文出处：https://segmentfault.com/a/1190000016852958