前端将两张图片和文字叠加并生成base64位的图片，并附上完整DOM

本文链接：https://blog.youkuaiyun.com/PLB1314/article/details/114664260

本文介绍了一个使用HTML5 Canvas和JavaScript实现的图像绘制及分享的方法。通过加载背景图片和logo，将其绘制到Canvas上，并最终转换为Base64编码的PNG图片进行展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

附上效果图

在这里插入图片描述

附上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
	 <canvas id="canvas" width="" height=""></canvas>
	 <img src="" id="avatar" >
	</body>
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		drawAndShareImage();
	 function drawAndShareImage(){
	     var canvas = document.createElement("canvas");
	     canvas.width = 700;
	     canvas.height = 700;
	     var context = canvas.getContext("2d");
	 
	     context.rect(0 , 0 , canvas.width , canvas.height);
	     context.fillStyle = "#fff";
	     context.fill();
	 
	     var myImage = new Image();
	     myImage.src = "img/HRbg.jpg";    //背景图片  你自己本地的图片或者在线图片
	     myImage.crossOrigin = 'Anonymous';
	 
	     myImage.onload = function(){
	         context.drawImage(myImage , 0 , 0 , 700 , 700);
	 
	         context.font = "60px Courier New";
	         // context.fillText("我是文字",350,450);
	 
	         var myImage2 = new Image();
	         myImage2.src = "img/logo.png";   //你自己本地的图片或者在线图片
	         myImage2.crossOrigin = 'Anonymous';
	         
	         myImage2.onload = function(){
	             context.drawImage(myImage2 , 175 , 175 , 225 , 225);
	             var base64 = canvas.toDataURL("image/png");  //"image/png" 这里注意一下
	             var img = document.getElementById('avatar');
	 
	             // document.getElementById('avatar').src = base64;
	             img.setAttribute('src' , base64);
	         }
	     }
	 }
	</script>
</html>