使用html2canvas将dom元素转换成图片（canvas）进行下载

2024 年 9 月 8 日 7点热度 0人点赞 0条评论

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>htmltopic</title>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
		<style>
			* {
    
				margin: 0;
				padding: 0;
			}

			.test {
    
				width: 300px;
				/* height: 300px; */
				background: orange;
			}
		</style>
	</head>
	<body>


		<div class="test">
			<span>测试</span>
			<br />
			<span>测试2</span>
			<span>测试3</span>
			<img src="https://img1.baidu.com/it/u=3372051106,3812134198&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200" alt="" />
			<h1>123456</h1>
		</div>
		<div>
			<a class="down" href="" download="downImg123">下载</a>
		</div>

		<script>
			html2canvas(document.querySelector('.test'), {
    
					// 以下字段可选
					// width: 490, // canvas宽度
					// height: 240, // canvas高度
					// x: 0, // x坐标
					// y: 0, // y坐标
					// foreignObjectRendering: true, // 是否在浏览器支持的情况下使用ForeignObject渲染
					useCORS: true, // 是否尝试使用CORS从服务器加载图像
					// async: false, // 是否异步解析和呈现元素
					// 以下字段必填
					background: "#ffffff", // 一定要添加背景颜色，否则出来的图片，背景全部都是透明的
					scale: 2, // 处理模糊问题
					dpi: 300, // 处理模糊问题

				})
				.then(function(canvas) {
    
					//canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
					document.querySelector(".down").setAttribute('href', canvas.toDataURL());
				});
		</script>



	</body>
</html>