图片二维码合成海报

2021-06-26 13:06:11 阅读：133 来源： 互联网

标签：海报 img 合成 canvas height width 二维码 var image

<!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>

在这里插入图片描述
实例下载

标签：海报,img,合成,canvas,height,width,二维码,var,image
来源： https://blog.csdn.net/qq_41493250/article/details/118247061

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

图片二维码合成海报