Skip to content
canvas在线签名板
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
dist
images
.gitignore
README.md
Tablet-1.0.js
colpick.js
doc.html
gulpfile.js
index.html
jquery-1.12.4.min.js
package-lock.json
package.json

README.md

Tablet

Tablet是一个基于canvas的在线签名板!

canvas签名板文档

基本使用

      
      <div id="my_tablet"></div>
          <script type="text/html" id="temp">
             <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>
                 <span class="save-canvas-to-img">
                     保存图片
                 </span>
                 <select>
                     <option value="0">正常</option>
                     <option value="90">顺时针旋转90度</option>
                     <option value="-90">逆时针旋转90度</option>
                     <option value="180">旋转180度</option>
                 </select>
                 <span class="get_blob">获取blob对象</span>
             </span>
         </script>
         <script>
            var tablet = new Tablet("#my_tablet",{
              // 默认字体颜色
              defaultColor: "#2e76da",
              // 是否允许选择字体颜色
              selectColor: true,
              /* canvas画布是否响应式,默认为true。当设置为响应式后浏览器大小改变后会重新计算canvas画布的宽高,
              并且之前绘制的内容会被清除掉(canvas的一个特性)*/
              response: true,
              // canvas的宽度,宽度可以传递函数。不传宽度默认为canvas的父元素的宽度
              width: 0,
              // canvas的宽度,高度可以传递函数。不传宽度默认为canvas的父元素的高度
              height: 0,
              // 签名板的额外class
              extraClass: "",
              // 清屏按钮的innerHTML
              clearBtnHtml: "",
              // 保存图片的innerHTML
              saveBtnHtml: "",
              // 工具栏中额外的html(可以实现一些自定义功能)
              otherHtml: $("#temp").html(),
              // tablet初始化后执行的函数(此时canvas上下文并未初始化)
              onInit: function (){
                  var that = this,
                      container = this.container;
                  container.find("select").eq(0).on("change", function (){
                      that.setLineWidth($(this).val());
                  });
                  container.find("select").eq(1).on("change", function (){
                      that.rotate($(this).val());
                  });
                  container.find(".save-canvas-to-img").on("click", function (){
                      that.getBase64();
                  });
                  container.find(".get_blob").on("click", function (){
                      that.getBlob();
                  });
                  /*container.find(".download").on("click", function (){
                      document.getElementById("preview_img").src = that.getBase64();
                  });*/
              },
              // 清除画布前执行的函数,如果该函数返回false,则不会进行清除
              onBeforeClear: function() {},
              // 清除画布后执行的函数
              onClear: function() {}
          });
        </script>
      
  

效果如图:

实例方法

clear

clear()方法用于清空画布。返回值为当前Tablet实例

getBase64

getBase64(type)获取画布的base64数据,拿到的是base64字符串。 type参数为图片类型,可选值有jpg、png,默认png

getBlob

getBlob(type)获取画布的Blob数据(二进制数据),返回的是Blob对象。(内部实现:先获取base64字符串,再转换成Blob对象) type参数为图片类型,可选值有jpg、png,默认png

canvasReset

canvasReset()该方法可以用来重置canvas画布的属性。重置只会重置canvas的lineWidth、strokeStyle、lineCap、lineJoin、shadowBlur、shadowColor属性

rotate

rotate(degree)旋转画布。degree为旋转的角度,可选角度为90、-90、180、-180

setCanvasWH

setCanvasWH(width, height)设置签名板的宽高。如果不传递宽高、或只传递了宽或高则会使用canvas的父容器的宽高。在移动端中签名板的宽高默认为window的宽高,这样做是为了在移动端中更好的进行写字。

注意:手动设置签名板的宽高(或旋转画布)后canvas之前绘制的内容会被清除掉。

setColor

setColor(color)设置canvas画笔的颜色。color为画笔颜色,默认为:#000。它的值可以为css表达颜色的值

setLineWidth

setLineWidth(width)设置canvas画笔的粗细。width为画笔粗细,pc端默认为8,移动端根据屏幕大小自动判断


实例属性

id

该id为当前签名板元素的id,可通过该id获取到当前签名板

$canvas

通过jQuery获取到的当前签名板的canvas元素

canvas

当前签名板的canvas dom元素

ctx

当前签名板的canvas的上下文

point

签名板最后一次绘制时的坐标


演示地址

https://941477276.github.io/Tablet




You can’t perform that action at this time.