將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在畫布變量中正確捕獲。但是，toDataURL行會拋出一個錯誤：「TypeError：'null'不是一個對象（評估'canvas.toDataURL'）」我知道我的示例有點不同，因爲我沒有實際的canvas標記我的HTML，只是將獲得畫布的div。但是，鑑於畫布被正確捕捉，我不明白爲什麼第二行會拋出錯誤。

來源

2014-06-24 AustinC

toDataUrl僅適用於html5 canvas元素，它不會以這種方式爲Raphael嘗試這裏提供的建議http://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc在瀏覽器中 – Loktar

你是說這個問題的第一個答案嗎？那個答案的第2步正是我在這裏所做的。依然似乎依靠toDataURL。我不清楚在這種情況下我將如何使用canvg。 – AustinC

是的，他們使用[此庫]（https://code.google.com/p/canvg/）將svg渲染爲canvas，然後*然後*調用'toDataUrl'。所以基本上你必須首先轉換你的svg，把它繪製到canvas元素上，然後調用'toDataUrl'。 – Loktar

根據上面的建議和raphael.export.js使用canvg，我已經解決了我的問題（種類）。我的小例子，現在工作如下：

<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

回答

相關問題