<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<button type="button" id="test">测试</button>
<div id="qrcode" style="position:absolute;top:0px;bottom:0px;right:0px;display: none;background-color:rgba(0, 0, 0, 0.75)">
<img id="qrcode_img" style="margin: 0 auto;padding-left: 10%; 80%;">
<div id="temp_code" style="display: none"></div>
</div>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js" ></script>
<script>
var list = ["/Hannah/test/qrcode.jpg", ...];
//生成二维码并合并背景图
function MergePictures() {
var back = "http://" + window.location.host + list[0];
var c = document.createElement('canvas'),
ctx = c.getContext('2d');
c.width = 720;
c.height = 1169;
ctx.rect(0, 0, c.width, c.height);
ctx.fillStyle = '#fff';
ctx.fill();
$('#temp_code').html("");
$('#temp_code').qrcode({
233,
height: 240,
text: 'https://www.baidu.com/'
});
var img = new Image;
//img.crossOrigin = 'Anonymous'; //解决跨域
img.src = back;
img.onload = function() {
ctx.drawImage(img, 0, 0, c.width, c.height);
var code = $("#temp_code").find("canvas");
ctx.drawImage(code[0], 340, 865, 233, 240);
//ctx.drawImage(code[0], xx, yy, ww, hh);
//保存生成作品图片
var base64 = (c.toDataURL("image/jpeg", 0.8));
showQrcodePage(base64);
$(".loading").hide();
}
}
$("#test").on("click", function() {
MergePictures();
})
//显示二维码页面
function showQrcodePage(base64) {
$("#qrcode_img").attr("src", base64);
$("#qrcode").show();
}
</script>
</body>
</html>
添加水印-合并背景图片+动态生成码
但行好事，莫问前程。