html2canvas遇到的坑，图片模糊，报Error loading image

最新推荐文章于 2022-09-18 20:47:33 发布

卡卡的喵

最新推荐文章于 2022-09-18 20:47:33 发布

阅读量1.4w

点赞数 2

分类专栏： js 文章标签： html2canvas

本文链接：https://blog.csdn.net/kouwoo/article/details/105529681

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

最近业务上遇到需要把div的内容生成图片，查了一下，比较好的js插件是html2canvas，

用下来也确实比较简单，但遇到一些坑，比如生成的图片比较模糊，或者报Error loading image

1.一开始用的0.5.0-beta4的版本,生成的图片很模糊，网上一大堆解决方案，但其实只要用新一点的版本就能解决问题。

2.于是我找了最新的版本下载地址 v1.0.0-rc.5，虽然生成的图片清晰了，但发现会报Error loading image 。

3.最终解决方案是用了v1.0.0-alpha.9这个版本，问题解决，图片清晰也不报错了。

以下是测试代码

<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="html2canvas.min.js"></script>
<link rel="stylesheet"
	href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script
	src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

	<!-- 按钮触发模态框 -->
	<button class="btn btn-primary btn-lg" onclick="m()">开始演示模态框</button>
	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">×</button>
					<h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
				</div>
				<div class="modal-body">
					<div style="background: #fff;">
						<div>1</div>
						<div>2</div>
						<div>3</div>
						<div>4</div>
					</div>
					<div id="imgDiv" style="position: absolute; background: #eee;">
						<img id="imgId" class="imgDiv_img" src="" style="width: 100%;" />
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="button" class="btn btn-primary" onclick="d()">
						生成图片</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
	<script type="text/javascript">
		function m() {
			$("#myModal").modal("show");
		}

		function d() {

			html2canvas(document.querySelector("#myModal")).then(
					function(canvas) {
						var imgUri = canvas.toDataURL("image/jpeg", 1); // 获取生成的图片的url
						$(".imgDiv_img").attr("src", imgUri)
					})
		}
	</script>
</body>
</html>

卡卡的喵

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
5
评论
html2canvas遇到的坑，图片模糊，报Error loading image

最近业务上遇到需要把div的内容生成图片，查了一下，比较好的js插件是html2canvas，用下来也确实比较简单，但遇到一些坑，比如生成的图片比较模糊，或者报Error loading image1.一开始用的0.5.0-beta4的版本,生成的图片很模糊，网上一大堆解决方案，但其实只要用新一点的版本就能解决问题。2.于是我找了最新的版本下载地址v1.0.0-rc.5，虽然生成的图...
复制链接

扫一扫