SVG dataUrlをbase64に変換する

Question

divからSVGコンテンツを生成するためにプラグイン（dom-to-image）を使用しています。プット場合<img src上の画像は、通常に示されている。この

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

： それはこのように私にdataURLを返します。

このdataURLを取得し、それをbase64に変換して、モバイルアプリでimage.pngとして保存できるようにすることです。

それは可能ですか？

私はこの解決策を試しましたhttps://stackoverflow.com/a/28450879/1691609 しかし、うまくいきません。 dataUrl

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

==== UPDATEについてコンソール火エラー:: PROBLEM説明/ HISTORY ====

私はイオン性フレームワークを使用していますので、私のプロジェクトは、モバイルアプリです。 dom-to-imageは現在で動作しているです。そのレンダリングは、からPNGまでのPNGをレンダリングします。 問題はラスターPNGがぼやけていることです。

だから、私は考えました。たぶん、SVGの方が品質が良いでしょう。 それはIS !!その100％完璧な、実際には。

Ionicでは、2段階の手順で画像を保存しています。 dom-to-img（base64）dataURLによって生成されたPNGを取得した後、それをBlobに変換してデバイスに保存します。 これは動作していますが、私が言ったように最終的な結果はぼやけています。

次に、SVGを使用すると、たぶん「高品質」になるでしょう。

ので、すでに作業sのプロセスの「最小限」の変更を行うために：

.... DIはちょうどbase64でdataURLにSVGを変換する必要があるのか​​、あなたのいくつかは私に説明したように、/

===

申し訳ありませんが長い記事のために、と私は本当に、本当にあなたの助けみんなに感謝!!：何か他のものの中に、キャンバスのような... は、私がどのくらいかわかりません私はあなたの場合は動作しない理由を見つけようとしていないよ

Answer 1

、ここで私が行うに似た何かを持っていたとき、私がやった方法です：

• 画像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>