前端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, // 二维码地址});},

其中projectUrl,为项目地址，url为页面路径地址（即扫码打开的目标页，就是别人扫码之后，你希望别人进入的页面）；#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，不影响查看的话，其实就是将生成完成的海报，通过定位+透明度的方式，使它浮在正常弹框的正上方，这样既不影响滚动下方的海报弹框，也能保证长按进行保存。

至此，分享海报基本就已经好了！
总结：分享海报的关键点其实就在于html2canvas，生成图片这一步，
1，最容易遇到的问题就是生成出来的图片某些原本的图片（线上图片时）空白，解决办法就是添加html2canvas配置项useCORS: true,允许跨域，另外还需配置远程图片允许跨域，以阿里云的为例，需要登录后台配置图片资源允许跨域，配置不会立马生效，需要等待十分钟左右。
2，如果仍然出现图片存在空白，终极解决办法就是让后端添加一个图片转base64的接口，借助后端转换，将海报中的线上图片替换成转完base64的图片。
3，生成的海报有白边，未铺满，解决办法：检查宽高样式有无问题，一般都是宽高样式的问题。
4，生成的海报模糊不清，解决办法就是添加html2canvas配置项scale: 6,数值越大越清晰，一般3就够用了。
5，重中之重，因为生成海报时，页面进来是先生成二维码，其次再生成海报，结合页面数据接口的时候，一定要注意时序问题，不然可能生成图片的时候二维码还没生成，导致空白！！！，可通过适当添加settimeout来解决，或者在生成完毕二维码之后再调用生成图片的方法。

前端Vue H5生成带二维码的分享海报，实现长按保存到手机相册相关推荐

Vue - H5 生成带二维码和文案的宣传海报（可自定义二维码扫描后的内容、海报背景图、文案文字、宽高间距等）用 HTML 写可 DIY 的海报，做完后转为图片供用户保存和转发下载
前言这种需求常见于内容分享时,需要自动生成海报(图片)供用户保存或截图转发,网上的大部分教程都太乱且有 BUG. 本文将带您从 0-1 一路复制,完成一个兼容性好.健壮.注释详细的示例, 开箱即用, ...
PHP生成带二维码的分享图片
综述项目开发中需求,要求在APP中进行分享的时候可以分享图片,图片由美工进行设计,其上带有二维码,分享给别人可以直接长按图片进行识别.这种方式在分享中用户体验更好,首先图片由美工设计很好看,其次这种 ...
thinkphp生成带二维码的海报
阿里云搞活动,想要抓紧买用thinkphp生成带二维码的海报功能. 准备:公众号二维码图片一张背景图片一张将二维码和背景图片合成的方法,可添加到common/common/function.ph ...
在H5、微信小程序中使用canvas绘制二维码、分享海报
在H5.微信小程序中使用canvas绘制二维码.分享海报文章目录在H5.微信小程序中使用canvas绘制二维码.分享海报前言一.canvas绘制二维码 1.H5中使用canvas 2.微信小程 ...
怎么用python生成带二维码的照片_怎么制作二维码图片-Python 生成个性二维码
一.实验介绍1.1 实验内容本课程通过调用MyQR接口来实现生成个人所需二维码,并可以设置二维码的大小.是否在现有图片的基础上生成.是否生成动态二维码. 1.2 知识点 Python3基础 MyQR ...
js 通过canvas生成带二维码的海报图
前言 h5移动端生成海报图,可长按图片保存或发送给朋友,或长按识别二维码.两种场景:第一种是生成项目分享海报图,通过背景图和地址生成的二维码合成一张海报图:第二种是通过页面生成商品海报图,页面有产品介 ...
jquery.qrcode生成带logo的二维码，同时生成带二维码的好友分享图片（js与canvas实现二维码和图片合成的海报）
首先给大家看一下效果图(纯jQuery前端技术): 提供一下demo 源代码和jquery.qrcode文件下载: https://download.csdn.net/download/qq15577 ...
vue 动态生成下载二维码
菜花记录 vue项目如何动态生成一个下载二维码项目中二维码动态配置好下载链接,现场直接修改配置就可以调试第一步先直接在终端下载vue插件 npm install vue-qriously --sa ...
tp3.2生成带二维码的海报
public function haibaoOld() { $id = I( 'get.id' ); $type = I( 'get.type' ); ...

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

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

前端Vue H5生成带二维码的分享海报，实现长按保存到手机相册相关推荐

最新文章

热门文章