图片下载

zhiyangdu
1 parent b8dc2ecb
Showing 2 changed files with 56 additions and 38 deletions
package.json
src/pages/test.vue
@@ -14,6 +14,7 @@
     "babel-polyfill": "^6.26.0",
     "callapp-lib": "^2.1.8",
     "es6-promise": "^4.2.8",
+    "html2canvas": "^1.0.0-rc.5",
     "jweixin-module": "^1.4.1",
     "mint-ui": "^2.2.13",
     "sha1": "^1.1.1",
+// cdn图片有问题  需要换成本地的图片
 <template>
-    <div class="test">
-        <img @touchstart="gtouchstart()" @touchmove="gtouchmove()" @touchend="gtouchend()" style="width: 100%" src="https://wjj.ys2.cnliveimg.com/769/shop/img/2020/01/06/5e12f2ead41bb.jpg"/>
-        <div id="captureId" class="capture"   v-show="firstFlag">
+    <div class="index">
+        <div class="canvas" ref="canvas">
+            <div class="avatar">
+                <img src="https://wjjtest.ys2.cnliveimg.com/shop/img/2019/12/31/5e0b06db22be5.jpg" alt="">
+            </div>
+        </div>
+        <div class="save_btn" @click="savecanvas">
+            保存图片
         </div>
-        <img :src="dataURL" alt="" v-show="!firstFlag"/>
-        <!--<div  style="width:100%; height: 50px; line-height: 50px; background-color: #000; font-size: 18px;color: #ffffff;text-align: center;">-->
-            <!--&lt;!&ndash;保存图片&ndash;&gt;-->
-        <!--</div>-->
     </div>
 </template>
 <script>
@@ -14,46 +16,61 @@
     export default {
         data () {
             return {
-                dataURL:'https://wjj.ys2.cnliveimg.com/769/shop/img/2020/01/06/5e12f31607200.jpg',
-                firstFlag:true,
-                timeOutEvent:0
             };
         },
         mounted(){
-
         },
         methods: {
-            onimg(){
-                document.documentElement.style.webkitUserSelect='none';
-                document.documentElement.style.webkitTouchCallout='none';
-            },
-            //js
-            gtouchstart () {
-                // 开始触摸
-                this.timeOutEvent = setTimeout(() => {
-                    // 长按3秒
-                    this.timeOutEvent = 0
-                    if(this.isiPhone.value){
-                        window.webkit.messageHandlers.CNDSCheckAllowVisitPhotoAlbumHandler.postMessage({body: {}});
-                    }else {
-                        if (window.obj && window.obj.CNDSCheckAllowVisitPhotoAlbumHandler) {
-                            // 调取相册
-                            window.obj.CNDSCheckAllowVisitPhotoAlbumHandler();
-                        }
-                    }
-                }, 3000)
+            savecanvas(){
+                let canvas = document.querySelector('.canvas');
+                let that = this;
+                html2canvas(canvas,{scale:2,logging:false,useCORS:true}).then(function(canvas) {
+                    let type = 'png';
+                    let imgData = canvas.toDataURL(type);
+                    // 照片格式处理
+                    let _fixType = function(type) {
+                        type = type.toLowerCase().replace(/jpg/i, 'jpeg');
+                        let r = type.match(/png|jpeg|bmp|gif/)[0];
+                        return 'image/' + r;
+                    };
+                    imgData = imgData.replace(_fixType(type),'image/octet-stream');
+                    let filename = "UUSound" + '.' + type;
+                    that.saveFile(imgData,filename);
+                });
             },
-            gtouchmove () {
-                // 看具体需求
-                // clearTimeout(this.timeOutEvent)
-                // this.timeOutEvent = 0
-            },
-            gtouchend () {
-                clearTimeout(this.timeOutEvent)
-                this.timeOutEvent = 0
+            saveFile(data, filename){
+                let save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
+                save_link.href = data;
+                save_link.download = filename;
+
+                let event = document.createEvent('MouseEvents');
+                event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+                save_link.dispatchEvent(event);
             }
         }
     }
 </script>
 <style lang='less' scoped>
+    .index{
+        height: 100%;
+        width: 100%;
+        .canvas{
+            height: 100%;
+            height: 100%;
+            background: #d5574a;
+            padding: 0.5067rem 0.6rem 0;
+            box-sizing: border-box;
+            img{
+                width: 100%;
+            }
+        }
+        .save_btn{
+            height: 50px;
+            background: #333333;
+            line-height: 50px;
+            text-align: center;
+            color: #ffffff;
+            font-size: 0.3733rem;
+        }
+    }
 </style>