canvas-tablet

Tablet

Tablet是一个轻量级的基于canvas的在线画板，无其他依赖，传统网站或vue、react、angular等单页面应用皆可使用！兼容各种移动设备！

Tablet is a lightweight canvas-based online drawing board with no other dependencies. It can be used by traditional websites or single-page applications such as vue, react, and angular! Compatible with all kinds of mobile devices!

canvas签名板文档

这是Tablet2.0文档，Tablet1.0文档请前往

Tablet1.0文档

安装(Install)

npm安装：
npm install canvas-tablet -S
script标签引入：
将/dist/Tablet-2.0.1.min.js下载下来即可

演示地址(Demo)

https://941477276.github.io/Tablet/index2.html

基本使用(Usage)

<div class="tool-bar">
  <div class="tablet-btns" style="padding: 10px;">
    <input class="-color-picker color-color" type="text" value="字体颜色" id="colpick" readonly/>
    <input class="-color-picker bg-color" type="text" value="背景颜色" id="colpick2" readonly/>
    <div class="clear-canvas">清屏</div>
    <div class="save-canvas-to-img">保存图片</div>
    <span>
         画笔粗细
         <select>
             <option value="1">1</option>
             <option value="3">3</option>
             <option value="5">5</option>
             <option value="8">8</option>
             <option value="10" selected>10</option>
             <option value="15">15</option>
             <option value="20">20</option>
         </select>
         <!--<select>
             <option value="0">正常</option>
             <option value="90">顺时针旋转90度</option>
             <option value="-90">逆时针旋转90度</option>
             <option value="180">旋转180度</option>
         </select>-->
         <button type="button" class="get_blob">获取blob对象</button>
         <button type="button" class="set-img">设置背景图片</button>
         <button type="button" class="backOneStep">撤回</button>
    </span>
  </div>
</div>

<div class="container" id="container"></div>
<script src="./dist/Table.2.0.1.min.js"></script>  
<script>
  var tablet;
  $(function () {
    tablet = new Tablet("#container", {
      // 画笔默认颜色
      defaultColor: "#2e76da",
      // 默认背景色
      defaultBackgroundColor: '#f60',
      // canvas画布是否响应式
      // response: true,
      // canvas的宽度，宽高都可以传递函数
      // width: 0,
      // height: 0,
      // 前面板的额外class
      // extraClass: "",
      // 设置获取到的图片的类型，可选值png、jpg，默认png
      // imgType: "png",
      // 清除画布前执行的函数，如果该函数返回false，则不会进行清除
      // onBeforeClear: function () {},
      // 清除画布后执行的函数
      // onClear: function () {},
      autoResize: true, // 浏览器窗口改变时是否重新绘制
      // 画布初始化后的回调
      onInit: function () {
        var that = this,
          container = this.container;
        $(".-color-picker").each(function () {
          var self = this,
            $self = $(this);
          if ($self.hasClass('color-color')) {

            $self.colpick({
              color: that.config.defaultColor,
              layout: 'hex',
              submitText: "确定",
              onSubmit: function (hsb, hex, rgb, el, bySetColor) {
                var color = "#" + hex;
                $(el).css({
                  //color: color,
                  "border-color": color
                }).colpickHide();
                el.selectedColor = color;
                that.color = color;

                that.setColor(color);
              }
            });
            $self.css({
              "border-color": that.config.defaultColor
            });
          } else if ($self.hasClass('bg-color')) {
            $self.colpick({
              color: that.config.defaultBackgroundColor,
              layout: 'hex',
              submitText: "确定",
              onSubmit: function (hsb, hex, rgb, el, bySetColor) {
                var color = "#" + hex;
                $(el).css({
                  //color: color,
                  "border-color": color
                }).colpickHide();
                el.selectedColor = color;
                //that.bgColor = color;
                that.setBackgroundColor(color);
                // 重绘背景图后必须刷新一下，否则偶尔会出现最后一个线条被重复绘制一遍问题
                var timer = setTimeout(function (){
                  clearTimeout(timer);
                  that.refresh();
                }, 0);
              }
            });
            $self.css({
              "border-color": that.config.defaultBackgroundColor
            });
          }
        });
        $('.clear-canvas').on('click', function () {
          that.clear();
        })
        $(".tablet-btns select").eq(0).on("change", function () {
          that.setLineWidth($(this).val());
        });
        $(".save-canvas-to-img").on("click", function () {
          console.log(that.getBase64());
          if (!that.isMobile) {
            alert("请按f12打开控制台查看base64图片数据！");
          }
        });
        $(".get_blob").on("click", function () {
          console.log(that.getBlob());
        });
        $(".set-img").on("click", function () {
          that.setBackgroundImage(document.getElementById('bg_img'));
          // 重绘背景图后必须刷新一下，否则偶尔会出现最后一个线条被重复绘制一遍问题
          var timer = setTimeout(function (){
            clearTimeout(timer);
            that.refresh();
          }, 0);
        });
        $(".backOneStep").on('click', function () {
          that.revoke();
        });
      }
    });
    console.log(tablet);
  });
