提高html2canvas截图精度 / 提高dpi

最新推荐文章于 2024-12-05 22:04:02 发布

weixin_zsh

最新推荐文章于 2024-12-05 22:04:02 发布

阅读量1.5w

点赞数 3

分类专栏：截图 html2canvas 文章标签： html2canvas dpi

本文链接：https://blog.csdn.net/weixin_41863239/article/details/85248545

版权

本文介绍了如何优化html2canvas截图的精度，目标是实现300dpi，确保打印时不失真。通过放大canvas的尺寸并调整scale属性，能显著改善截图质量。然而，即使如此，截图的dpi仍然保持在96dpi。作者发现html2canvas作者已在github上提及提高dpi的解决方案，但并未更新到官方文档。作者下载了带有dpi和scale选项的源码，通过设置scale=dpi/96，可以实现画布按比例放大。尽管截图图片大小增加，但实际dpi并未改变。目前，实现自定义dpi的功能仍有待探索。

摘要由CSDN通过智能技术生成

项目中要实现div的截图功能，使用了html2canvas截的图比较模糊，我之前也记录过这个问题，html2canvas 实现网页截图，但是现在要对截图的精度进行优化，截出来的图片要实现打印照片的功能，也就是说html2canvas截图至少要达到300dpi，这样打印出来的图片才不会失真！这个问题真是难到我了，我在网上搜了很多解决html2canvas截图不清楚的文章看，发现大部分网友都赞同先放大canvas到2倍，然后再缩小画布（渲染的）大小，要设置canvas的画布大小，使用的是canvas.width 和 canvas.height；要设置画布的实际渲染大小，使用的style或CSS设置的 width 和height，只是简单的对画布进行缩放。比如：

                var scaleBy=2;//缩放比例
		var owidth=$("#cj1").outerWidth();   //准备截图div的宽
		var oheight=$("#cj1").outerHeight();
		var mycanvas = document.createElement("canvas");
		mycanvas.height = oheight*scaleBy;
		mycanvas.width = owidth*scaleBy;
		mycanvas.style.width = owidth + "px";
		mycanvas.style.height = oheight +

最低0.47元/天解锁文章