长按页面保存证书到相册

zhiyangdu
1 parent 66c5a80e
Showing 1 changed file with 40 additions and 17 deletions
src/pages/test.vue
-// cdn图片有问题  需要换成本地的图片
 <template>
     <div class="index">
-        <div class="canvas" ref="canvas">
-            <div class="avatar">
-                <img :src="imgUrl" alt="">
-            </div>
-            <div>
-                {{textInfo}}
-            </div>
+        <div id="captureId" class="capture" v-show="firstFlag">
+            <div class="back"></div>
+            <h2>{{this.textInfo}}</h2>
         </div>
-        <div class="save_btn" @click="savecanvas">
-            保存图片
+        <img :src="dataURL" alt="" v-show="!firstFlag">
+        <div v-show="this.isCNLive.value" class="save_btn" @click="savecanvas">
+            点击按钮保存图片
+        </div>
+        <div v-show="!this.isCNLive.value" class="tip_text" >
+            长按页面保存证书到手机相册
         </div>
     </div>
 </template>
@@ -19,11 +18,19 @@
     export default {
         data () {
             return {
+                dataURL:'',
+                firstFlag:true,
                 imgUrl:"https://wjjtest.ys2.cnliveimg.com/shop/img/2019/12/31/5e0b06db22be5.jpg",
-                textInfo:'哈哈哈'
+                textInfo:'杜致阳签名'
             };
         },
+
         mounted(){
+            html2canvas(document.querySelector('#captureId')).then(canvas => {
+                let imgUrl = canvas.toDataURL('image/png');
+                this.dataURL = imgUrl;
+                this.firstFlag = false;
+            })
         },
         methods: {
             // 直接获取图片url传给原生
@@ -50,15 +57,11 @@
                         let r = type.match(/png|jpeg|bmp|gif/)[0];
                         return 'image/' + r;
                     };
-                    imgData = imgData.replace(_fixType(type),'');
+//                    imgData = imgData.replace(_fixType(type),'');
                     let filename = "证书" + '.' + type;
                     if(that.isCNLive.value){
                         that.getimgUrl(imgData)
                     }else {
-                        // 判断在ios内
-//                        if(that.isiPhone.value){
-//                            imgData = imgData.replace("data:;base64,","");
-//                        }
                         that.saveFile(imgData,filename);
                     }
@@ -81,9 +84,9 @@
     .index{
         height: 100%;
         width: 100%;
+        position: relative;
         .canvas{
             height: 100%;
-            height: 100%;
             background: #d5574a;
             padding: 0.5067rem 0.6rem 0;
             box-sizing: border-box;
@@ -99,5 +102,25 @@
             color: #ffffff;
             font-size: 36px;
         }
+        img{
+            width: 100%;
+        }
+        h2{
+            position: absolute;
+            top:20px;
+            right: 50px;
+        }
+        .back{
+            height: 860px;
+            background: url("../../static/img/index/1.jpg") no-repeat center top;
+            background-size: 100%;
+        }
+        .tip_text{
+            height: 100px;
+            line-height: 100px;
+            text-align: center;
+            color: #000;
+            font-size: 36px;
+        }
     }
 </style>