使用 Javascript 库 html2canvas 的一些问题。问题是 html2canvas 正在获取具有透明(有时是白色)背景的“div2”，我想在“div2”上包含正文背景(或在这个 div 后面)。
<div id="div2" style="width: 150px; height: 50px;"></div>
html2canvas(document.getElementById("div2"), {
onrendered: function(canvas) {
var photostring = canvas.toDataURL("image/png");
console.log(photostring);
}
});
最佳答案
从逻辑上讲，渲染是从您选择的元素开始的。
所以不会得到背景，除非你选择“父元素”或“根元素”。
我有两个解决方案:
1 - 使用 Javascript/Jquery，您可以从 div#target 捕获 X 和 Y 位置 然后在 div#target 中按 X/Y 位置设置背景图像和背景位置
2 - 你捕获 <body>使用 html2canvas，然后使用 canvas/javascript api你从 div#target 按 X/Y 位置和宽度/高度裁剪图像，请参见示例:#242(注释)
注意:在这些变量中设置宽度/高度/x/y(参见示例):
var targetDiv = $("#target");
var sourceX = targetDiv.position().left;/*X position from div#target*/
var sourceY = targetDiv.position().top;/*Y position from div#target*/
var sourceWidth = targetDiv.width();/*clientWidth/offsetWidth from div#target*/
var sourceHeight = targetDiv.height();/*clientHeight/offsetHeight from div#target*/
在父/根元素中获取背景图像:
https://github.com/niklasvh/html2canvas/commit/281e6bbedf9f611846eba3af4d256eb97f608aa2
裁剪 Canvas
https://github.com/niklasvh/html2canvas/issues/242#issuecomment-20875688
关于Javascript html2canvas 无法获取背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22461108/