js将html转换成图片并下载

张张-程序猿

已于 2023-07-07 14:31:46 修改

阅读量2.2k

点赞数 1

分类专栏： javaScript 文章标签： javascript html 开发语言

于 2023-06-28 12:04:18 首次发布

本文链接：https://blog.csdn.net/weixin_52168983/article/details/131433020

版权

javaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1：首先页面引入html2canvas.min.js，下载到本地
html2canvas.min.js
2：逻辑直接下载代码里了，上代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
	</head>
	<style>
		#content {
			width: 200px;
			height: 100px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #ccc;
		}
		.nike img {
			width: 50px;
		}
	</style>
	<body>
		<button class="btn" onclick="generateImage()">生成图片</button>
		<div id="content">
			<!-- content里面写你想要生成图片的html代码，style里面都可以去调样式 -->
			<div class="nike">
				<img src="./images/nike.png" alt="">
				<p>鸡吡你</p>
			</div>
		</div>
	</body>
	<script>
		function generateImage() {
		    html2canvas(document.getElementById('content'), {
		        onrendered: function(canvas) {
		            // 创建一个新的图像元素
		            var img = document.createElement('img');
		            // 设置图像的源为canvas生成的DataURL
		            img.src = canvas.toDataURL('image/png');
		            // 创建一个下载链接
		            var link = document.createElement('a');
		            link.href = img.src;
		            link.download = 'image.png'; // 名称可以修改
		            link.textContent = '下载图片';
		            // 将图像和下载链接添加到页面
		            document.body.appendChild(img);
		            document.body.appendChild(link);
		        }
		    });
		}
	</script>
</html>