Raphael canvas를 div 안에 PNG로 변환

Raphael을 사용하여 SVG를 만들고 PNG로 변환 한 다음 열려있는 창에 표시하려고합니다. 다른 스택 오버 플로우 응답 like this one을 살펴 봤습니다. 그 질문에 대한 ollieg의 대답을 구현했습니다. 다음은 내가하는 일의 예입니다.Raphael canvas를 div 안에 PNG로 변환

<html> 
    <head> 
     <script src="NBA_test/lib/raphael-min.js"></script> 
    </head> 
    <body> 

    <div id="canvas"></div><br> 

    <script language="JavaScript"> 
    var test=Raphael("canvas",50,50); 
    var rect=test.rect(0,0,50,50); 
    rect.attr({fill: '#fff000'}) 

    window.onload = function() { 
     var canvas = document.getElementById("canvas"); 
     window.location = canvas.toDataURL("image/png"); 
    } 

    </script> 
    </body> 
</html>

노란색 직사각형을 그리고 png로 출력해야합니다. 콘솔은 SVG가 캔버스에서 제대로 캡처되고 있는지 확인합니다. var. 그러나 toDataURL 행은 "TypeError : 'null'이 (canvas.toDataURL '을 평가하는) 객체가 아닙니다."내 예제가 실제 캔버스 태그가 없다는 점에서 조금 다릅니다. 내 HTML, 그냥 캔버스를 얻을 div입니다. 그러나 캔버스가 제대로 캡쳐되고 있다는 것을 감안할 때 두 번째 줄에서 왜 그 오류가 발생하는지 이해하지 못합니다.

출처

2014-06-24 AustinC

toDataUrl은 html5 캔버스 요소에만 해당되며, Raphael에서는 그 방법으로 작동하지 않습니다. 여기에 제안 된 내용을 시도하십시오. http://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc -in-the-browser – Loktar

그 질문에 대한 첫 번째 대답은 무엇입니까? 그 대답의 2 단계는 정확히 여기서 한 것입니다. 여전히 toDataURL에 의존하는 것 같습니다. 이 상황에서 내가 어떻게 canvg를 사용하는지는 분명하지 않습니다. – AustinC

그래, 그들은 [this library] (https://code.google.com/p/canvg/)를 사용하여 svg를 캔버스로 렌더링 한 다음 * to *에서 toDataUrl을 호출합니다. 그래서 기본적으로 여러분의 svg를 캔버스 요소로 가져온 다음 toDataUrl을 호출해야합니다. – Loktar

위의 제안에 따라 canvg를 사용하고 raphael.export.js을 사용하여 문제 (종류)를 해결했습니다.

<html> 
    <head> 
     <script src="lib/raphael-min.js"></script> 
     <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
     <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/StackBlur.js"></script> 
     <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script> 
     <script src="lib/raphael.export.js"></script> 
    </head> 
    <body> 

    <div id="raph_canvas"></div><br> 
    <canvas id="html_canvas" width="50px" height="50px"></canvas> 

    <script language="JavaScript"> 
    var test=Raphael("raph_canvas",50,50); 
    var rect=test.rect(0,0,50,50); 
    rect.attr({fill: '#fff000', 'fill-opacity':1, 'stroke-width':1}) 

    window.onload = function() { 
     var canvas_svg = test.toSVG(); 
     canvg('html_canvas',canvas_svg); 
     var canvas_html = document.getElementById("html_canvas"); 
     window.location = canvas_html.toDataURL("image/png"); 
    } 

    </script> 
    </body> 
</html>

문제는 이제 좀 더 복잡 내 실제 응용 프로그램이 작동하지 않는다는 것입니다,하지만 난 어쩌면에 대한 별도의 질문을 게시 할 예정입니다 : 내 최소한의 예는 이제 다음과 같이 작동합니다.

출처

2014-06-24 19:04:32 AustinC

Raphael canvas를 div 안에 PNG로 변환

답변

관련 문제