canvas.toDataUrl返回「data :;」當cavans.width /高度過大

我需要做一個SVG出口png圖片function.First我產生SVG爲Base64，但以base64 code`type是SVG + XML，然後canvas.toDataUrl返回「data :;」當cavans.width /高度過大

var image=new Image(); 
image.src=base64Code; 
image.onload = function() { 
     var canvas = document.createElement('canvas'); 
     var context = canvas.getContext('2d'); 
     canvas.width = image.width; 
     canvas.height = image.width; 
     context.drawImage(image, 0, 0); 
     png = canvas.toDataURL("image/png",1); 
}`

我cavans .width/height可能會非常大，然後我使用cavans.toDataURL返回"data:;"。當cavans.width/height爲normal時，可以生成。有沒有什麼好辦法來解決這個問題？或者使用java讓svg + xml代碼生成爲.png？

來源

2017-05-09 流年灬異彩

當你說非常大，它有多大？大於這些[最大大小]（http://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element）？如果是這樣，是的，不要使用畫布。否則，您可以嘗試['canvas.toBlob']（https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob）方法，這在理論上會減少內存影響，因此應該能夠返回更大的圖像。但是，如果您能夠提供服務器端轉換，那麼使用它就可以獲得比使用javascript更好的效果。 – Kaiido

所以'toBlob'和'toDataURL'具有相同的限制（在我的Chrome上16380 * 16380左右，我的FF上大約11150 * 11150）。但有一件有趣的事情是，對於'toDataURL'，chrome不會返回你得到的字符串，而FF不會拋出'NSIndexError'，對於'toBlob'，chrome在回調函數中返回null，而FF甚至不執行回調，也不會引發任何錯誤... – Kaiido

我tryed使用蠟染生成SVG文件到png文件或SVG代碼png文件，但在我的SVG，它有標籤，該標籤具有標籤，當我生成svg 不顯示 –

畫布元件具有最大尺寸，這將是不同翻過實現。
您可以在this Q/A中找到這些最大尺寸的好列表。

對於出口方法，它們也有限制，較小。
在我的Chrome瀏覽器中，toDataURL返回相同的data:;，因爲您的畫布寬度爲16380 * 16380px左右，而我的Firefox確實會在左右顯示11150 * 11150px左右。其他瀏覽器可能有不同的值。

所以，如果你真的想通過一個畫布，你將有你的畫布的大小限制爲這些地區的最高。

現在，如果你能做到轉換服務器端，然後再去做。例如蠟染已知是一個很好的SVG UA，並且應該能夠正確地轉換你的svgs，除非像你一樣，在SVG的<foreignObject>元素中也有HTML呈現。

在這種情況下，一個無頭的瀏覽器，如phantomjs，允許採取一個渲染頁面的截圖實似乎是最好的方式。

的另一個方法是先畫出你的大SVG到小畫布，併合並所產生的PNG圖像無論是服務器端，或者通過操縱字節（可能需要一些額外的工作）。

來源

2017-05-09 13:20:24 Kaiido

我試過把大畫布限制在很小的地方，並且將得到的png合併到服務器端，非常感謝 –

canvas.toDataUrl返回「data :;」當cavans.width /高度過大

回答

相關問題