保存图片

zhiyangdu
1 parent c0f275b0
Showing 2 changed files with 70 additions and 0 deletions
src/pages/test.vue
src/router/index.js
+<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>
+        <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>
+    import html2canvas from 'html2canvas';
+    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)
+            },
+            gtouchmove () {
+                // 看具体需求
+                // clearTimeout(this.timeOutEvent)
+                // this.timeOutEvent = 0
+            },
+            gtouchend () {
+                clearTimeout(this.timeOutEvent)
+                this.timeOutEvent = 0
+            }
+        }
+    }
+</script>
+<style lang='less' scoped>
+</style>
@@ -37,6 +37,17 @@ const router = new Router({
                     meta: {
                         requireAuth: false
                     }
+                },
+                {
+                    // test
+                    path: "/test",
+                    name: "test",
+                    component: resolve => {
+                        require(["@/pages/test"], resolve);
+                    },
+                    meta: {
+                        requireAuth: false
+                    }
                 }
             ]
         },