本篇基本思路为：通过复制商品的图片（一般是在QQ群或者微信群），然后显示在网页的Canvas里面，再将相对应的网址生成二维码，也在Canvas显示，最终自动合成为一个图片。那么就可以复制到群里面去，图片就带有二维码了。而不用打开图像编辑软件，直接在代码里面生成。
vue.js官方DEMO：
<div id="qrcode"></div>
<script src="https://unpkg.com/qrcanvas"></script>
<!-- A slim version is not bundled with any effects. -->
<script src="https://unpkg.com/qrcanvas/dist/qrcanvas.slim.js"></script>
<script type="text/javascript">
var canvas = qrcanvas({
data: 'hello, world'
});
document.getElementById('qrcode').appendChild(canvas);
</script>
那么我需要的场景是有一个文本输入框，填入网址以后，点击按钮生成二维码。并且我想结合Vue.js进行使用。
代码如下：
<body>
<div id="qrcode"></div>
<div id="app1">
<input type="text" class="form-control" placeholder="请输入网址" id="code" v-model="code2">
<a href="#" @click="addRow()" class="btn btn-primary">二维码</a>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/qrcanvas/dist/qrcanvas.slim.js"></script>
<script>
var app8 = new Vue({
el: "#app1",
data: {
code2: ''
},
methods: {
addRow: function (name) {
var _this = this;
if (_this.code2) {
var canvas1 = qrcanvas({
data: _this.code2,
size: 128
});
document.getElementById("qrcode").innerHTML = '';
document.getElementById('qrcode').appendChild(canvas1);
}
},
}
})
</script>
</body>
测试通过，运行成功。
那么接下来我们再来新建一个文件，这次我希望在一个文本框里面复制图片，然后将图片放到Canvas里面。
<body>
<div class="container" id="app">
<h1>复制图片</h1>
<div class="input-group ma-b-10">
<span class="input-group-addon" id="basic-addon3">粘贴</span>
<input ref="input" type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="card ma-b-10">
<div class="card-body">
<h4 class="card-title">
获得<code>base64数据</code>
</h4>
<textarea
v-if="base64"
class="form-control"
id="base64"
rows="3"
v-model="base64">
</textarea>
</div>
</div>
<div class="card ma-b-10">
<div class="card-body">
<h4 class="card-title">
生成<code>img</code>
</h4>
</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
base64: ''
},
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;
}
}
}
});
}
})
</script>
</body>
代码其原理就是通过获取图像数据，如果该数据是图片类型的，那么就调用reader.readAsDataURL将其图片显示出来。
这个功能就是可以在QQ群、微信群里面，对图片复制，我们粘贴以后就显示在网页里面。然后在结合网址生成二维码，通过代码将其合成在一起。
那么现在核心问题来了，怎么通过代码来合成两个图片呢？
在写代码的中间还是发生了很多问题，例如用base64代码我不知道怎么去获取它的尺寸，只好用#imgdiv让它显示出图片后再得出尺寸，等到合成二维码图片完成以后，我再将其隐藏掉。现在先看一下html代码：
<div class="container" id="app">
<h1>复制图片</h1>
<div class="input-group ma-b-10">
<span class="input-group-addon" id="basic-addon3">粘贴</span>
<input ref="input" type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="card ma-b-10">
<div class="card-body">
<h4 class="card-title">
获得base64数据
</h4>
<textarea v-if="base64" class="form-control" id="base64" rows="3" v-model="base64">
</textarea>
</div>
</div>
<div class="card ma-b-10">
<div class="card-body">
<h4 class="card-title">
生成 img
</h4>
<canvas id="myCanvas">
你的浏览器不支持canvas，建议使用最新版的Chrome浏览器。
</canvas>
<div id="tempDiv"></div>
 </div>
</div>
<div class="card ma-b-10">
<div class="card-body">
<h4 class="card-title">
图片生成
</h4>
<input type="text" class="form-control" placeholder="请输入网址" id="code" v-model="code2"><br/>
<a href="#" @click="addRow()" class="btn btn-primary">二维码</a>
</div>
</div>
</div>
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);
}
},
}
})
最终效果如下图：
最终效果