|
@@ -52,20 +52,20 @@ class InkSign {
|
|
|
handleMouseMove (e) {
|
|
|
var disX = e.clientX - this.canvas.offsetLeft
|
|
|
var disY = e.clientY - this.canvas.offsetTop
|
|
|
- //移动时设置画线的结束位置。并且显示
|
|
|
- this.ctx.lineTo(disX, disY) //鼠标点下去的位置
|
|
|
- this.ctx.stroke()
|
|
|
- this.path.push([disX, disY])
|
|
|
+ if (!(disX > this.canvasWidth || disY > this.canvasHeight || disX < 0 || disY < 0)) {
|
|
|
+ //移动时设置画线的结束位置。并且显示
|
|
|
+ this.ctx.lineTo(disX, disY) //鼠标点下去的位置
|
|
|
+ this.ctx.stroke()
|
|
|
+ this.path.push([disX, disY])
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
handleMouseUp () {
|
|
|
document.removeEventListener('mousemove', this.onMousemove)
|
|
|
document.removeEventListener('mouseup', this.onMouseup)
|
|
|
- console.log(this.path)
|
|
|
|
|
|
const rect = this.getRect()
|
|
|
this.rect = rect
|
|
|
- console.log(this.rect)
|
|
|
}
|
|
|
|
|
|
clear () {
|
|
@@ -111,7 +111,8 @@ class InkSign {
|
|
|
}
|
|
|
|
|
|
toImage () {
|
|
|
- const dataURL = this.canvas.toDataURL()
|
|
|
+ const finalCanvas = this.paintFinalCanvas()
|
|
|
+ const dataURL = finalCanvas.toDataURL('image/jpeg')
|
|
|
this.dataURL = dataURL
|
|
|
|
|
|
// 创建一个Image元素
|
|
@@ -238,6 +239,23 @@ class InkSign {
|
|
|
this.img.remove()
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ paintFinalCanvas () {
|
|
|
+ let finalCanvas = document.createElement("canvas")
|
|
|
+ let ctx = finalCanvas.getContext('2d')
|
|
|
+
|
|
|
+ finalCanvas.width = this.rect.width
|
|
|
+ finalCanvas.height = this.rect.height
|
|
|
+
|
|
|
+ ctx.fillStyle = 'white'
|
|
|
+ ctx.fillRect(0, 0, finalCanvas.width, finalCanvas.height)
|
|
|
+ ctx.lineWidth = 3;
|
|
|
+ ctx.strokeStyle = 'black';
|
|
|
+
|
|
|
+ ctx.drawImage(this.canvas, this.rect.left, this.rect.top, finalCanvas.width, finalCanvas.height, 0, 0, finalCanvas.width, finalCanvas.height)
|
|
|
+
|
|
|
+ return finalCanvas
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
export { InkSign }
|