html2canvas生成图片问题汇总

凌晨 || AmsWait

已于 2022-06-30 11:27:21 修改

阅读量2.6k

点赞数 1

文章标签： js javascript html css canvas

于 2020-09-24 15:48:12 首次发布

本文链接：https://blog.csdn.net/amswait/article/details/108775977

版权

博客详细列举了html2canvas在生成网页截图时遇到的问题及解决办法，包括文字空白、溢出隐藏、样式丢失、iOS设备兼容性、图片跨域、CSS动画影响等问题，并提供了相应的代码示例和配置调整建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

版本：html2canvas 1.0.0-rc.4

官网文档地址 <https://html2canvas.hertzen.com>

此版本下载地址：html2cavas1.0.0-rc.4-网页制作文档类资源-CSDN下载

绘制图片最好是在页面加载完毕之后进行，处理好图片跨域问题参考：使用canvas生成图片跨域问题的解决方案

若图片正常生成但有部分不符合预期其原因大部分问题是由CSS引起；

本次生成使用核心代码如下

<script type="text/javascript" src="/m/js/html2canvas.min.js"></script>

<script>
    window.onload = function () {
        setTimeout(function () {
            //生成分享图
            html2canvas(document.querySelector("#share-bg"), {
                useCORS: true,
                allowTaint: true  // 这两个属性都是图片跨域相关属性
            }).then(canvas => {
                var img = document.getElementById("saveImg")
                img.src = canvas.toDataURL()
            }).catch(e => {
                console.log(e);
            })
        }, 100)
    }
</script>

1.生成的图片上文字部分是空白

不支持下列几种属性，设置后会导致生成时忽略文字部分

text-overflow:;

display: -webkit-box;

-webkit-line-clamp:

line-clamp:

-webkit-box-orient: vertical;

2. 文字溢出隐藏的省略号没了

不支持文字溢出隐藏，解决方案是手动截取字符串例如：infoTxt.substr(0, 55) + '...';

3. 文字错位，重叠

可能是使用的插件版本过低导致，

4. iOS设备不生成图片，生成空白图片

最新版的插件在iOS系统版本13.3左右有bug 需要使用1.0.0-rc.4 版本的插件才可以正常生成；

更换图片赋值方式例如:

var img = document.getElementById("saveImg")

img.src = canvas.toDataURL()

生成空白图的情况是使用的插件版本过低时候出现

5. img标签src使用FTP下的图片也会导致生成失败

可能是由于img访问FTP下的图片会产生301跳转导致的，可以将FTP下的图片做完背景图片使用，或者直接将资源服地址拼接写死如‘static2.changyou.com’ + ‘/act/xtl/jzds/20201225/m/img/perfect.png’这样拼接一下

6. 生成图片后部分伪类样式丢失

ios 对 :before, :after 不支持，使用其他元素代替即可

部分安卓的老旧机型可能会直接导致图片生成失败（待验证）

7. 长页面中渲染出的图片为空白或只有部分

跟滚动条的位置有关，让滚动条再最顶端就不会出现这样的问题了

设置 y 这个参数即可（具体可查阅文档参数说明）

html2canvas($(ele)[0], {
    y: $('#saveFree').offset().top
}).then(canvas => {
    
});

8. 生成图片后部分缺失

检查下这部分是不是有css3动画，动画效果的延时会可能会让生成时此部分尚未显示进而导致生成出来的图片缺失这一部分

9. iPhone 7P 生成失败

使用https://download.csdn.net/download/amswait/85834422https://download.csdn.net/download/amswait/85834422 这个版本尝试下