本篇基本思路为：通过复制商品的图片（一般是在QQ群或者微信群），然后显示在网页的Canvas里面，再将相对应的网址生成二维码，也在Canvas显示，最终自动合成为一个图片。那么就可以复制到群里面去，图片就带有二维码了。而不用打开图像编辑软件，直接在代码里面生成。
上篇说到Flash江河日下，jQuery同样也是江河日下，技术的发展真是日新月异。在下面这个例程里面，我将使用Vue.js和Canvas制作二维码和商品图片的合成图片。所以，这篇博客可以当做是淘客网站的制作思路，也可以视为Vue.js和Canvas的基础教程。
Vue.js 是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。
如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。
我们首先来进行一个简单二维码生成界面。在以前，我是使用jQuery.qrcode这个插件进行二维码生成的，由于使用了Vue.js以后，我并不想那么依赖jQuery。于是我重新找了QRCanvas
这是一个用纯JavaScript编写的二维码生成器。唯一的要求是浏览器与大多数现代浏览器支持的Canvas才能工作。
在官方的例程里面非常简单：
那么我需要的场景是有一个文本输入框，填入网址以后，点击按钮生成二维码。并且我想结合Vue.js进行使用。
代码如下：
测试通过，运行成功。
那么接下来我们再来新建一个文件，这次我希望在一个文本框里面复制图片，然后将图片放到Canvas里面。
复制图片
粘贴
获得base64数据
生成img
代码其原理就是通过获取图像数据，如果该数据是图片类型的，那么就调用 reader.readAsDataURL 将其图片显示出来。
这个功能就是可以在QQ群、微信群里面，对图片复制，我们粘贴以后就显示在网页里面。然后在结合网址生成二维码，通过代码将其合成在一起。
那么现在核心问题来了，怎么通过代码来合成两个图片呢？
在写代码的中间还是发生了很多问题，例如用base64代码我不知道怎么去获取它的尺寸，只好用#imgdiv让它显示出图片后再得出尺寸，等到合成二维码图片完成以后，我再将其隐藏掉。现在先看一下html代码：
JavaScript的代码：
var vm = new Vue({
el: '#app',
data: {
base64: '',
code2: ''
},
mounted: function () {
var _this = this
this.$refs.input.addEventListener("paste", function (e) {
if (!(e.clipboardData && e.clipboardData.items)) {
return;
}
for (var i = 0; i < e.clipboardData.items.length; i++) {
if (e.clipboardData.items[i].type === 'image/png') {
var pasteFile = e.clipboardData.items[i].getAsFile();
var reader = new FileReader();
reader.readAsDataURL(pasteFile);
reader.onload = function (e) {
_this.base64 = this.result;
}
}
}
});
},
methods: {
addRow: function () {
var _this = this;
if (_this.code2) {
var canvas0 = qrcanvas({
data: _this.code2,
size: 128
});
var image = new Image();
image.src = canvas0.toDataURL("image/png");
var img_all=new Image();
img_all.src=_this.base64;
var nWidth = document.getElementById('imgdiv').naturalWidth;
var nHeight = document.getElementById('imgdiv').naturalHeight;
image.setAttribute("crossOrigin", 'anonymous');
img_all.setAttribute("crossOrigin", 'anonymous');
console.log(nWidth);
console.log(nHeight);
var canvas = document.getElementById("myCanvas");
canvas.width = nWidth;
canvas.height = nHeight;
var ctx = canvas.getContext("2d");
ctx.rect(0,0, nWidth, nHeight);
ctx.fillStyle = "#fff";
ctx.fill();
img_all.addEventListener("load",function(){
ctx.drawImage(img_all, 0, 0, nWidth,nHeight);
},false);
image.addEventListener("load",function(){
ctx.drawImage(image, nWidth-128, nHeight-128,128,128);
imageURL = canvas.toDataURL("image/png");
var img3 = new Image();
document.getElementById('tempDiv').appendChild(img3);
img3.src = imageURL;
canvas.style.display = "none";
document.getElementById('imgdiv').style.display = "none";
},false);
}
},
}
})
其实还是写得很匆忙的，里面是有一些错漏的地方，敬请指教。最终效果如下图：