FED实验室 - 专注WEB端开发和用户体验

Canvas实现电子在线签名

JAVASCRIPT 煦涵 2965℃ 0评论

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

一、插件剖析

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

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

二、浏览器支持

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

    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端,建议控制画布大小.

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持or喜欢 (2)or分享 (0)
捐赠共勉
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址