在最近的项目中,涉及到线上图片签名的需求,调研后找到一款开源的签名插件:signature_pad,该插件主要实现原理还是依赖canvas技术,适配AMD/COMMONJS模块化规范.

一、插件剖析

通观源码,该插件除了canvas相关接口外,主要就是曲线的绘制,曲线的绘制当然也是采用的canvas的曲线绘制,但是形成相关字体型曲线需要一些精细的计算,以防画笔偏移过大,无法控制笔速等问题.下面是默认配置参数,具体可参见Github.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var self = this,
opts = options || {};

this.velocityFilterWeight = opts.velocityFilterWeight || 0.7;
this.minWidth = opts.minWidth || 0.5;
this.maxWidth = opts.maxWidth || 2.5;
this.dotSize = opts.dotSize || function () {
    return (this.minWidth + this.maxWidth) / 2;
};
this.penColor = opts.penColor || "black";
this.backgroundColor = opts.backgroundColor || "rgba(0,0,0,0)";
this.onEnd = opts.onEnd;
this.onBegin = opts.onBegin;

this._canvas = canvas;
this._ctx = canvas.getContext("2d");
this.clear();

二、浏览器支持

从源码中绑定的事件来看支持情况:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
SignaturePad.prototype._handleMouseEvents = function () {
    this._mouseButtonDown = false;

    this._canvas.addEventListener("mousedown", this._handleMouseDown);
    this._canvas.addEventListener("mousemove", this._handleMouseMove);
    document.addEventListener("mouseup", this._handleMouseUp);
};

SignaturePad.prototype._handleTouchEvents = function () {
    // Pass touch events to canvas element on mobile IE.
    this._canvas.style.msTouchAction = 'none';

    this._canvas.addEventListener("touchstart", this._handleTouchStart);
    this._canvas.addEventListener("touchmove", this._handleTouchMove);
    document.addEventListener("touchend", this._handleTouchEnd);
};

该插件适配浏览器为桌面端现代浏览器/移动端浏览器,不支持canvas的浏览器无法使用.

三、遇到问题

  1. new Signature前,需设置canvas的width and height，不然设置的backgroundColor不会生效.
  2. 在移动端base64位压缩时，当设置的图片压缩尺寸过大时，会出现使用drawImage不能生成有效base64，建议控制图片尺寸750px左右；在PC端,建议控制画布大小.

转载申请

本作品采用知识共享署名 4.0 国际许可协议进行许可，转载时请注明原文链接，文章内图片请保留全部内容。