前端生成带二维码的海报


<div id="divOne" style="display: none;"></div>

<!-- 二维码容器-->
<img src="/public/ice/img/Q4.jpg" alt="" id="scream" style="display: none;">

<!-- 海报底图容器-->
<canvas id="myCanvas" width="375" height="858" style="display: none;"></canvas>

<!-- 将海报和二维码绘制到此canvas 上-->
<img id="imgTwo" src="/public/ice/img/Q4.jpg" width="50%" height="100%">

<!-- 将绘制好的canvas  转成base 64 并且储存,方便用户长按保存-->

&nbsp;


<script src="https://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>

<script>

var qrcode = $("#divOne").qrcode({
render: "canvas",
text: "https://baidu.com",
width: "115",
height: "115",
background: "#ffffff",
foreground: "#000000",
});
var code = qrcode.find('canvas').get(0);
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
img.onload = function() {
ctx.drawImage(img, 0, 0);
ctx.drawImage(code, 132, 706);

var aaa = c.toDataURL("image/jpeg", 1);
$('#imgTwo').attr('src', aaa);
}

$('.Q4 #imgTwo').click(function(event) {
return false;
})
$('.Q4').click(function() {
$(this).css('display', 'none')
})

</script>

1:利用qrcode 绘制二维码.

2:将二维码和底图绘制到一个canvas上

3:将最终绘制canvas 转为base64写到页面上

4:canvas图片跨域问题,此代码没有进行兼容,使用同域名底图图片即可。