Quellcode durchsuchen

fix: 手写签名上传白底图片

wzl vor 1 Jahr
Ursprung
Commit
d11f6ba748

+ 25 - 7
packages/core/src/ink_sign.js

@@ -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 }

+ 2 - 2
packages/webview/src/components/AnnotationContainer/AnnotationHeader.vue

@@ -2,7 +2,7 @@
   <div class="annotation-header">
     <h2>Annotations</h2>
     <div class="annotation-header-buttons">
-      <Button
+      <!-- <Button
         className="button-icon"
         img="icon-export"
         :onClick="onImport"
@@ -15,7 +15,7 @@
         :onClick="onExport"
         title="Export"
         :disabled="!annotations || annotations.annotationsCount === 0"
-      ><Import /></Button>
+      ><Import /></Button> -->
       <!-- <Button
         className="button-icon"
         img="icon-delete"