'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;