文章详细讨论了使用html2canvas库在页面加载后生成图片时遇到的问题，包括文字空白、跨域处理、CSS属性影响、iOS设备兼容性、图片加载失败以及CSS动画导致的部分缺失等，并提供了相应的解决策略，如调整CSS属性、使用特定版本的库和处理滚动条位置等。
摘要由CSDN通过智能技术生成
官网文档地址：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
这个版本尝试下
最近接到反馈，先前做的一个小工具会出现一些bug 主要原理是根据用户填写的内容生成一个隐藏起来的节点，并把这个节点截取生成图片下载下来；
首先把这个节点显示出来发现节点是正常的
那么问题就出现在获取节点上，这里使用到了html2canvas将节点转化为 base64 格式的图片，打印一下这个文件：
ok, 是空白的；
当页面缩小及生成图片滚动页面时，会出现类似问题，后来发现是页面有滚动条时会出现截图失败；
查阅文档还可以通过获取截图范围的精确位置截图；
我们需要的是截图区域左上角的 x, y 坐标，以及截图
有时我们需要实现在浏览器端直接对整个或部分页面进行截屏，比如移动端常见的“长按网页保存为图片”功能。这个借助 html2canvas 这个第三方 js 库即可实现，下面通过样例演示其如何使用。
一、基本介绍
1，什么是 html2canvas
html2canvas 可以通过获取 HTML 的某个元素，然后生成 Canvas，从而让用户保存为图片。
html2canvas 工作原理是将当页面渲染成...
html2canvas库的工作原理并不是真正的“截图”，而是读取网页上的目标DOM节点的信息来绘制canvas，所以它并不支持所有的css属性（参考地址）
引入html2canvas
<script src="./html2canvas.min.js"></script>
<div id="cvs-box">
<img style="width: 100px;" id="test-img" crossorigin="anonymous"
项目中需要使用将思维导图导出成图片，使用html2canvas生成图片在iPhone6上图片空白，查了好久发下将外层div的position：relative去掉后图片生成才正常，但是再次合成的图片内容发生偏移，顶部空白，缺少一部分内容，添加配置项y:0,scrollY:0后图片偏移还是不正常，内容不全，顶部多出一部分空吧，原因是待生成的div有滚动，尝试计算滚动的距离来设置scrollY，但是效果不理想
最终方案：因为待生成的dom需要在页面上展示，会产生滚动条，在页面上重将带生成的dom重新复制一份，使
allowTaint：是否允许跨域图像污染画布，默认为false
useCORS：是否尝试使用CORS从服务器加载图像，默认为false
width：canvas画布的宽度,默认为jQuery对象的宽度
height：canvas画布的高度,默认为jQuery对象的高度
backgroundColor：
