Javascript html2canvas 无法获取背景答案

【问题标题】：Javascript html2canvas cant get backgroundJavascript html2canvas 无法获取背景
【发布时间】：2016-11-11 20:45:54
【问题描述】：

使用 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);
            }
        });

【问题讨论】：

标签： javascript css html2canvas

【解决方案1】：

从逻辑上讲，渲染从您选择的元素开始。

所以不会得到背景，除非你选择“父元素”或“根元素”。

我有两个解决方案：

1 - 使用 Javascript/Jquery 您可以从 div#target 捕获 X 和 Y 位置然后你在 div#target 中通过 X/Y 位置设置背景图像和背景位置

2 - 您使用 html2canvas 捕获 <body>，然后使用 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

裁剪画布：

https://github.com/niklasvh/html2canvas/issues/242#issuecomment-20875688

【讨论】：

根本没有解决办法。 html2canvas "0.5.0-rc" 不支持，或者我做错了什么。
@user3211337 没有错，唯一的问题是“逻辑”，渲染从您选择的元素开始。因此将无法使用“父”元素。我编辑了我的答案