공백 PNG/오염 된 캔버스를 내보낼 수 없습니다 (이미지 사용 안 함)

Question

캔버스에 간단한 html을 내보내고 png하려고합니다. 이렇게하려면 rasterizeHTML (http://cburgmer.github.io/rasterizeHTML.js/)을 사용하고 있습니다. 내가 직면하고있는 문제는 외부 이미지/리소스를로드하는 것처럼 경고 메시지가 표시되지만 문제는 아닙니다. 이 내가 시도 것입니다 :

HTML :

<canvas height="500" width="500" id="rasterizer"></canvas> 

자바 스크립트

var canvas=document.getElementById("rasterizer"); 
rasterizeHTML.drawHTML('<div width="300px" height="300px" > <div style="width: 200px;height: 200px;position: absolute;top: 50%;left: 50%;margin: -100px 0 0 -100px;"><div style="width: 100%;height: 100%;border-radius: 50%;position: absolute;top: 0;left: 0;margin: 0;z-index: 1;background: #e4f1ea; ">   </div>   <div style="border-radius: 50%;position: absolute;top: 50%;left: 50%;z-index: 3;background: #b6cfe1;width:73.997475122531%; height:73.997475122531%; margin:-36.998737561265% 0 0 -36.998737561265%"></div>  </div></div>',canvas); 
canvas.toDataURL("image/png"); 

있는 HTML이 단 2 원, 위에 다른 하나를 렌더링합니다. 래스터 라이저는 문제없이 캔버스이 보여줄 수있다, 그러나 나는 두 가지 문제 중 하나 결국 .toDataURL를 실행하려고하면 그것은 내가 처음 실행하는 경우 (

1. 빈 이미지 코드)를 캔버스와 같은 크기로 만듭니다.
2. SecurityError : 'HTMLCanvasElement'에서 'toDataURL'을 (를) 실행하지 못했습니다. 오염 된 캔버스를 내보낼 수 없습니다.

아이디어가 부족합니다. 외부 인력과 함께해야하며, 인라인 -d HTML을 사용하지 않아야합니다. 이것이 일어날 수있는 이유를 아는 사람이 있습니까? 감사.

Answer 1

여기에 직장에서 두 가지가 있습니다

1. 당신은 rasterizeHTML.drawHTML 기다려야 캔버스에서 아무 것도 기대하기 전에 완료가 :

   
   rasterizeHTML.drawHTML('<div...', canvas, function() { 
       var dataUrl = canvas.toDataURL("image/png"); 
       console.log(dataUrl); 
   }); 
   

2. 사파리 & 웹킷은 캔버스에서 다시 읽을 수 없습니다 일단 HTML (실제로는 SVG)이 그려집니다. https://github.com/cburgmer/rasterizeHTML.js/wiki/Browser-issues#wiki-webkit을 참조하십시오. Chrome과 Safari 모두 버그가 있었지만 (다시 링크를 참조하십시오), 그때까지는 Firefox가 슬픈 표정을 읽을 수있는 유일한 브라우저입니다.