├── README.md
└── eSignature.vue


/README.md:
--------------------------------------------------------------------------------
 1 | # eSignature
 2 | vue 电子签名 mobile pc
 3 | 
 4 | 
 5 | 最近再做移动端电子签名，Vue+Canvas实现，移动端、PC端均可，也可以从[github下载 ](https://github.com/MiuMiu-S/eSignature)。
 6 | 我在做这个功能的时候参考了 [这个](https://blog.csdn.net/mumu42/article/details/79715511)代码，但是在移动端光标与实际划线有偏移，我在我的代码中修正了这个问题。
 7 | ![](https://upload-images.jianshu.io/upload_images/3888312-4d87673f4527fa27.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 8 | 
 9 | 
10 | 


--------------------------------------------------------------------------------
/eSignature.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |       <section class="signature">
  3 |           <div class="signatureBox">
  4 |               <div class="canvasBox" ref="canvasHW">
  5 |                   <canvas ref="canvasF" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' @mousedown="mouseDown" @mousemove="mouseMove" @mouseup="mouseUp"></canvas>
  6 |                   <div class="btnBox">
  7 |                       <div @click="overwrite">重写</div>
  8 |                       <div @click="commit">提交签名</div>
  9 |                   </div>   
 10 |               </div>
 11 |           </div>
 12 |           <img class="imgCanvas" :src="imgUrl">
 13 |       </section>    
 14 | </template>
 15 | <style scoped>
 16 |   .signatureBox {
 17 |     width: 100%;
 18 |     height: calc(100% - 50px);
 19 |     box-sizing: border-box;
 20 |     overflow: hidden;
 21 |     background: #fff;
 22 |     z-index: 100;
 23 |     display: flex;
 24 |     flex-direction: column;
 25 |   }
 26 |   .canvasBox {
 27 |     box-sizing: border-box;
 28 |     flex: 1;
 29 |   }
 30 |   canvas {
 31 |     border: 1px solid #7d7d7d;
 32 |   }
 33 |   .btnBox {
 34 |     padding: 10px;
 35 |     text-align: center;
 36 |   }
 37 |   .btnBox button:first-of-type {
 38 |     background: transparent;
 39 |     border-radius: 4px;
 40 |     height: 40px;
 41 |     width: 80px;
 42 |     font-size: 14px;
 43 |   }
 44 |   .btnBox button:last-of-type {
 45 |     background: #71b900;
 46 |     color: #fff;
 47 |     border-radius: 4px;
 48 |     height: 40px;
 49 |     width: 80px;
 50 |     font-size: 14px;
 51 |   }
 52 | </style>
 53 | <script>
 54 |   export default {
 55 |     data() {
 56 |       return {
 57 |         imgUrl:'',
 58 |         client: {},
 59 |         points: [],
 60 |         canvasTxt: null,
 61 |         startX: 0,
 62 |         startY: 0,
 63 |         moveY: 0,
 64 |         moveX: 0,
 65 |         endY: 0,
 66 |         endX: 0,
 67 |         w: null,
 68 |         h: null,
 69 |         isDown: false,
 70 |         isViewAutograph: this.$route.query.isViews > 0,
 71 |         contractSuccess: this.$route.query.contractSuccess
 72 |       }
 73 |     },
 74 |     mounted() {
 75 |       let canvas = this.$refs.canvasF
 76 |       canvas.height = this.$refs.canvasHW.offsetHeight - 500
 77 |       canvas.width = this.$refs.canvasHW.offsetWidth - 50
 78 |       this.canvasTxt = canvas.getContext('2d')
 79 |     },
 80 |     methods: {
 81 |       //mobile
 82 |       touchStart(ev) {
 83 |         ev = ev || event
 84 |         ev.preventDefault()
 85 |         if (ev.touches.length == 1) {
 86 |           let obj = {
 87 |             x: ev.targetTouches[0].clienX,
 88 |             y: ev.targetTouches[0].clientY - 50
 89 |           }
 90 |           this.startX = obj.x
 91 |           this.startY = obj.y
 92 |           this.canvasTxt.beginPath()
 93 |           this.canvasTxt.moveTo(this.startX, this.startY)
 94 |           this.canvasTxt.lineTo(obj.x, obj.y)
 95 |           this.canvasTxt.stroke()
 96 |           this.canvasTxt.closePath()
 97 |           this.points.push(obj)
 98 |         }
 99 |       },
100 |       touchMove(ev) {
101 |         ev = ev || event
102 |         ev.preventDefault()
103 |         if (ev.touches.length == 1) {
104 |           let obj = {
105 |             x: ev.targetTouches[0].clientX-30,
106 |             y: ev.targetTouches[0].clientY - 60
107 |           }
108 |           this.moveY = obj.y
109 |           this.moveX = obj.x
110 |           this.canvasTxt.beginPath()
111 |           this.canvasTxt.moveTo(this.startX, this.startY)
112 |           this.canvasTxt.lineTo(obj.x, obj.y)
113 |           this.canvasTxt.stroke()
114 |           this.canvasTxt.closePath()
115 |           this.startY = obj.y
116 |           this.startX = obj.x
117 |           this.points.push(obj)
118 |         }
119 |       },
120 |       touchEnd(ev) {
121 |         ev = ev || event
122 |         ev.preventDefault()
123 |         if (ev.touches.length == 1) {
124 |           let obj = {
125 |             x: ev.targetTouches[0].clientX-30,
126 |             y: ev.targetTouches[0].clientY - 60
127 |           }
128 |           this.canvasTxt.beginPath()
129 |           this.canvasTxt.moveTo(this.startX, this.startY)
130 |           this.canvasTxt.lineTo(obj.x, obj.y)
131 |           this.canvasTxt.stroke()
132 |           this.canvasTxt.closePath()
133 |           this.points.push(obj)
134 |         }
135 |       },
136 |       //pc
137 |       mouseDown(ev) {
138 |         ev = ev || event
139 |         ev.preventDefault()
140 |         console.log(ev)
141 |         if (1) {
142 |           let obj = {
143 |             x: ev.offsetX,
144 |             y: ev.offsetY
145 |           }
146 |           console.log(obj)
147 |           this.startX = obj.x
148 |           this.startY = obj.y
149 |           this.canvasTxt.beginPath()
150 |           this.canvasTxt.moveTo(this.startX, this.startY)
151 |           this.canvasTxt.lineTo(obj.x, obj.y)
152 |           this.canvasTxt.stroke()
153 |           this.canvasTxt.closePath()
154 |           this.points.push(obj)
155 |           this.isDown = true
156 |         }
157 |       },
158 |       mouseMove(ev) {
159 |         ev = ev || event
160 |         ev.preventDefault()
161 |         if (this.isDown) {
162 |           let obj = {
163 |             x: ev.offsetX,
164 |             y: ev.offsetY
165 |           }
166 |           this.moveY = obj.y
167 |           this.moveX = obj.x
168 |           this.canvasTxt.beginPath()
169 |           this.canvasTxt.moveTo(this.startX, this.startY)
170 |           this.canvasTxt.lineTo(obj.x, obj.y)
171 |           this.canvasTxt.stroke()
172 |           this.canvasTxt.closePath()
173 |           this.startY = obj.y
174 |           this.startX = obj.x
175 |           this.points.push(obj)
176 |         }
177 |       },
178 |       mouseUp(ev) {
179 |         ev = ev || event
180 |         ev.preventDefault()
181 |         if (1) {
182 |           let obj = {
183 |             x: ev.offsetX,
184 |             y: ev.offsetY
185 |           }
186 |           this.canvasTxt.beginPath()
187 |           this.canvasTxt.moveTo(this.startX, this.startY)
188 |           this.canvasTxt.lineTo(obj.x, obj.y)
189 |           this.canvasTxt.stroke()
190 |           this.canvasTxt.closePath()
191 |           this.points.push(obj)
192 |           this.points.push({x: -1, y: -1})
193 |           this.isDown = false
194 |         }
195 |       },
196 |       //重写
197 |       overwrite() {
198 |         this.canvasTxt.clearRect(0, 0, this.$refs.canvasF.width, this.$refs.canvasF.height)
199 |         this.points = []
200 |       },
201 |       //提交签名
202 |       commit() {
203 |         this.imgUrl=this.$refs.canvasF.toDataURL();
204 |         console.log(this.$refs.canvasF.toDataURL()) //签名img回传后台
205 |       }
206 |     }
207 |   }
208 | </script>
209 | 
210 | 
211 | 


--------------------------------------------------------------------------------