Question

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

Answer 1

逻辑上，渲染适用于您选择的元素。

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

我有两个解决方案：

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

2 - 您使用html2canvas捕获<body>，然后使用canvas/javascript api按X / Y位置裁剪图像，使用div #target的宽度/高度，请参阅示例：＃ 242（评论）注意：在这些变量中设置width / height / 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

Javascript html2canvas无法获得背景

1 个答案: