post

src/main/nine-space/src/components/Post.vue

@@ -2,12 +2,13 @@
     <div ref="share">
         <van-overlay :show="show" @click="show = false" z-index="99">
             <div class="wrapper">
-                <div class="img" ref="wrap">
-                    <img :src="img" v-if="img" alt="" />
+                <div class="img" ref="wrap" v-if="img" @click.stop="">
+                    <img :src="img" />
                 </div>
-                <div class="content" v-if="!img" ref="post" @click.stop>
+                <div class="content" v-if="!img" ref="post">
                     <!-- @load="loadImg" -->
-                    <img :src="detailImg" class="detailImg" />
+                    <img crossOrigin="anonymous" :src="banners" class="detailImg" />
+                    <!-- <van-image :src="detailImg" class="detailImg" fit="cover" /> -->
                     <div class="info">
                         <div class="name van-multi-ellipsis--l2">
                             {{ info.name }}
@@ -49,6 +50,7 @@ import html2canvas from 'html2canvas';
 import product from '../mixins/product';
 const path = require('path');
 import resolveUrl from 'resolve-url';
+import axios from 'axios';
 export default {
     mixins: [product],
     props: {
@@ -90,7 +92,7 @@ export default {
             }
         },
         banners() {
-            return this.getImg(this.changeImgs(this.info.pic || []), '', 1500);
+            return this.getImg(this.changeImgs(this.info.pic || []), '', 900);
         }
     },
     components: {
@@ -117,31 +119,33 @@ export default {
                     this.getImgBase64(this.info.minterAvatar, 'userImg');
                     setTimeout(() => {
                         this.loadImg();
-                    }, 100);
+                    }, 1000);
                 });
             }
         },
         loadImg() {
-            setTimeout(() => {
-                html2canvas(this.$refs.post, {
-                    useCORS: true,
-                    allowTaint: true,
-                    backgroundColor: null,
-                    scale: 3
-                }).then(canvas => {
-                    this.$toast.clear();
-                    // this.$refs.wrap.appendChild(canvas);
-                    this.img = canvas.toDataURL('image/png');
-                });
-            }, 100);
+            html2canvas(this.$refs.post, {
+                useCORS: true,
+                allowTaint: true,
+                backgroundColor: null,
+                scale: 3
+            }).then(canvas => {
+                this.$toast.clear();
+                console.log(canvas);
+                // this.$refs.wrap.appendChild(canvas);
+                this.img = canvas.toDataURL('image/png');
+            });
         },
         getImgBase64(img2, key) {
             let img = new Image();
-            img.src = img2;
-            img.setAttribute('crossOrigin', 'anonymous');
-            img.onload = () => {
-                this[key] = this.image2Base64(img);
+            img.crossOrigin = 'anonymous';
+            console.log(img);
+            let _this = this;
+            img.onload = function () {
+                let src = _this.image2Base64(img);
+                _this[key] = src;
             };
+            img.src = img2;
         },
         image2Base64(img) {
             let canvas = document.createElement('canvas');

src/main/nine-space/src/views/product/Detail.vue

@@ -250,6 +250,7 @@ import 'swiper/swiper.min.css';
 import 'swiper/swiper-bundle.min.css';
 
 import SwiperCore, { Pagination } from 'swiper';
+import Post from '../../components/Post.vue';
 
 SwiperCore.use([Pagination]);
 
@@ -261,7 +262,8 @@ export default {
         ProductTitle,
         ProductBanner,
         Swiper,
-        SwiperSlide
+        SwiperSlide,
+        Post
     },
     mixins: [product],
     data() {