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