indesign怎么保存链接的图片-前端Vue H5生成带有二维码的分享海报，长按可以保存到手机相册

前端Vue H5生成带有二维码的分享海报，长按可以保存到手机相册

前言：H5中分享海报的需求是经常遇到的。 通常是共享二维码+共享文案生成图片供用户长按手机保存到手机，然后将保存的图片发送到手机。 对于其他人，扫码进入分享页面，从而达到佣金和引流的目的。

目标海报：

实现思路步骤：

a：生成二维码；

b：图片生成；

c：用户可以长按而不影响查看和分享效果（即当分享的海报较长时，可以滚动查看）。

根据以上步骤：

1.使用qrcodejs2生成二维码；

安装：

npm install qrcodejs2 --save 

使用：

import QRCode from 'qrcodejs2'
// 生成二维码方法
            qrcode(url) {
                let myurl = this.projectUrl +'/#'+ url;
                let qrcode = new QRCode('qrcode', {
                    width: $("#qrcode")[0].clientWidth,
                    height:$("#qrcode")[0].clientHeight,
                    text: myurl, // 二维码地址
                });
            },

其中indesign怎么保存链接的图片，projectUrl为项目地址，url为页面路径地址（即扫码打开的目标页面indesign怎么保存链接的图片卡通形象，也就是你扫码后想让别人进入的页面）； #qrcode为二维码显示的父元素id

2、使用html2canvas生成图片（通过截图的方式）

安装：

npm install html2canvas --save 

使用：

海报html结构：

<div class="container_box" v-if="showShare" >
 <img class="close_img" src="../../assets/image/close-size.png" alt="" @click="hideShare()">
 <div class="share_box" style="background:#C41D1D;">
     <div style="background:#C41D1D;height:10rem;overflow:auto;">
         <div id="shareImg">
             <div class="offer_msg">
                 <div class="left">
                     <img src="../../assets/image/bjd_logo@2x.png" alt="">
                     <p>报价日期：{{new_date}}</p>
                     <p>报价单号：{{orderDetail.proNumber}}</p>
                 </div>
                 <img class="right_img" src="../../assets/image/bjd_word@2x.png" alt="">
             </div>
             <div class="msg_container">
                     <div class="goods_msg">
                         <div class="total_msg">
                             <div class="left">
                                 <p class="p">分享人：{{userInfo.nickname}}</p>
                                 <p class="p">产品名称：{{orderDetail.name}}</p>
                                 <p class="p_money">总价(RMB)：<span>￥{{orderDetail.price}}</span></p>
                             </div>
                             <div class="right" id="qrcode"></div>
                         </div>
                         <div class="goods_list">
                             <div class="title">商品明细:</div>
                             <div class="goods-item" v-for="(items,i) in shareGoodsImg" :key="i">
                                 <div class="msg-img">
                                     <img :src="items.goods_img" crossorigin="anonymous"  alt=""  class="details_commodity_img">
                                 </div>
                                 <div class="msg-right">
                                     <div class="goods-money">
                                         <p class="goods_title">{{items.goods_name|filterText}}</p>
                                         <div class="goods-moneyR">
                                             <p class="money">¥{{items.price}}</p>
                                             <p class="num">x{{items.num}}</p>
                                         </div>
                                     </div>
                                     <p class="specText">{{items.specs_name}}</p>
                                 </div>
                             </div>
                         </div>
                     </div>
                     
             </div>
     </div>
     </div>
     
    
    
    <img :src="img" alt="" class="fixed-img">
 </div>

import html2canvas from 'html2canvas';
// 生成海报方法
drawImage(){
    this.$Loading("加载中")
    var that = this;
    var node = document.getElementById("shareImg");
    console.log(node)
    console.log($("#shareImg"))
    html2canvas(node, {
        allowTaint: true,
        useCORS: true,
        logging:true,
        taintTest: false,
        scale: 6,
        width: $("#shareImg")[0].clientWidth,
        height:$("#shareImg")[0].clientHeight,
    }).then(function(canvas) {
        $(".fixed-img").css("display","block")
        that.img  = canvas.toDataURL("image/png")
        that.$Loading().clear();
        that.$NotifySuccess("图片已生成，长按可保存到相册")
    }).catch(function(error){
        console.log(error)
    });
},

3、如果不影响观看的话，其实生成的海报会通过定位+透明度直接悬浮在正常弹框上方，这样就不会影响滚动下方的海报弹框了吉祥物设计，还可以确保长按保存。