vue（uniapp h5）实现二维码海报（基于vue的均适用）

在做项目的时候，遇到一个需求，通过后端返回生成二维码，并将页面变成一整张图片，可以分享给微信好友等功能，当时第一反应怎么可以能呢？除非后端返回图片，前端怎么可以能把页面变成一张图片，但是程序员的思维告诉我大千世界，没有什么不可能的，抱着试一试的心态，我开始了漫长的“百度”征途，终于在各种搜索下，我终于找了一个vue的插件可以完美实现这个需求，简直跪谢各路大佬。
介绍两种生成二维码的方法
QRcode
vue-qr
vue-qr比QRcode功能多在可以在中间加logo

QRcode使用方法

步骤一引入插件：

npm install qrcodejs2 

步骤二在所需页面引用：

import QRCode from 'qrcodejs2'

vue-qr使用方法

npm install vue-qr --save

html2canvas（最重要的一步，将页面转换成图片）

npm install --save html2canvas

import html2canvas from 'html2canvas';

//html2canvas+vue-qr生成海报

      
      

        
        
      
      
      
    

js:

zhuan() {
        let canvas = document.getElementById('qrCode-canvas')
        let poster = document.getElementById('poster')
// 兼容小屏幕的手机  解决一屏显示海报不完整BUG
 window.pageYOffset = 0;
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0

// 因为html是动态加载的，如果你这个时候执行转换操作的时候还没有加载完成，会出现图片少一截的情况,所以加上一个定时器，延时转换成canvas。避免这个问题
        setTimeout(() => {
          html2canvas(poster,{
                        allowTaint: true, //允许跨域，默认false,如果不设置这个，需要后端转base64,不然会生成图片会是一张白的空白图片
                        useCORS: true, // 不知道干嘛的
                        backgroundColor: null // 解决生成的图片有白边
                    }).then(canvas => {
            this.posterDataUrl = canvas.toDataURL()
          });
        }, 1000);
      },

最后一张完美的二维码海报就生成了。（html2canvas文档地址:http://html2canvas.hertzen.com/configuration）

如果有什么不懂得地方，欢迎私信哦，如果觉得文章有用得话，给个小心心吧。

u=3147538946,3847892972&fm=26&gp=0.jpg