canvas-artboard

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方法无法充值透明背景的情况