分享图片插件

src/components/Detail.vue

@@ -24,7 +24,7 @@
                 </div>
                 </div>
             </div>
             </div>
             <div class="shareBox" v-show="shareOnoff" @click="closeShare">
             <div class="shareBox" v-show="shareOnoff" @click="closeShare">
-                <p>点击右上角“···”进行分享</p>
+                <!-- <ShareImg v-if='shareOnoff'/> -->
             </div>
             </div>
             <div class="shareBox shareBox2" ref="mybox" v-show="shareOnoff2" @click="closeShare">
             <div class="shareBox shareBox2" ref="mybox" v-show="shareOnoff2" @click="closeShare">
                 <img :src="shareCode" class="share-img" alt="" >
                 <img :src="shareCode" class="share-img" alt="" >
@@ -53,9 +53,14 @@ import wx from 'weixin-js-sdk';
 
 
 import api from '@/modules/js/api.js';
 import api from '@/modules/js/api.js';
 
 
+import ShareImg from './ShareImg'
 export default {
 export default {
+    components:{
+        ShareImg
+    },
     data() {
     data() {
         return {
         return {
+            // showShareImg: false,
             shareOnoff: false,
             shareOnoff: false,
             shareOnoff2: false,
             shareOnoff2: false,
             currentId: null,
             currentId: null,
@@ -153,6 +158,9 @@ export default {
         this.pictureInfo = null;
         this.pictureInfo = null;
     },
     },
     methods: {
     methods: {
+        // closeShowShareImg(){
+        //     this.showShareImg = false
+        // },
         getWeixinPower1() {
         getWeixinPower1() {
             var _this = this;
             var _this = this;
             axios
             axios

src/components/ShareImg.vue

+<template>
+<div>
+  <div id="moban1" class="canvas-html">
+    <h1 class="share-title">最美丹寨笑脸摄影大赛</h1>
+    <img
+      class="share-pic"
+      src="https://wanda-h5.bdideal.com/video-test/static/bottom.png"
+    >
+    <div class="f-cb">
+      <h2 class="share-subtitle">《甜蜜的微笑》</h2>
+      <h3 class="share-author">
+        <span>
+          <img
+            src="https://wanda-h5.bdideal.com/video-test/static/bottom.png"
+          >
+        </span>
+        <b>自由的小熊</b>
+      </h3>
+    </div>
+    <div class="share-qrcode">
+      <span class="qrcode" data-qrcode="http://www.baidu.com"></span>
+      <p>
+        长按识别二维码
+        <br>为我点赞
+      </p>
+    </div>
+  </div>
+  <div id="test11" class="canvas-img"></div>
+</div>
+</template>
+
+
+<script>
+export default {
+  mounted() {
+    setTimeout(()=>{
+       window.htmlToBase64({
+        domSourceId: "moban1",
+        domTargetId: "test11"
+      })
+    },0)
+  },
+  methods: {
+    // qrcode() {
+    //   let qrcode = new QRCode("qrcode", {
+    //     width: 132,
+    //     height: 132,
+    //     text: "https://www.baidu.com", // 二维码地址
+    //     colorDark: "#000",
+    //     colorLight: "#fff"
+    //   });
+    // }
+    // cc(){
+    //    window.htmlToBase64({
+    //   domSourceId: "moban1",
+    //   domTargetId: "test1"
+    // })
+    // }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+// out: ../css/style.css, compress: true, sourceMap: true
+.f-cb:after,.f-cbli li:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:'.';}.f-cb,.f-cbli li{zoom:1;}.f-ib{display:inline-block;*display:inline;*zoom:1;}.f-dn{display:none;}.f-db{display:block;}.f-fl{float:left;}.f-fr{float:right;}.f-pr{position:relative;}.f-prz{position:relative;zoom:1;}.f-oh{overflow:hidden;}.f-ff0{font-family:arial;}.f-ff1{font-family:"Microsoft YaHei",arial;}.f-fs1{font-size:12px;}.f-fs2{font-size:14px;}.f-fwn{font-weight:normal;}.f-fwb{font-weight:bold;}.f-tal{text-align:left;}.f-tac{text-align:center;}.f-tar{text-align:right;}.f-taj{text-align:justify;text-justify:inter-ideograph;}.f-vam,.f-vama *{vertical-align:middle;}.f-wsn{word-wrap:normal;white-space:nowrap;}.f-pre{overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;}.f-wwb{white-space:normal;word-wrap:break-word;word-break:break-all;}.f-ti{overflow:hidden;text-indent:-30000px;}.f-ti2{text-indent:2em;}.f-lhn{line-height:normal;}.f-tdu,.f-tdu:hover{text-decoration:underline;}.f-tdn,.f-tdn:hover{text-decoration:none;}.f-toe{overflow:hidden;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;}.f-csp{cursor:pointer;}.f-csd{cursor:default;}.f-csh{cursor:help;}.f-csm{cursor:move;}.f-usn{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}.f-bc{margin-left: auto; margin-right: auto;}.f-db{display:block;}.f-dib{display:inline-block;}.f-dn{display:none;}.f-pr{position: relative;}.f-pa{position: absolute}.f-pf{position: fixed;}.f-lh(@h){height:@h;line-height: @h;}.f-wh(@w){width:@w; height:@w;}.f-fs(@num){font-size:@num}
+.canvas-html { width:7.5rem; .f-bc; padding:0.35rem; box-sizing: border-box; background: #fff; .f-pf; left:0; top:0;
+  .share-title {.f-fs(0.44rem);.f-fwn; margin-bottom: 0.25rem;}
+  .share-pic {width:6.8rem;height:auto; margin-bottom: 0.2rem;}
+  .share-subtitle {.f-fs(0.36rem); .f-fwn; .f-fl; padding:0.1rem 0; width:50%;}
+  .share-author { .f-lh(0.7rem); .f-fr;
+    span {.f-wh(0.7rem); border-radius: 50%; .f-dib; overflow: hidden; vertical-align: middle;
+      img {.f-wh(100%);}
+    }
+    b {.f-dib; .f-lh(0.7rem);vertical-align: middle; .f-fs(0.32rem); margin-left: 0.1rem; .f-fwn;}
+  }
+  .share-qrcode { margin-top: 0.3rem;
+    img {.f-wh(1.04rem); .f-fr;}
+    p{color:#999; margin-right: 0.1rem; .f-fr; .f-tar; .f-fs(0.28rem); margin-top: 0.1rem;}
+  }
+}
+.canvas-img {.f-pf; left:0; top:0; right:0; bottom:0; background: #fff; overflow: auto;
+  img {.f-bc; .f-db; width:100%; height:auto;}
+}
+
+</style>
\ No newline at end of file

src/modules/css/shareImg.css

+html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;font:14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif}header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block}table{border-collapse:collapse;border-spacing:0}caption,th{text-align:left;font-weight:normal}html,body,fieldset,img,iframe,abbr{border:0;-webkit-tap-highlight-color:transparent}i,cite,em,var,address,dfn{font-style:normal}[hidefocus],summary{outline:0}li{list-style:none}h1,h2,h3,h4,h5,h6,small{font-size:100%}sup,sub{font-size:83%}pre,code,kbd,samp{font-family:inherit}q:before,q:after{content:none}textarea{overflow:auto;resize:none}label,summary{cursor:default}a,button{cursor:pointer}h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold}del,ins,u,s,a,a:hover{text-decoration:none}body,textarea,input,button,select,keygen,legend{outline:0;color:#333}body{background:#fff}a,a:hover{color:#333}.f-cb:after,.f-cbli li:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:'.'}.f-cb,.f-cbli li{zoom:1}.f-ib{display:inline-block;*display:inline;*zoom:1}.f-dn{display:none}.f-db{display:block}.f-fl{float:left}.f-fr{float:right}.f-pr{position:relative}.f-prz{position:relative;zoom:1}.f-oh{overflow:hidden}.f-ff0{font-family:arial}.f-ff1{font-family:"Microsoft YaHei",arial}.f-fs1{font-size:12px}.f-fs2{font-size:14px}.f-fwn{font-weight:normal}.f-fwb{font-weight:bold}.f-tal{text-align:left}.f-tac{text-align:center}.f-tar{text-align:right}.f-taj{text-align:justify;text-justify:inter-ideograph}.f-vam,.f-vama *{vertical-align:middle}.f-wsn{word-wrap:normal;white-space:nowrap}.f-pre{overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all}.f-wwb{white-space:normal;word-wrap:break-word;word-break:break-all}.f-ti{overflow:hidden;text-indent:-30000px}.f-ti2{text-indent:2em}.f-lhn{line-height:normal}.f-tdu,.f-tdu:hover{text-decoration:underline}.f-tdn,.f-tdn:hover{text-decoration:none}.f-toe{overflow:hidden;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis}.f-csp{cursor:pointer}.f-csd{cursor:default}.f-csh{cursor:help}.f-csm{cursor:move}.f-usn{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.f-bc{margin-left:auto;margin-right:auto}.f-db{display:block}.f-dib{display:inline-block}.f-dn{display:none}.f-pr{position:relative}.f-pa{position:absolute}.f-pf{position:fixed}.canvas-html{width:7.5rem;margin-left:auto;margin-right:auto;padding:.35rem;box-sizing:border-box;background:#fff;position:fixed;left:0;top:0}.canvas-html .share-title{font-size:.44rem;font-weight:normal;margin-bottom:.25rem}.canvas-html .share-pic{width:6.8rem;height:auto;margin-bottom:.2rem}.canvas-html .share-subtitle{font-size:.36rem;font-weight:normal;float:left;padding:.1rem 0;width:50%}.canvas-html .share-author{height:.7rem;line-height:.7rem;float:right}.canvas-html .share-author span{width:.7rem;height:.7rem;border-radius:50%;display:inline-block;overflow:hidden;vertical-align:middle}.canvas-html .share-author span img{width:100%;height:100%}.canvas-html .share-author b{display:inline-block;height:.7rem;line-height:.7rem;vertical-align:middle;font-size:.32rem;margin-left:.1rem;font-weight:normal}.canvas-html .share-qrcode{margin-top:.3rem}.canvas-html .share-qrcode img{width:1.04rem;height:1.04rem;float:right}.canvas-html .share-qrcode p{color:#999;margin-right:.1rem;float:right;text-align:right;font-size:.28rem;margin-top:.1rem}.canvas-img{position:fixed;left:0;top:0;right:0;bottom:0;background:#fff;overflow:auto}.canvas-img img{margin-left:auto;margin-right:auto;display:block;width:100%;height:auto}/*# sourceMappingURL=./style.css.map */
\ No newline at end of file

src/pages/index/index.html

@@ -5,8 +5,14 @@
   <meta charset="utf-8">
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
   <title>与世童行·直通世界杯篮球嘉年华</title>
   <title>与世童行·直通世界杯篮球嘉年华</title>
+  <link rel="stylesheet" href="https://wanda-h5.bdideal.com/video-test/style.css">
   <script type="text/javascript" src="https://js.tarsocial.com/h5stat-2.1.1.vue.js"></script>
   <script type="text/javascript" src="https://js.tarsocial.com/h5stat-2.1.1.vue.js"></script>
   <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
   <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
+
+  <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
+  <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
+  <script src="https://cdn.bootcss.com/qrcode-generator/1.4.3/qrcode.min.js"></script>
+  <script src="https://wanda-h5.bdideal.com/video-test/shareImg.js"></script>
 </head>
 </head>
 
 
 <body>
 <body>