canvas签名
<template> <div class="share" style="background:#fff"> <div class="zk-title"> 请工整的书写 <span style="color:#06F;">独孤求败</span> 的签字 </div> <!-- <div style="width:100px;height:100px"><img src="" width="40px" height="40px" id="test"/>88</div> --> <div class="canvasBox" ref="canvasHW"> <canvas @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' @mousedown="mouseDown" @mousemove="mouseMove" @mouseup="mouseUp" ref="canvasF"> </canvas> </div> <div class="btnBox"> <button class="clear" @click="overwrite">清除</button> <button class="confirm" @click="commit">确认</button> <button class="cancel" @click="cancel">取消</button> </div> </div> </template> <script> export default { name: 'signature', data () { return { points: [], startX: 0, startY: 0, moveY: 0, moveX: 0, endY: 0, endX: 0, w: null, h: null, imgData: '', isDown: false, canvasBoard: null, canvasContext: null } }, mounted () { this.canvasBoard = this.$refs.canvasF; this.canvasBoard.height = this.$refs.canvasHW.offsetHeight; this.canvasBoard.width = this.$refs.canvasHW.offsetWidth; var ctx = this.canvasBoard.getContext('2d'); this.canvasContext = ctx; ctx.lineWidth=3; ctx.font = "Arial"; }, methods: { back(){ }, // Computer event -- Mouse down mouseDown (ev) { ev = ev || event ev.preventDefault() console.log(ev) let obj = { x: ev.offsetX, y: ev.offsetY } console.log(obj) this.startX = obj.x this.startY = obj.y this.canvasContext.beginPath() this.canvasContext.moveTo(this.startX, this.startY) this.canvasContext.lineTo(obj.x, obj.y) this.canvasContext.stroke() this.canvasContext.closePath() this.points.push(obj) this.isDown = true }, // Mobile event -- Touch start touchStart (ev) { ev = ev || event ev.preventDefault() if (ev.touches.length === 1) { let obj = { x: ev.targetTouches[0].clientX, y: ev.targetTouches[0].clientY - 0//0为y轴的偏移量 } this.startX = obj.x this.startY = obj.y this.canvasContext.beginPath() this.canvasContext.moveTo(this.startX, this.startY) this.canvasContext.lineTo(obj.x, obj.y) this.canvasContext.stroke() this.canvasContext.closePath() this.points.push(obj) } }, // Mobile -- Mouse move mouseMove (ev) { ev = ev || event ev.preventDefault() if (this.isDown) { let obj = { x: ev.offsetX, y: ev.offsetY } this.moveY = obj.y this.moveX = obj.x this.canvasContext.beginPath() this.canvasContext.moveTo(this.startX, this.startY) this.canvasContext.lineTo(obj.x, obj.y) this.canvasContext.stroke() this.canvasContext.closePath() this.startY = obj.y this.startX = obj.x this.points.push(obj) } }, // Mobile event -- Touch move touchMove (ev) { ev = ev || event ev.preventDefault() if (ev.touches.length === 1) { let obj = { x: ev.targetTouches[0].clientX, y: ev.targetTouches[0].clientY - 0 } this.moveY = obj.y this.moveX = obj.x this.canvasContext.beginPath() this.canvasContext.moveTo(this.startX, this.startY) this.canvasContext.lineTo(obj.x, obj.y) this.canvasContext.stroke() this.canvasContext.closePath() this.startY = obj.y this.startX = obj.x this.points.push(obj) } }, // Computer event -- Mouse up mouseUp (ev) { ev = ev || event ev.preventDefault() let obj = { x: ev.offsetX, y: ev.offsetY } this.canvasContext.beginPath() this.canvasContext.moveTo(this.startX, this.startY) this.canvasContext.lineTo(obj.x, obj.y) this.canvasContext.stroke() this.canvasContext.closePath() this.points.push(obj) this.points.push({x: -1, y: -1}) this.isDown = false }, // Mobile event TouchEnd touchEnd (ev) { ev = ev || event ev.preventDefault() console.log(ev) if (ev.touches.length === 1) { let obj = { x: ev.targetTouches[0].clientX, y: ev.targetTouches[0].clientY - 0 } this.canvasContext.beginPath() this.canvasContext.moveTo(this.startX, this.startY) this.canvasContext.lineTo(obj.x, obj.y) this.canvasContext.stroke() this.canvasContext.closePath() this.points.push(obj) this.points.push({x: -1, y: -1}) } }, // Over write overwrite () { // this.canvasBoard.height // this.canvasBoard.width this.canvasContext.clearRect(0, 0, this.$refs.canvasF.width, this.$refs.canvasF.height); this.points = []; }, // Commit commit () { // this.$refs.mySignature.src = this.$refs.canvasF.toDataURL('image/png') //this.$store.state.currentSignatureData = this.$refs.canvasF.toDataURL('image/png'); var imgdata = this.$refs.canvasF.toDataURL('image/png'); // var vertical = true; // var imgdata = signaturePad.toDataURL(); // base64 //alert(Vertical); // this.upload(imgdata, Vertical); // 当Vertical为true的时候,后台需要转90度; // 当Vertical为false的时候,后台不需要转; document.getElementById('test').src=imgdata; this.$router.back(); }, upload(imgdata, vertical) { // $("#clearButton,#backBtn,#subBtn").hide(); //alert("v:"+vertical); $.ajax({ type : 'POST', dataType : 'json', url : $("#url").val(), data : { media : imgdata, v : vertical, res_code:$("#resCode").val(), clientId:$("#clientId").val() }, success : function(data) { if (data['error'] != null) { alert(data['error']); $("#clearButton,#backBtn,#subBtn").show(); $("#msg").hide(); } else { if (data.url!=null) location.href = data.url; else { $("#msg").hide(); alert("签署成功"); } } }, error : function() { alert("错误:" + error); $("#clearButton,#backBtn,#subBtn").show(); $("#msg").hide(); } }); }, cancel(){ this.$router.back(); } } } </script> <style lang="stylus" scoped> .share position absolute top 0 bottom 0 left 0 right 0 z-index 15 background #fff </style> <style scoped> .signatureBox{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; background: #fff; z-index: 100; display: flex; flex-direction: column; } .visaDetailTop p{ margin: 0; text-align: center; color: #000; font-size: 1em; position: relative; } .visaDetailTop p span{ color: #fff; font-size: 1.2em; } .visaDetailTop p:first-of-type{ float: left; } .visaDetailTop p:nth-of-type(2){ float: right; } .canvasBox{ position: absolute; left: 0; top: 0; bottom: 0; right: 0; box-sizing: border-box; flex: 1; font-family: 'Helvetica, Sans-Serif'; font-size: 16px; } .btnBox{ height: 30px; padding: 5px; text-align: right; line-height: 30px; } .btnBox button{ border: 1px solid lightgray; color: #fff; border-radius: 4px; padding: 5px 10px; width: 60px; outline:none; } .zk-title { position: absolute; right: -85px; top: 85px; font-size: 16px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 4px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset; } .btnBox { position: absolute; left: -68px; bottom: 90px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .btnBox .clear{ background: #808080; } .btnBox .confirm{ background: #04BE02; } .btnBox .cancel{ background: #39F; } @media only screen and (min-width: 750px){ .signatureBox{ position: absolute; top: 0; left: 0; width: 100%; min-height: 100%; box-sizing: border-box; overflow: visible; } } </style>