2021-05-12 14:32:11
vue使用canvas實現行動端手寫簽名
2020-09-22 15:00:48
基於vue使用canvas實現行動端手寫簽名!
之前自己開發有這麼一個需求,需要實現手寫簽名,然後以圖片的形式儲存生成圖片的base64資料流 。自己在網上找了一堆,都不是很完美。然後參考網上的加自己的優化和修改做了一版。希望有需要的朋友可以拿來直接用。
HTML部分:
<template> <div class="hello" > <div>請輸入您的簽名7:</div> <canvas id="canvas" ref="canvasW" width="373" height="200" style="border:1px solid black" >Canvas畫板</canvas> <img v-bind:src="url" alt=""> <div> <button type="" v-on:click="clear">重寫</button> <button v-on:click="save">儲存簽名</button> </div> </div> </template>
為了節約時間,樣式寫的比較簡單。湊合看吧!
script部分
<script> var draw; var preHandler = function(e){e.preventDefault();} class Draw { constructor(el) { this.el = el this.canvas = document.getElementById(this.el) this.cxt = this.canvas.getContext('2d') this.stage_info = canvas.getBoundingClientRect() this.path = { beginX: 0, beginY: 0, endX: 0, endY: 0 } } init(btn) { var that = this; //初始化生成 this.canvas.addEventListener('touchstart', function(event) { document.addEventListener('touchstart', preHandler, false); that.drawBegin(event) }) this.canvas.addEventListener('touchend', function(event) { document.addEventListener('touchend', preHandler, false); that.drawEnd() }) this.clear(btn) } drawBegin(e) { var that = this; window.getSelection() ? window.getSelection().removeAllRanges() : document.selection.empty() this.cxt.strokeStyle = "#000" this.cxt.beginPath() this.cxt.moveTo( e.changedTouches[0].clientX - this.stage_info.left, e.changedTouches[0].clientY - this.stage_info.top ) this.path.beginX = e.changedTouches[0].clientX - this.stage_info.left this.path.beginY = e.changedTouches[0].clientY - this.stage_info.top canvas.addEventListener("touchmove",function(ev){ ev.preventDefault() that.drawing(event) }) } drawing(e) { this.cxt.lineTo( e.changedTouches[0].clientX - this.stage_info.left, e.changedTouches[0].clientY - this.stage_info.top ) this.path.endX = e.changedTouches[0].clientX - this.stage_info.left this.path.endY = e.changedTouches[0].clientY - this.stage_info.top this.cxt.stroke() } drawEnd() { document.removeEventListener('touchstart', preHandler, false); document.removeEventListener('touchend', preHandler, false); document.removeEventListener('touchmove', preHandler, false); } clear(btn) { this.cxt.clearRect(0, 0, this.stage_info.width, this.stage_info.height) // this.cxt.clearRect(0, 0, 373, 200) } save(){ return canvas.toDataURL("image/png") console.log(canvas.toDataURL("image/png")) } } export default { data () { return { msg: '啦啦啦', val:true, url:"" } }, mounted() { draw=new Draw('canvas'); draw.init(); }, methods:{ clear:function(){ draw.clear(); // 用於點選清除畫布時,同時清除上次儲存的圖片 this.save() }, save:function(){ var data=draw.save(); this.url = data; // 生成圖片的base64資料流 }, mutate(word){ this.$emit("input", word); }, } } </script>
css部分
<style scoped lang="less"> .hello{ height: 100%; width: 100%; background: #ccc; h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } #canvas { background: pink; cursor: default; } #keyword-box { margin: 10px 0; } button{font-size: 0.2rem;color: blue;} }
效果圖:
就到這裡吧!
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援it145.com。
相關文章