canvas-artboard v2.0.5

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

 ###说明
 关于图片质量只有在指定图片格式为 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方法无法充值透明背景的情况