页面修改

src/components/SignName.vue

@@ -75,7 +75,7 @@
     <div class="signTc" v-show="tcStatus">
       <span @click="tcStatus=false;" class="closeTc">去签字</span>
     </div>
-    <div class="CliSignDiv" style="height:100%;background:#fff;z-index:100">
+    <div class="CliSignDiv" style="height:100%;z-index:100;background:#fff;">
       <div class="CanvasDiv">
         <div class="dash">
           <div id="canvas" style="position:relative;top:0;">
@@ -110,7 +110,7 @@
     data() {
       return {
         tcStatus: false,
-        linewidth: 3, //线条粗细，选填
+        linewidth: 5, //线条粗细，选填
         color: "black", //线条颜色，选填
         background: "#fff", //线条背景，选填
         SignInfo: {},
@@ -209,6 +209,17 @@
         cxt.clearRect(0, 0, canvas.width, canvas.height);
       },
       handelSaveEl() {
+        var imageData = canvas.getContext("2d").getImageData(0, 0, canvas.width, canvas.height);
+        for (var i = 0; i < imageData.data.length; i += 4) {
+          // 当该像素是白色的，则设置成透明
+          if (imageData.data[i] == 255) {
+            imageData.data[i] = 0;
+            imageData.data[i + 1] = 0;
+            imageData.data[i + 2] = 0;
+            imageData.data[i + 3] = 0;
+          }
+        }
+        canvas.getContext("2d").putImageData(imageData, 0, 0);
         let imgBase64 = canvas.toDataURL();
         this.SignInfo.companySignature = imgBase64;
         this.SaveMsg();