html2canvas Chromeの「トップフレームからデータURLへの移動が許可されていません」

Question

オンhttp://snippet.christopherkade.comユーザーにコードスニペットをダウンロードさせます。html2canvasを使用して、画面に表示されるコンソールをレンダリングして保存します。これは、Firefox上でうまく動作しますが、Chromeは、このエラーが表示されます。

Not allowed to navigate top frame to data URL

私は次のようにします。クロムは私のコンソールにエラーと空白のページが表示されていることを

// Opens a window with the console to be copied or downloaded 
html2canvas(document.getElementsByClassName('console'), {  
    onrendered: function(canvas) { 
    var img = canvas.toDataURL() 
    window.open(img); 
    } 
}); 

注意を。

私が見つけた唯一の情報はhereです。しかし、それは単にGoogleがこの決定を下した理由を説明するだけで、私は解決策を見ることができませんでした。

Answer 1

data：URLではなくblob：URLを使用できます。

b.onclick=async()=>{ 
 
    let blob = await new Promise(resolve=>c.toBlob(resolve)); 
 
    let url = URL.createObjectURL(blob); 
 
    // Won't work here, because 
 
    // "the request was made in a sandboxed frame whose 'allow-popups' permission is not set." 
 
    window.open(url); 
 
    let a = document.createElement('a'); 
 
    a.href = url; 
 
    a.download = ''; 
 
    a.click(); 
 
};

<canvas id=c></canvas> 
 
<button id=b>save</button>