生成二维码，合成图片

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_39969987/article/details/102737257

1、动态生成二维码
链接：https://pan.baidu.com/s/14cDyPTWOn_YuHWE-cfrIfg
提取码：6bfv
使用：

<div class="qrcode" id="qrcode"></div>
<script>
		var qrcode = new QRCode("qrcode",{width:70,height:70});
        function makeCode () {
            qrcode.makeCode("XXXX");
        };
        makeCode();
</script>

2、canvas合成图片

<div style="display: none">
    <img src="img/shareCode.png" alt="" id="codeBg">
    <div class="qrcode" id="qrcode"></div>
</div>
<canvas id="myCanvas" width="375" height="667"></canvas>
<div class="shareCodeBody" id="shareCodeBody" ></div>
<span  class="share Color" id="shareBtn">点击合成</span>
<span  class="share Color" id="downLoadBtn">点击合成</span>

<script>
	$('#shareBtn').click(function(){
            $('.shareCodeBody').empty();
            var man1 = document.getElementById("codeBg"),
                man2 = document.getElementById("qrcode").getElementsByTagName('img')[0],
                canW,
                ratio;
             ratio =man1.height/man1.width;
            canW = man1.width;
            var canvas = document.getElementById("myCanvas");
            ctx = canvas.getContext("2d");
            canvas.width = canW;
            canvas.height = canW*ratio;
            // 制作背景图
            var patBg = ctx.createPattern(man1, "no-repeat");
            ctx.rect(0, 0, canW, canW*ratio);
            ctx.fillStyle = patBg;
            ctx.fill();
            ctx.drawImage(man2, canW*0.41, canW*ratio*0.835, 70, 70);
            var newImg = new Image();
            newImg.src = canvas.toDataURL("image/png");

            $('.shareCodeBody').append(newImg);
            $('#myCanvas').hide();
        });
        //保存图片
        function save(img) {
            var alink = document.createElement("a");
            alink.href = img.src;
            alink.download = "testImg.jpg";
            alink.click();
        };

        $('#downLoadBtn').click(function(){
            var img = document.getElementById("shareCodeBody").getElementsByTagName('img')[0];
            save(img)
        })
</script>