html2canvas 截图不全的问题
微wx笑
2022-12-17【前端开发】
2
0关键字：
html2canvas 截图
前面转过一篇【解决】html2canvas截图不全的问题，根据文章提示，解决了图片上面部分截取不全的问题，但是还存在右侧部分截取不全的问题，虽然电脑上因为屏幕大基本可以用，但是手机上就不行了。
前面转过一篇【解决】html2canvas截图不全的问题，根据文章提示，解决了图片上面部分截取不全的问题，但是还存在右侧部分截取不全的问题，虽然电脑上因为屏幕大基本可以用，但是手机上就不行了。
周末了，再来研究一下，看能不能彻底解决这个问题，让手机上也可以用。
其实本来是研究在服务器端用php实现图片生成的，但是使用 ImageMagick 开始是正常的，后来升级了一个lib之后就出现了中文乱码的问题，一直没有能够解决，所以又研究客户端的解决方案。
用 html2canvas 的好处是不消耗服务器资源。
解决方案
进入正题
竖向的不全的问题解决了，横向的今天想到应该也是流动条的问题；
网页元素是一层套一层的，外层的 overflow 是 visible ，但是内层的 overflow 是 auto 或 scroll 的话，那么子元素就可能会出现横向的滚动条；
横向的滚动条就是导致左右截取不全的原因；
所以解决方案就是从 html、body 这些顶层元素起，都要使用 overflow:visible;，
也就是不能做设备适配，在手机上页面一屏肯定是显示不全的，上下左右需要滑动屏幕才能看完整；
但是这样子 html2canvas 截取图片就可以完整了。
完整代码
<script src="/js/html2canvas.js"></script>
<script>
function buildImage(){
window.pageYoffset = 0;
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
document.documentElement.scrollLeft = 0;
document.body.scrollLeft = 0;
html2canvas($("#app"), {
backgroundColor: 'white',
useCORS: true,
scale: 1,
height: document.getElementById('app').scrollHeight,
windowHeight: document.getElementById('app').scrollHeight,
width: document.getElementById('app').scrollWidth,
windowWidth: document.getElementById('app').scrollWidth,
onrendered: function (canvas) {
var url = canvas.toDataURL("image/png");
document.getElementById("img_stock").src = url;
//document.getElementById("iframe_img").src = url;
//window.location.href = url;
}
});
}
</script>代码说明
app 是要截取的元素的 id；
img_stock 是一个 img 标签；
本是希望实现图片下载的功能的，但是不行，注意代码中注释的两行代码；
html2canvas 是把 html 转成 canvas ，通过 onrendered 再将 canvas 的内容转换成图片使用 img 标签来显示；
这样用户操作是多了一步，也就是先生成图片，当然，你也可以在网页加载完成之后就调用 buildImage()；
之后用户就可以右键或才长按，保存图片了。
本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/front/2022-12-17/1618.html
