Canvas 实现图片合成并下载合成图片

如今常常会遇到那种带二维码的推广图片，以下图所示：html

1是整张推广图的背景，2是二维码。这种图片的背景是保持不变的，里面的二维码是变化的。因此咱们须要把二维码单独生成而后与背景合并。canvas

咱们能够经过canvas绘图达到将2张图片合并的效果。跨域

具体代码以下：ui

<!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就能够直接下载图片了。spa