html2canvas截图的清晰度问题

Posted 2023-03-14

参考技术A 首先请关注 官方更新 。
——————————————————————————————————————
html2canvas 这个东西的作用是，可以在页面里截图，无论是整张页面，乃至单个的div，都可以依照原本的画风生成canvas，然后我们使用toDataURL这个方法就可以生成这个页面或者div的图片了。

作者上次更新就在今年，但并没有关注到一个问题：使用这样的方法生成的canvas，画质是否清晰？我们知道设备的 devicePixelRatio决定了canvas的清晰度 , 文中解决这个问题的核心方法是放大canvas然后缩小显示到原比例。于是我在html2canvas.js中做了如下改动：

我只是将待画元素的宽度与高度都乘以2。然后这个设定对所有子元素都递归有效了。于是我们得到了一个所有待画元素都放大一倍的canvas。
接下来肯定是要把canvas也放大才行。

然后很山寨的就把我的问题解决了。
但也带来了后续的问题：

感谢 焰尾迭 的 文章 启发了我。