js利用Canvas制作图片于文字合成图片

西决 HTML/CSS, JavaScript 1年前 852 0 11

基础知识百科: https://www.runoob.com/jsref/dom-obj-canvas.html

我自己亲测得案例，直接上代码:

<!DOCTYPE html>
<html>	<head>	<meta charset="utf-8" />	<title></title>	<script src="static/utils/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>	<style>	.classname {	width: 100px;	height: 40px;	line-height: 40px;	background-color: #01AAED;	border-radius: 10px;	color: #FFFFFF;	font-size: 12px;	text-align: center;	}	.classimg {	width: 100px;	height: 40px;	line-height: 40px;	background-color: #ff557f;	border-radius: 10px;	color: #FFFFFF;	font-size: 12px;	text-align: center;	margin-top: 10px;	}	.bgimg {	background-color: #007DDB !important;	}	#list {	width: 100%;	height: auto;	}	#list li {	width: 50px;	height: 20px;	background-color: #009688;	margin-top: 5px;	color: white;	font-size: 12px;	text-align: center;	}	</style>	</head>	<body>	<div class="body"> <!-- <canvas id="avatar" style="display: none"></canvas> --> <img src="" id="avatar" />	</div>	<script type="text/javascript">	window.onload = function() {	var a="https://img.sxpcwlkj.com/logo.png";	var b="https://img.sxpcwlkj.com/wp-content/uploads/2017/08/32.jpg";	var c="微信扫码进入小程序";	a="https://img.sxpcwlkj.com/code.png";	b="https://lhym-1301608033.cos.ap-chengdu.myqcloud.com//lhym/2021/7/1/platform_6b071fcc-0e5d-4122-8e21-dab4dafc4f48.jpg";	//解决 图片跨域的问题 drawAndShareImage(a,b,c);	function drawAndShareImage(img,bgimg,text) {	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 = bgimg; //背景图片 你自己本地的图片或者在线图片	myImage.crossOrigin = 'Anonymous';	myImage.onload = function() {	context.drawImage(myImage, 0, 0, 700, 700);	context.font = "16px Courier New";	context.fillText(text, 525, 640);	var myImage2 = new Image();	myImage2.src = img; //你自己本地的图片或者在线图片	myImage2.crossOrigin = 'Anonymous';	myImage2.onload = function() {	context.drawImage(myImage2, 520, 450, 150, 150);	var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下	var img = document.getElementById('avatar');	// document.getElementById('avatar').src = base64;	img.setAttribute('src', base64);	}	}	}	}	</script>	</body>
</html>

效果图：