將SVG dataUrl轉換爲base64

我正在使用插件（dom-to-image）從div生成SVG內容。它返回我這樣一個dataURL：將SVG dataUrl轉換爲base64

data image/xml, charset utf-8, <svg...

如果在<img src圖像看跌，這是顯示正常。

意圖是抓住這個dataURL，將其轉換爲base64，這樣我就可以將它保存爲image.png在移動應用程序上。

這可能嗎？

我試過這個解決方案https://stackoverflow.com/a/28450879/1691609 但是coudn't開始工作。控制檯火有關dataUrl

TypeError: Failed to execute 'serializeToString' on 'XMLSerializer': parameter 1 is not of type 'Node'.

====更新::問題說明/歷史====

我使用離子型框架的錯誤，所以我的項目是一個移動應用程序。圖像爲已經在工作導致現在，其渲染PNG通過到PN功能。問題是光柵PNG是一個模糊的。

所以我想：也許SVG會有更好的質量。它是！其實100％完美。

在離子，我使用2步驟過程來保存圖像。獲取由dom-img（base64）dataURL生成的PNG後，我將其轉換爲Blob，然後保存到設備中。這是行得通的，但正如我所說，最終的結果是模糊的。

然後用SVG也許它會更「高質量」每說。

所以，爲了做到對公寓已經工作的過程「最小」的變化：DI只需要一個SVG轉換成的base64 dataURL ....

或者，正如一些你向我解釋說，成別的東西，像帆布... 我不知道任何多：/

===

對不起，長的帖子，我真的，真的很感謝你的幫助傢伙！

來源

2016-11-09 Rafael de Castro

您希望您的SVG PNG版本？然後你需要柵格化它。 js的唯一途徑就是通過畫布API。你可以直接用'drawImage'方法繪製你的圖像，但是這在IE瀏覽器中不起作用。你也可以嘗試像canvg這樣的庫，但是你需要首先解析dataURL（做與你指向的Q/A相反的內容）。 base64只是一種字符串編碼，它與圖像的格式無關。 – Kaiido

爲什麼你需要將它轉換爲base64才能將其保存爲圖像PNG？如果你想讓我們確定你爲什麼得到TypeError，我們需要[mcve]。 –

@Kaiido我用一個解釋更新了我的問題：D –

我並不想找出爲什麼你的情況下不能正常工作，這是我如何做，當我有類似的事情做：

獲得圖像sourcce（DOM對圖像結果）
設置與圖像的畫布中（使用圖像源）
在任何你喜歡的圖片畫布下載圖像：PNG，JPEG無論

的方式，你可以將圖像尺寸調整到一個標準格式

document.getElementById('mydownload').onclick= function(){ 
 
    var wrapper = document.getElementById('wrapper'); 
 
    //dom to image 
 
    domtoimage.toSvg(wrapper).then(function (svgDataUrl) { 
 
    //download function  
 
    downloadPNGFromAnyImageSrc(svgDataUrl); 
 
    }); 
 
} 
 
function downloadPNGFromAnyImageSrc(src) 
 
{ 
 
    //recreate the image with src recieved 
 
    var img = new Image; 
 
    //when image loaded (to know width and height) 
 
    img.onload = function(){ 
 
    //drow image inside a canvas 
 
    var canvas = convertImageToCanvas(img); 
 
    //get image/png from convas 
 
    var pngImage = convertCanvasToImage(canvas); 
 
    //download 
 
    var anchor = document.createElement('a'); 
 
    anchor.setAttribute('href', pngImage.src); 
 
    anchor.setAttribute('download', 'image.png'); 
 
    anchor.click(); 
 
    }; 
 
    
 
    img.src = src; 
 

 

 
\t // Converts image to canvas; returns new canvas element 
 
    function convertImageToCanvas(image) { 
 
     var canvas = document.createElement("canvas"); 
 
     canvas.width = image.width; 
 
     canvas.height = image.height; 
 
     canvas.getContext("2d").drawImage(image, 0, 0); 
 
     return canvas; 
 
    } 
 
    
 
    
 
    // Converts canvas to an image 
 
    function convertCanvasToImage(canvas) { 
 
     var image = new Image(); 
 
     image.src = canvas.toDataURL("image/png"); 
 
     return image; 
 
    } 
 
}

#wrapper{ 
 
    background: red; 
 
    color: blue; 
 
}

<script src="https://rawgit.com/tsayen/dom-to-image/master/src/dom-to-image.js"></script> 
 
<button id='mydownload'>Download DomToImage</button> 
 
<div id="wrapper"> 
 
    <img src="http://i.imgur.com/6GvKdxY.jpg"/> 
 
    <div> DUDE IS WORKING</div> 
 
    <img src="http://i.imgur.com/6GvKdxY.jpg"/> 
 
</div>

來源

2016-11-09 15:45:31 SilentTremor

我用一個解釋更新了我的問題：D –

明白了，試着看看這個實現是否會制動下載的圖像，它不應該，正如我在每次使用canvas在客戶端處理圖像時所回答的，但是您是如何選擇的。 – SilentTremor

將SVG dataUrl轉換爲base64

回答

相關問題