版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
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>