canvas电子签名类，所见即所得，拿走即用！

'use strict';/* signer.js 签名类 iger <macore@163.com> 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;