canvas 画板

兼容移动端 touch 事件

演示地址http://115.28.106.143:8081/#/canvas 控制台打印了相关的信息

安装
npm install -s canvas-artboard
引入
import Draw from 'canvas-artboard'

<canvas width="800" height="500" id="canvas"></canvas>

const canvasDraw = new Draw("canvas", [], "#999999", this.color, this.size, (e) => {console.log('当前画布实例：', e)});
参数依次传入为
  canvas的id,
  历史纪录的点: historyOptions {
    [
      {
        size: Number,
        color: String,
        list: [
          [12,13],
          [14,15]
        ]
      },
      {
        img: HTMLImageElement,
        x: number,
        y: number,
        w: number,
        h: number,
        isCover: boolean
      }
    ]
  },
  画板背景色,
  画笔颜色,
  画笔大小,
  每次画笔完成的回调方式，回调参数为当前canvasDraw的实例

----------提供的方法-----------

API

| 方法 | 说明 | 参数 | 默认值 | 返回值 | 版本 | | ---------------- | ------------------------------------------------------------------------------------ | ----------------------------------------------------------------- | ---------------------- | -------------- | ---- | | resetCanvas | 清空 canvas 的方法 | 无 | | | | init | 还原所有画笔的画布 不传参数为清空画板 | {[{size: Number,color: String,list: [[12,13],[14,15]]}]} | [] | | | after | 后一步画布-----返回一个对象{code, msg},code=404 没有前一笔, code=200 成功 | 无 | | {code, msg} | ~~ | | front | 返回一个对象{code, msg},前一步画布-----code=404 没有前一笔, code=200 成功 | 无 | | {code, msg} | ~~ | | getPointList | 获取画笔记录 | 无 | | historyOptions | ~~ | | setColor | 设置画笔颜色 | color 如('#333333') | | | ~~ | | setPenSize | 设置画笔的大小 | number | | | ~~ | | eraser | 橡皮檫（使用背景色为画笔，不会清除像素点） | 无 | | | ~~ | | getbase64 | 获取 canvas 的 base64 | (质量 0-1 越大越好, 图片类型) | (1, 'image/png') | string | ~~ | | drawImg | 插入图片具体说明见下方说明 | (图片源， 位置 x， 位置 y， 图片宽， 图片高， 是否被历史画笔覆盖) | | string | ~~ | | downland | 下载图片 | (下载图片名, 质量 0-1 越大越好, 图片类型) | (必填, 1, 'image/png') | | ~~ | | getBase64ImgFile | 获取 canvas 的 file 文件类型 | (质量 0-1 越大越好, 图片类型, 文件名) | (1, 'image/png', 必填) | File 类型文件 | ~~ | | clearPixel | 清除画布像素（透明色不同于橡皮檫，image/png 才有效果， image/jpeg 底会被填充为黑色） | boolean | boolean | | ~~ | | setNoDraw | 在某些特定的场景下例如需要拖动 canvas 画布的情况，兼容 canvas 拖拽事件 | boolean | boolean | | ~~ |

 ###说明
 关于图片质量只有在指定图片格式为 image/jpeg 或 image/webp生效

 插入图片drawImg 使用input框选择图片转化成base64配合 async 和 await
 let reader = new FileReader();
 reader.onload = async (e) => {
   let img = await new Image()
   img.src = await e.target.result
   img.height = 100
   img.width = 100
   canvasDraw.drawImg(img, 0, 0, 100, 100, true)
 };
 reader.readAsDataURL(e.target.files[0]);

 #2020-06-08
 修改
 优化插入画板后前一笔后一笔的动作

 新增
 插入图片功能

 #2020-06-12
 修改
 源码部分注释
 优化插入画板后前一笔后一笔的动作
 获取base64图片方法的传参类型调整

 新增
 下载图片功能
 获取canvas的file文件类型

 #2022-03-26
 新增清除像素点功能
 通过canvasDraw.clearPixel(boolean)传入布尔值来开启关闭

 #2022-03-27
 优化清除像素点功能中鼠标移动过快产生的间隔

 #2022-04-02
 转换ts版本

 #2022-05-22
 1.新增每笔画完的回调方法
 2.新增设置canvas不可绘制(用于兼容拖拽事件)

  #2022-05-24
 1.修复在背景图为透明的情况下resetCanvas和init方法无法充值透明背景的情况