现在经常会遇到那种带二维码的推广图片，如下图所示：
1是整张推广图的背景，2是二维码。这种图片的背景是保持不变的，里面的二维码是变化的。所以我们需要把二维码单独生成然后与背景合并。
我们可以通过canvas绘图达到将2张图片合并的效果。
具体代码如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Html5 Canvas 实现图片合成</title> <style> body{ text-align: center; } img { border: solid 1px #ddd; } </style> </head> <body> <div align="center"> <img src="promote_store_bg.png"> <img src="promote_store_qrcode.png"> </div> <input type="button" value="一键合成" onclick="hecheng()"> <a href="" download id="downloadPic">下载合成图</a> <div id="imgBox" align="center"> </div> <script> function hecheng() { draw(function() { document.getElementById('imgBox').innerHTML = '<img src="' + base64[0] + '">'; document.getElementById('downloadPic').href = base64[0]; }) } var data = ['promote_store_bg.png', 'promote_store_qrcode.png'], base64 = []; function draw(fn) { var c = document.createElement('canvas'), ctx = c.getContext('2d'), len = data.length; c.width = 400; c.height = 400; ctx.rect(0, 0, c.width, c.height); ctx.fillStyle = '#fff'; ctx.fill(); function drawing(n) { if(n < len) { var img = new Image; //img.crossOrigin = 'Anonymous'; //解决跨域 img.src = data[n]; img.onload = function() { if(n == 1) { ctx.drawImage(img, 121, 129, 160, 160); //121和129表示二维码距离背景图片左上角的X轴，Y轴，160表示生成的图片中二维码的大小 } else { ctx.drawImage(img, 0, 0, c.width, c.height); } drawing(n + 1); //递归 } } else { //保存生成作品图片 base64.push(c.toDataURL()); //通过canvas.toDataURL转成base64. //alert(JSON.stringify(base64)); fn(); } } drawing(0); } </script> </body> </html>
a标签通过添加download属性并把生成的base64赋值给a的href就可以直接下载图片了。