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