</script>

效果如图：

Table画板效果

实例方法(Methods)

refresh(refreshWH)

刷新画布，线条及背景将会重绘，返回当前Tablet实例；如果refreshWH为true，则会重新计算画布宽高

hasCanUseLine

判断是否有可用的线条，可以用来判断用户是否有绘制内容，返回值类型：boolean

getRect

获取画布位置及宽高；返回值类型：{x: number, width: number, y: number, height: number}

getBase64(type, angle)

将画布内容转换成base64数据，并返回；返回值类型：string

type：图片类型，只有jpg、png两个选项，默认png
angle：旋转角度，默认为0，角度支持90的整数倍

getBlob(type, angle)

将画布内容转换成blob数据，并返回；返回值类型：blob

type：图片类型，只有jpg、png两个选项，默认png
angle：旋转角度，默认为0，角度支持90的整数倍

getMax(xPoints, yPoints)

获取x、y轴的最大、最小值；xPoints, yPoints分别为x轴、y轴所有坐标；返回值类型：{top: number, left: number, bottom: number, right: number}

setColor(color)

设置画笔颜色；color为颜色值，可以是任何css的颜色表达式；返回当前Tablet实例

setLineWidth(width)

设置画笔粗细；width为粗细值，number类型；返回当前Tablet实例

setBackgroundColor(bgColor, x, y, width, height, addToOperationRecord)

设置画布背景颜色；返回当前Tablet实例

bgColor：颜色值，可以是任何css的颜色表达式
x：绘制起始x点，默认为0
y：绘制起始y点，默认为0
width：绘制宽度，默认为整个画布宽度
height：绘制高度，默认为整个画布高度
addToOperationRecord：是否将此操作添加到操作历史中，默认为true

setBackgroundImage(img, x, y, width, height, onImgLoading, onFail, addToOperationRecord)

设置画布背景颜色；返回当前Tablet实例

img：背景图片，值可以为图片url或者Image对象
x：绘制起始x点，默认为0
y：绘制起始y点，默认为0
width：绘制宽度，默认为整个画布宽度
height：绘制高度，默认为整个画布高度
onImgLoading：图片加载中回调
onFail：图片加载失败回调
addToOperationRecord：是否将此操作添加到操作历史中，默认为true

setCanvasWH(width, height)

设置画布的宽高；width, height分别为画布宽高，如果不传宽高则会自动计算；返回当前Tablet实例

canvasReset

重置canvas画笔属性，使用最后一次的属性进行重置，返回当前Tablet实例；

revoke

回退一步，返回当前Tablet实例；

clear(clearPoints)

clear方法用于清空画布，返回值当前Tablet实例；如果clearPoints为true，则会将之前绘制的线条及操作步骤清空

hasContent(singleColorCountMin, totalColorCountMin) v2.0.5新增

判断画布是否有内容，画布中有可用线条或画布中颜色数量大于等于totalColorCountMin都认为有内容

singleColorCountMin：单个颜色最少数量，默认5
totalColorCountMin：总颜色数量，默认为2

getTabletImageColors v2.0.5新增

获取画布中内容的颜色（16进制）

Dependencies

rollup: ^2.68.0 rollup-plugin-terser: ^7.0.2