html2canvas 不捕捉图像

Question

html2canvas.js 不捕获图像。 它在图像出现的地方留下空白。

function capture()
{
    html2canvas(document.body, {
        allowTaint: true,
        logging:true,
        onrendered: function(canvas) {
        imagestring = canvas.toDataURL("image/png");
        console.log(imagestring);
        document.body.appendChild(canvas);
        }
    });
}

我已经尝试了很多，但我找不到解决方案。

帮助表示赞赏:)

Answer 1

当我将它托管在服务器中时，它可以工作。 安全限制导致它失败。

Answer 2

如果您仅在生产中遇到问题，但在本地它可以工作，如果没有 AllowTaint 属性，它将无法在生产中工作。 所以添加。

见示例：

Answer 3

当我使用使用 html input 标签制作的图像按钮时，html2canvas 没有呈现我的源图像：

<input type="image" src="...">

不过，html2canvas 与 img 标签完美配合。 所以，我切换到 html 按钮标签（你可以类似地使用 url 链接标签）并在其中插入 img 标签：

<button type="button"><img src="..."></button>

我还发现 html2canvas 可以渲染图像，如果它是在样式中添加的背景图像（您可以保留输入标签！）：

in styles:
...#mybutton{
        background-image: url(...);
        background-repeat: no-repeat;
        background-size: 30px 30px;
        background-color:transparent;
    }
in html:
<input id="mybutton" type="image">
<button id="mybutton" type="button"></button>

如果您有视频标签，后者尤其有用。 html2canvas 不会为其渲染海报图像，因此您所要做的就是将该海报图像添加到样式中视频标签的背景图像中，然后您将获得视频的图片。

希望这个解决方法可以帮助某人。

Answer 4

您需要在 html2canvas 中添加以下选项。

allowTaint: true
useCORS: true