html5手写签名实现 h5手写签名插件_重置

html5手写签名实现 h5手写签名插件_重置_02

插件描述:Tablet是一个基于canvas的在线签名板!

更新时间:2021-04-28 22:33:31

更新说明:

1、支持回退操作

2、浏览器窗口大小改变自动重绘

3、删除了之前一些不合理的代码

使用方法在index.html中

更新时间:2020-11-02 09:15:21

更新说明:

1、解决了一些bug

2、去除了内置`colpick.js`代码,移除了内置工具栏及按钮,现在的代码功能更单一

3、内置精简版jQuery,没有其他外部依赖,`vue`、`react`、`angular`等单页应用程序也可使用

4、添加`设置背景颜色`、`设置背景图片`功能

Tablet

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

canvas签名板文档

基本使用

画笔粗细

保存图片

正常

顺时针旋转90度

逆时针旋转90度

旋转180度

获取blob对象

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() {}
});

实例方法

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

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

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

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

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

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

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

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

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

实例属性

id

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

$canvas

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

canvas

当前签名板的canvas dom元素

ctx

当前签名板的canvas的上下文

point

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