生成带有二维码的海报

在做h5时常会遇到这样一个需求，生成一个带有二维码的海报，可以实现分享好友助力。 首先我们需要分析页面，一张海报包括用户名，头像，分享的二维码以及其他背景图片。

其他的都比较简单。相对来说生成二维码和海报有难点。 生成二维码可以使用qrcodejs2插件实现。

var qrcode = new QRCode(this.$refs.qrCodeUrl, {

        text: url,

        width: '60

        height: '60',

        colorDark: '#000000',

        colorLight: '#ffffff',

        correctLevel: QRCode.CorrectLevel.H

      })

①注意的是移动端涉及到适配的问题，因此建议这里的width和height使用具体数值。

②有时生成的二维码无法识别，有可能是链接太长，而二维码太小，导致二维码太密集，无法识别，你可以调节二维码的大小，或者适当的压缩链接

生成海报我们可以使用html2canvas插件，这里附上它的官网，一些配置可以自行去官网查看（html2canvas.hertzen.com/documentati…

// 生成海报

//防止页面因为滚动导致生成的海报不全

      window.pageYOffset = 0

      document.documentElement.scrollTop = 0

      document.body.scrollTop = 0

      const vm = this

      const domObj = vm.$refs.poster_box

      html2canvas(domObj, {

        useCORS: true, //开启跨域配置

        allowTaint: false, //允许跨域（图片跨域相关）

        logging: false,

        letterRendering: true,

        dpi: window.devicePixelRatio

      }).then(function(canvas) {

        // 在微信里,可长按保存或转发

        vm.posterImg = canvas.toDataURL('image/png') //转换base64的图片格式

        console.log(vm.posterImg)

//判断图片生成之后才显示生成的图片

        if (vm.posterImg) {

          vm.src = vm.posterImg

          vm.showLoad = false

          vm.showPoster = false

        }

      })

    },

注意： ①h5页面中，点击是保存不了图片的，你可以将一张图片展示在页面上，微信浏览器会自带长按保存图片的功能

②存在生成海报的图片不清晰

问题一：你可能没有开启图片跨域 添加以下代码

useCORS: true, //开启跨域配置
allowTaint: false, //允许跨域（图片跨域相关）

问题二：你是用的背景图片

建议还是直接引入图片

③如果你的页面太长，而海报在底部，可能导致生成的海报不全，这个时候你可以再生成海报的时候添加如下代码，使页面滚动到顶部

      //防止页面因为滚动导致生成的海报不全
      window.pageYOffset = 0

      document.documentElement.scrollTop = 0

      document.body.scrollTop = 0

④生成的海报没有二维码，数据显示不全

问题：二维码还没有生成完毕，就已经生成海报了，可以在生成二维码下添加一个延时器，记得离开页面的时候要销毁定时器，以免过多占用资源

setTimeout(function() {

     //生成海报

      }, 500)

而二维码中往往伴随着用户数据，因此我们需要在完成获取数据后调用生成二维码的方法，但是记得要放在nextTick函数里面

this.$nextTick(() => {

        //生成二维码

        })

其他大佬有补充的请留言。。