移动端，h5签名功能---Signature Pad + blueimp-canvas-to-blob

Signature Pad

解决移动端，web端canvas兼容问题。
git机票: Signature Pad.

blueimp-canvas-to-blob

解决canvas（base64）图片转化为二进制流在移动端各种机型上的兼容问题。
git机票: blueimp-canvas-to-blob.

项目场景：

移动端，web端口，canvas画布，签名功能，文件上传-图片文件（base64转化二进制文件流）

问题描述：

1.手写canvas移动端兼容问题 ; 滚动条导致画布绘制错位

2.canvas中toDataUR方法拿到的base64画布图片地址转化为二进制流上传文件服务器过程中，在移动端（比如iphone7,iphone7p,手机自带浏览器等，cmd标注支持11+，实际操作中仍出现兼容问题，formData的API—现代与非现代浏览器支持问题）各种机型上的兼容问题

使用步骤：

Signature Pad

1.npm安装

npm install --save signature_pad

2.引入

import SignaturePad from 'signature_pad';

3.html

<canvas class="canvasId"/>

4.js初始化

init() {
      let canvas = document.querySelector('.canvasId');
      this.signaturePad = new SignaturePad(canvas,this.config);
    },

5.相关api

// 使用canvas的toDataURL方法返回一个包含图片展示的 data URI（默认保存为png格式）
signaturePad.toDataURL();
signaturePad.toDataURL("image/jpeg"); 
signaturePad.toDataURL("image/svg+xml"); 

// Draws signature image from data URL.
// NOTE: This method does not populate internal data structure that represents drawn signature. Thus, after using #fromDataURL, #toData won't work properly.
signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...");

// Returns signature image as an array of point groups
const data = signaturePad.toData();

// Draws signature image from an array of point groups
signaturePad.fromData(data);

// 清除画布内容
signaturePad.clear();

// 判断画布有没有内容（fasle / true）
signaturePad.isEmpty();

// 解除所有事件处理程序的绑定
signaturePad.off();

// 重新绑定所有事件处理程序
signaturePad.on();

JavaScript-Canvas-to-Blob

1.npm安装

npm install blueimp-canvas-to-blob

2.引入

const dataURLtoBlob = require('blueimp-canvas-to-blob')

3.API

var b64 = 'R0lGODdhAwACAPEAAAAAAP///yZFySZFySH5BAEAAAIALAAAAAADAAIAAAIDRAJZADs='
var url = 'data:image/gif;base64,' + b64
var blob = dataURLtoBlob(url)

4.项目使用

const data = this.signaturePad.toDataURL()
const newblob = dataURLtoBlob(data)
const formData = new FormData()
// 在fromData中添加Blob类型的内容
formData.append('file', newblob, 'sign.png')
//发送请求...

总结

同事使用signaturePad遇到的问题记录一下：

// 使用canvas的toDataURL方法返回一个包含图片展示的 data URI（默认保存为png格式）
signaturePad.toDataURL();
signaturePad.toDataURL(“image/jpeg”);
signaturePad.toDataURL(“image/svg+xml”);
此处他将保存的格式设置为
signaturePad.toDataURL(“image/jpeg”);
返回的base64图片格式为jpeg,此时将图片展示出来是纯黑色的背景（jpeg不支持透明）
所以最好是默认保存格式为png（支持透明）,方便后期上传后做其他操作