canvas把图片和文字变成图片保存本地_js将text保存为图片-CSDN博客

本文链接：https://blog.csdn.net/peijiajing/article/details/122219955

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#mycanvas {
				border: 1px solid red;
				margin-left: 500px;
			}
		</style>
	</head>
	<body>
		<canvas id='mycanvas' width="300" height="320"></canvas>
		<button type="button" id="save">保存</button>
		<script type="text/javascript">
			window.onload = function() {
				var mycanvas = document.getElementById('mycanvas')
				var ctx = mycanvas.getContext('2d')
				var img = new Image();
				img.onload = function() {
					// 将图片画到canvas上面上去！
					ctx.drawImage(img, 50, 60, 200, 200);
					ctx.fillStyle = "red";
					ctx.textAlign = 'center'
					ctx.font = " bold 18px 微软雅黑";
					ctx.fillText("华为", 150, 40);
					ctx.strokeStyle = "blue";
					ctx.font = " bold 16px 宋体";
					ctx.textAlign = 'center'
					ctx.strokeText("点击下载二维码", 150, 280);
				}
				img.src = "./img/1.png";
			}
			// 保存成png格式的图片
			function saveAsPNG(canvas) {
				return canvas.toDataURL("image/png");
			}
			document.getElementById("save").onclick = function() {
				downLoad(saveAsPNG(mycanvas));
			}

			function downLoad(url) {
				var oA = document.createElement("a");
				oA.download = ''; // 设置下载的文件名，默认是'下载'
				oA.href = url;
				document.body.appendChild(oA);
				oA.click();
				oA.remove(); // 下载之后把创建的元素删除
			}
		</script>
	</body>
</html>