java实现电子签名技术_电子签名类 js类

'use strict';

/* signer.js 签名类 iger 2019-03-16 18:46:34 */

class Signer {

constructor(id) {

this.canvas = document.getElementById(id);

this.ctx = this.canvas.getContext('2d');

this.width = this.canvas.width;

this.height = this.canvas.height;

}

/**

* 入口函数

*/

run() {

var _this = this;

var canvas = this.canvas;

var ctx = this.ctx;

ctx.fillStyle = '#fff';

ctx.fillRect(0, 0, this.width, this.height);

ctx.lineWidth = 1;

ctx.shadowBlur = 1;

ctx.lineCap = "round";

ctx.lineJoin = 'round';

ctx.save();

canvas.addEventListener('touchstart', function (e) {

_this.touchStart(e);

});

return this;

}

/**

* 手指接触的画布

* @param {事件对象} e

*/

touchStart(e) {

var _this = this;

var canvas = this.canvas;

var ctx = this.ctx;

var e = e || window.event;

var touches = e.touches[0];

var x = touches.clientX-40, y = touches.clientY-(document.documentElement.offsetHeight-272)/2-52;

ctx.beginPath();

ctx.moveTo(x, y);

canvas.addEventListener('touchmove', function(e){

_this.touchMove(e);

});

canvas.addEventListener('touchmend', this.touchEnd);

}

/**

* 触控移动

* @param {事件对象} e

*/

touchMove(e) {

var ctx = this.ctx;

var e = e || window.event;

var touches = e.touches[0];

var x = touches.clientX-40, y = touches.clientY-(document.documentElement.offsetHeight-272)/2-52;

ctx.lineTo(x, y);

ctx.stroke();

}

/**

* 触控移动结束

*/

touchEnd() {

var canvas = this.canvas;

canvas.removeEventListener('touchmove', this.touchMove);

canvas.removeEventListener('touchend', this.touchEnd);

}

/**

* 清空画布

*/

clear() {

this.ctx.fillStyle = '#fff';

this.ctx.clearRect(0, 0, this.width, this.height);

this.ctx.stroke();

}

/**

* 获取png格式图片

* @param {画布对象} canvas

*/

getPNGImage(canvas = this.canvas) {

return canvas.toDataURL('image/png');

}

/**

* 获取jpg格式图片

* @param {画布对象} canvas

*/

getJPGImage(canvas = this.canvas) {

return canvas.toDataURL('image/jpeg', 0.5);

}

/**

* 下载图片

* @param {图片对象} image

*/

downloadPNGImage(image) {

const url = image.replace('image/png', 'image/octet-stream;Content-Disposition:attachment;filename=userfile.png');

window.location.href = url;

}

/**

* 转换图片为bolb格式

* @param {图片对象} dataURL

*/

dataURLtoBlob(dataURL) {

var arr = dataURL.split(','),

mime = arr[0].match(/:(.*?);/)[1],

bstr = atob(arr[1]),

n = bstr.length,

u8arr = new Uint8Array(n);

while (n--) {

u8arr[n] = bstr.charCodeAt(n);

}

return new Blob([u8arr], { type: mime });

}

/**

* 上传图片

* @param {Bolb对象} blob

* @param {上传地址} url

* @param {上传成功回调函数} success

* @param {上传失败回调函数} failure

*/

upload(blob, url, success, failure) {

const xhr = new XMLHttpRequest();

xhr.withCredentials = true;

xhr.open('POST', url, true);

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xhr.send(blob);

xhr.onload = () => {

if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {

success( JSON.parse(xhr.responseText) );

} else {

failure();

}

};

xhr.onerror = (e) => {

failure(e);

};

}

}

export default Signer;