前端如何实现活动分享功能

前言

最近遇到了将我们做的活动链接以二维码的形式分享到微信，qq等第三方平台上，通过扫码的形式打开我们的活动的需求。

难点

1.如何将链接转换成二维码 2.有二维码也不行，太单调了，分享出去的不能只是一个二维码，应该还需要有体现当前活动的元素，所以需要生成一个截图，在截图中需要二维码，活动元素等

如何将链接转换成二维码，使用vue-qr

首先在代码中下载vue-qr这个库

    <vue-qr
         :text="browserUrl"
         :margin="0"
         colorDark="#000"
         colorLight="#ffe2c4"
         logoSrc="logoIcon"
     ></vue-qr>

text属性是你需要生成二维码的链接 colorDark属性是实点的颜色 colorLight属性是空白的颜色 logoSrc属性是二维码中间的图片

总结，使用这个库可以解决链接转换二维码的问题

如何将活动生成一个截图，使用html2canvas

 let node = document.getElementById('toastMask');
 html2canvas(node).then(function (canvas) {
     //返回图片的二进制数据
     var dataUrl = canvas.toDataURL('image/jpeg', 1.0);
       _this.dataUrl  = dataUrl
 });