html2canvas生成图片问题汇总

最新推荐文章于 2024-06-28 17:09:54 发布

凌晨 || AmsWait

最新推荐文章于 2024-06-28 17:09:54 发布

阅读量1.8k

点赞数

文章标签： javascript 前端开发语言

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

版权

文章详细讨论了使用html2canvas库在页面加载后生成图片时遇到的问题，包括文字空白、跨域处理、CSS属性影响、iOS设备兼容性、图片加载失败以及CSS动画导致的部分缺失等，并提供了相应的解决策略，如调整CSS属性、使用特定版本的库和处理滚动条位置等。

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

版本：html2canvas 1.0.0-rc.4

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

绘制图片最好是在页面加载完毕之后进行，处理好图片跨域问题参考：
使用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;

文字溢出隐藏的省略号没了
不支持文字溢出隐藏，解决方案是手动截取字符串例如：infoTxt.substr(0, 55) + ‘…’;
文字错位，重叠
可能是使用的插件版本过低导致，
iOS设备不生成图片，生成空白图片
最新版的插件在iOS系统版本13.3左右有bug 需要使用1.0.0-rc.4 版本的插件才可以正常生成；

更换图片赋值方式例如:

	var img = document.getElementById("saveImg")
	    img.src = canvas.toDataURL()

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

img标签src使用FTP下的图片也会导致生成失败
可能是由于img访问FTP下的图片会产生301跳转导致的，可以将FTP下的图片做完背景图片使用，或者直接将资源服地址拼接写死如‘static2.changyou.com’ + ‘/act/xtl/jzds/20201225/m/img/perfect.png’这样拼接一下
生成图片后部分伪类样式丢失
ios 对 :before, :after 不支持，使用其他元素代替即可

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

长页面中渲染出的图片为空白或只有部分
跟滚动条的位置有关，让滚动条再最顶端就不会出现这样的问题了

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

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

生成图片后部分缺失
检查下这部分是不是有css3动画，动画效果的延时会可能会让生成时此部分尚未显示进而导致生成出来的图片缺失这一部分
iPhone 7P 生成失败
使用
https://download.csdn.net/download/amswait/85834422
https://download.csdn.net/download/amswait/85834422
这个版本尝试下