html2canvas 不捕获图像

Question

html2canvas.js 没有捕获图像。它在图像出现的地方留下白色 space。

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

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

allowTaint: true
useCORS: true

Answer 3

如果您仅在生产中遇到问题但在本地它有效，没有 AllowTaint 属性它不会在生产中工作。所以加上那个。

参见示例：

Answer 4

html当我使用使用 html 输入标签制作的图像按钮时，2canvas 没有渲染我的源图像：

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

不过，

html2canvas 与 img 标签完美配合。所以，我切换到 html 按钮标签（你可以类似地使用 url link 标签）并在其中插入 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 不会为它渲染海报图像，所以您所要做的就是将该海报图像添加到样式中视频标签的背景图像中，您将获得视频的图片。

希望此变通方法对某人有所帮助。

html2canvas 不捕获图像

html2canvas not capturing image

html

javascript

jquery

html2canvas