图片二维码合成海报

最新推荐文章于 2023-11-24 10:56:43 发布

日不落的希望

最新推荐文章于 2023-11-24 10:56:43 发布

阅读量140

点赞数 1

分类专栏：总结文章标签： js jquery html

本文链接：https://blog.csdn.net/qq_41493250/article/details/118247061

版权

总结专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>QRCode</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<style>
#canbox{
	width: auto;
	height: 590px;
	position: fixed;
	top: 0;
	left: 0;
}
.canimg {
	width: auto;
	height: auto;
	position: fixed;
	top: 0;
	left: 0;
}
</style>
</head>
<body>
<div id="qrcode" style="display: none;">		
</div>
<div id="canbox">
<canvas id="myCanvas" width="" height=""></canvas>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="qrcode.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
<script type="text/javascript">
var qrcode = new QRCode("qrcode", {
    width : 100,
    height : 100,
    text: "https://blog.csdn.net/qq_41493250", 
	colorDark : "#000",
    colorLight : "#fff",
});
//画海报
var width = document.getElementById("canbox").offsetWidth; //宽度  
var height = document.getElementById("canbox").offsetHeight; // 高度
var c = document.getElementById("myCanvas");
c.width = width
c.height = 590
var ctx = c.getContext("2d");
//首先画上背景图
var img = new Image();
img.src = "1.png";
ctx.font = "19px Georgia";
//画上二维码
function convertCanvasToImage(canvas) {
	var image = new Image();
	image.src = canvas.toDataURL("image/png");
	return image;
}
var mycans = $('canvas')[0];
var codeimg = convertCanvasToImage(mycans)
var xw = width - 190
var xh = height - 260
console.log(mycans)
img.onload = function() { 
	ctx.drawImage(img, 0, 0, width, height); 
	ctx.drawImage(codeimg, xw, xh, 72, 72);

	setTimeout(function() {  //ios上可能会出现无法获取整个画布内容，加了个settimeout
		var bigcan = $('canvas')[0];
		let images = new Image();
		images.src = bigcan.toDataURL("image/png");
		$('.canimg').attr('src', bigcan.toDataURL("image/png"))
	}, 0)
}
</script>
</body>