添加图片压缩方法

langyuxiansheng · May 16, 2021 · 762804e · 762804e
1 parent 2f9c465
commit 762804e
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 1 deletion.
diff --git a/examples/App.vue b/examples/App.vue
@@ -88,6 +88,7 @@
             <span id="clear" @click="canvasClear()">清空</span>
             <span id="save" @click="saveAsImg()">保存</span>
             <span id="save" @click="downloadSignImg()">下载</span>
+            <span id="save" @click="dealImage()">压缩</span>
         </div>
     </div>
 </template>
@@ -145,6 +146,13 @@ export default {
             this.$refs.SignCanvas.downloadSignImg();
         },
 
+        /**
+         * 下载dealImage图片
+         */
+        dealImage(){
+            this.$refs.SignCanvas.dealImage();
+        },
+
     }
 }
 </script>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "sign-canvas",
-    "version": "1.1.4",
+    "version": "1.1.6",
     "author": "yxs",
     "description": "一个基于canvas和vue的手写签名板,支持移动端和PC可以直接下载图片和转成base64编码，支持高倍屏高清绘制",
     "main": "lib/sign-canvas.umd.min.js",

diff --git a/packages/SignCanvas/index.vue b/packages/SignCanvas/index.vue
@@ -344,6 +344,41 @@ export default {
                 positionParent = positionParent.offsetParent;
             }
             return realNum;
+        },
+
+        /**
+         * 图片压缩
+         */
+        dealImage()  {
+            //压缩系数0-1之间
+            var quality = 0.6;
+            var canvas = document.createElement('canvas');
+            var ctx = canvas.getContext('2d');
+            var dealWidth = 300;    //目标尺寸
+            var dealHeight = 200;
+            canvas.width = dealWidth;
+            canvas.width = dealHeight;
+
+
+            // if (Math.max(imgWidth, imgHeight) > w) {
+            //     if (imgWidth > imgHeight) {
+            //         canvas.width = w
+            //         canvas.height = w * imgHeight / imgWidth
+            //     } else {
+            //         canvas.height = w
+            //         canvas.width = w * imgWidth / imgHeight
+            //     }
+            // } else {
+            //     canvas.width = imgWidth
+            //     canvas.height = imgHeight
+            //     quality = 0.6
+            // }
+            const c = document.getElementById(this.domId);
+            const dataURL = c.toDataURL('image/png');
+            ctx.clearRect(0, 0, canvas.width, canvas.height)
+            ctx.drawImage(dataURL, 0, 0, canvas.width, canvas.height)
+            var ba = canvas.toDataURL('image/jpeg', quality) //压缩语句
+            console.log(ba);
         }
     }
 };