Vue.js结合Canvas制作二维码和图片的合成（qrcanvas + html2canvas）

(这个有问题，最近会把整理后的更新上去！！！！！！)

最新最新！！！：https://blog.csdn.net/zuorishu/article/details/88632978

需求背景：

 分享图片，图片中含有自己分享链接生成的二维码！！

大体思路：

• 第一步、根据自己的分享链接生成一张二维码；
• 第二步、结合一张图片合成带分享二维码的大图；

开干：

首先来生成二维码，之前都是使用jQuery.qrcode这个插件进行二维码生成，使用vuejs后不想依赖jQuery，就重新找了一个

qrcanvas，使用方法上篇博客有提到，这里结合图片再来引用一下。

1.npm安装：npm install qrcanvas

2.页面引入：import { qrcanvas } from 'qrcanvas';

3.html：写一个带id(id自定义)的div

4.js很简单

    created() {
        let that = this;
        that.$nextTick(function () {
           var canvas1 = qrcanvas({
                data: decodeURIComponent(that.$route.query.url), //分享链接（根据需求来）
                size:128 //二维码大小
            });
            document.getElementById("qrcode").innerHTML = '';
            document.getElementById('qrcode').appendChild(canvas1);
       })
    },

到这里二维码也就生成了，下面要实现二维码和图片进行合成，因为需求图片是固定一张，所以不用去处理图片动态改变的逻辑，图片直接就在本地引用了。首先要把图片放到页面上，二维码在图片上的具体位置根据需求自己css处理。html改造：

放完图片以后，接下来就是处理图片合成的问题。这里我用的是 html2canvas 这个插件，将html DOM元素或页面利用canvas画布生成图片。下面说一下用法：

1.npm安装

npm install html2canvas --save

2.页面引入

import html2canvas from 'html2canvas';

3.js很简单

 //that.$refs.box  生成图片的dom元素         
html2canvas(that.$refs.box).then(function(canvas) {
    console.log(canvas) //生成canvas画布
    console.log(canvas.toDataURL()) //将canvas转为base64图片
});

目前发现一个问题：针对微信内置浏览器是不支持base64格式长按的一些操作（因为以下是直接base64展示的）；

解决办发：转成base64以后上传到后台存储到服务器，通过后台返回图片链接展示到页面上。。。

到这里图片就生成了，那么就是展示图片以并可以长按保存，没有做分享处理。接着再改造html

生成新的图片以后页面上生成图片的DOM并没有隐藏掉，自己可以通过css或js处理。

看一下完整代码吧：

刚开始写，大体能用，有不足的地方请多指教！