Merge pull request #49 from langyuxiansheng/dev_v1.1.5

Dev v1.1.5
langyuxiansheng · Apr 26, 2024 · 3ebeb3d · 3ebeb3d
2 parents 762804e + cf88cb0
commit 3ebeb3d
Show file tree

Hide file tree

Showing 15 changed files with 219 additions and 123 deletions.
diff --git a/dist/css/index.63872c4f.css b/dist/css/index.63872c4f.css
diff --git a/dist/css/index.f969f844.css b/dist/css/index.f969f844.css
diff --git a/dist/index.html b/dist/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vue-sign-canvas/favicon.ico><title>vue-sign-canvas</title><link href=/vue-sign-canvas/css/index.f969f844.css rel=preload as=style><link href=/vue-sign-canvas/js/chunk-vendors.f7a902ee.js rel=preload as=script><link href=/vue-sign-canvas/js/index.960553d2.js rel=preload as=script><link href=/vue-sign-canvas/css/index.f969f844.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-sign-canvas doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vue-sign-canvas/js/chunk-vendors.f7a902ee.js></script><script src=/vue-sign-canvas/js/index.960553d2.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vue-sign-canvas/favicon.ico><title>vue-sign-canvas</title><link href=/vue-sign-canvas/css/index.63872c4f.css rel=preload as=style><link href=/vue-sign-canvas/js/chunk-vendors.08004f26.js rel=preload as=script><link href=/vue-sign-canvas/js/index.aabb654c.js rel=preload as=script><link href=/vue-sign-canvas/css/index.63872c4f.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-sign-canvas doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vue-sign-canvas/js/chunk-vendors.08004f26.js></script><script src=/vue-sign-canvas/js/index.aabb654c.js></script></body></html>
diff --git a/dist/js/chunk-vendors.08004f26.js b/dist/js/chunk-vendors.08004f26.js
diff --git a/dist/js/chunk-vendors.f7a902ee.js b/dist/js/chunk-vendors.f7a902ee.js
diff --git a/dist/js/chunk-vendors.f7a902ee.js.map b/dist/js/chunk-vendors.f7a902ee.js.map
diff --git a/dist/js/index.960553d2.js b/dist/js/index.960553d2.js
diff --git a/dist/js/index.960553d2.js.map b/dist/js/index.960553d2.js.map
diff --git a/dist/js/index.aabb654c.js b/dist/js/index.aabb654c.js
diff --git a/examples/App.vue b/examples/App.vue
@@ -1,7 +1,9 @@
 <template>
     <div id="app">
         <h2 class="title">Vue Sign Canvas 电子签名板</h2>
-        <sign-canvas class="sign-canvas" ref="SignCanvas" :options="options" v-model="value"/>
+        <template v-if="show">
+            <sign-canvas class="sign-canvas" ref="SignCanvas" :options="options" v-model="value"/>
+        </template>
         <img v-if="value" class="view-image" :src="value" width="150" height="150">
         <div class="config">
             <ul class="ul-config">
@@ -87,6 +89,7 @@
         <div class="sign-btns">
             <span id="clear" @click="canvasClear()">清空</span>
             <span id="save" @click="saveAsImg()">保存</span>
+            <span id="save" @click="onShowCanvas()">{{ show ? '销毁' : '创建' }}</span>
             <span id="save" @click="downloadSignImg()">下载</span>
             <span id="save" @click="dealImage()">压缩</span>
         </div>
@@ -99,6 +102,7 @@ export default {
     data(){
         return {
             value: null,
+            show: true,
             options:{
                 isFullScreen: false,   ////是否全屏手写 [Boolean] 可选
                 isFullCover: false, //是否全屏模式下覆盖所有的元素 [Boolean]   可选
@@ -110,15 +114,16 @@ export default {
                 canvasWidth: 350, //canvas宽高 [Number] 可选
                 canvasHeight: 370,  //高度  [Number] 可选
                 isShowBorder: true, //是否显示边框 [可选]
-                bgColor: '#fcc', //背景色 [String] 可选
+                // bgColor: 'rgba(251,247,241,.3)', //背景色 [String] 可选值 none 为none 的时候不显示背景 ['#fbf7f1']
                 borderWidth: 1, // 网格线宽度  [Number] 可选
                 borderColor: "#ff787f", //网格颜色  [String] 可选
                 writeWidth: 5, //基础轨迹宽度  [Number] 可选
                 maxWriteWidth: 30, // 写字模式最大线宽  [Number] 可选
                 minWriteWidth: 5, // 写字模式最小线宽  [Number] 可选
-                writeColor: '#101010', // 轨迹颜色  [String] 可选
+                writeColor: '#ff6409', // 轨迹颜色  [String] 可选
                 isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
-                imgType:'png'   //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
+                imgType:'png',   //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
+                quality: 0.4, // 压缩率  [Number] 可选范围[0-1]之间的小数,默认为1不压缩
             }
         }
     },
@@ -137,6 +142,7 @@ export default {
         saveAsImg(){
             const img = this.$refs.SignCanvas.saveAsImg();
             alert(`image 的base64：${img}`);
+            console.log(`保存图片:`,img);
         },
 
         /**
@@ -147,16 +153,27 @@ export default {
         },
 
         /**
-         * 下载dealImage图片
+         * 获取压缩后的图片
          */
         dealImage(){
-            this.$refs.SignCanvas.dealImage();
+           const img = this.$refs.SignCanvas.dealImage();
+           console.log(`获取压缩后的图片:`,img);
         },
 
+        /**
+         * 是否显示画板
+         */
+        onShowCanvas(){
+           this.show = !this.show;
+        }
+
     }
 }
 </script>
 <style lang="less">
+#app{
+    background: #E7EDEB;
+}
 * {
     margin: 0;
     padding: 0;
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vue-sign-canvas/favicon.ico><title>vue-sign-canvas</title><link href=/vue-sign-canvas/css/index.f969f844.css rel=preload as=style><link href=/vue-sign-canvas/js/chunk-vendors.f7a902ee.js rel=preload as=script><link href=/vue-sign-canvas/js/index.960553d2.js rel=preload as=script><link href=/vue-sign-canvas/css/index.f969f844.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-sign-canvas doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vue-sign-canvas/js/chunk-vendors.f7a902ee.js></script><script src=/vue-sign-canvas/js/index.960553d2.js></script></body></html>
		<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vue-sign-canvas/favicon.ico><title>vue-sign-canvas</title><link href=/vue-sign-canvas/css/index.63872c4f.css rel=preload as=style><link href=/vue-sign-canvas/js/chunk-vendors.08004f26.js rel=preload as=script><link href=/vue-sign-canvas/js/index.aabb654c.js rel=preload as=script><link href=/vue-sign-canvas/css/index.63872c4f.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-sign-canvas doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vue-sign-canvas/js/chunk-vendors.08004f26.js></script><script src=/vue-sign-canvas/js/index.aabb654c.js></script></body></html>