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

前言：关于H5分享海报的需求，经常会遇到，通常就是一个分享的二维码+分享文案，生成一张图片，供用户在手机上长按保存到手机，然后就可以将保存的图片发给别人，实现扫码进入分享页，从而实现分佣、引流等目的。 目标海报：

实现思路步骤： a：二维码的生成； b：图片的生成； c：用户可长按的同时不影响查看分享效果（即当分享海报较长时，可以滚动查看）。 根据上述思路步骤： 1，使用qrcodejs2生成二维码；

安装：

使用：

其中projectUrl,为项目地址，url为页面路径地址（即扫码打开的目标页，就是别人扫码之后，你希望别人进入的页面）；#qrcode为二维码显示的父级元素id 2,使用html2canvas生成图片（通过截屏的方式） 安装：

使用： 海报html结构：

3，不影响查看的话，其实就是将生成完成的海报，通过定位+透明度的方式，使它浮在正常弹框的正上方，这样既不影响滚动下方的海报弹框，也能保证长按进行保存。

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