html2canvas Chrome의 상단 프레임을 데이터 URL로 이동할 수 없습니다.

Question

에서 http://snippet.christopherkade.com 사용자가 코드 스 니펫을 다운로드 할 수 있도록 화면에 표시된 콘솔을 렌더링하고 저장하려면 코드을 사용합니다. 이것은 파이어 폭스에서 잘 작동하지만 크롬이 오류가 표시

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입니다. 그러나 구글이 왜이 결정을 내렸고 왜 솔루션을 볼 수 없었는지에 대해서만 설명한다.

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>