📫 📬 🖖🏿 svgをpngへ変換 👶 🏂🏾 👩🏾‍🎨

ブラウザツールを使用してsvgをpngに保存することが必要になる場合があります。残念ながら、ブラウザには、さまざまなハッキングなしでこれを可能にする魔法のAPIがありません。それでも目的を達成したい場合はどうすればよいですか？

私が最初に思いついたのは、 toDataURL('image/png');

メソッドを持つcanvasを介してこれを行うことtoDataURL('image/png');

それで、私は単純なスクリプトを書きました： jsfiddle 、 github ：

 var html = document.querySelector("svg").parentNode.innerHTML; var imgsrc = 'data:image/svg+xml;base64,' + btoa(html); var canvas = document.querySelector("canvas"), context = canvas.getContext("2d"); canvas.setAttribute('width', 526); canvas.setAttribute('height', 233); var image = new Image; image.src = imgsrc; image.onload = function () { context.drawImage(image, 0, 0); var canvasdata = canvas.toDataURL("image/png"); var a = document.createElement("a"); a.textContent = "save"; a.download = "export_" + Date.now() + ".png"; a.href = canvasdata; document.body.appendChild(a); canvas.parentNode.removeChild(canvas); };

スクリプトの本質は簡単です。svgをdataUriに変換し、イメージ経由でダウンロードし、キャンバスに絵を描いてpngに変換しました。目標は達成されたようで、リラックスできます。このアプローチはFirefoxとChromeで機能しましたが、 ~~私たちすべてのお気に入りのブラウザで~~ IE、私は素晴らしいエラーを得ました：

事実は、IEは写真が別のホストからダウンロードされたと信じているということです。残念ながら、dataUriのオリジンの設定は失敗します。実際には、ルールの説明はhttps://html.spec.whatwg.org/multipage/scripting.html#security-with-canvas-elementsにあります。もちろん、サーバーを介してsvgをプロキシすることは可能でしたが、すべてが機能しますが、純粋にクライアントソリューションが必要でした。

そして、素晴らしいcanvgライブラリを思い出しました。このライブラリを使用して、キャンバスにsvgを描画し、最初のバージョンのようにtoDataURL("image/png")

ますtoDataURL("image/png")

ます。結果は単純なコードでした： github ：

 var svg = document.querySelector('svg'); var canvas = document.createElement('canvas'); canvas.height = svg.getAttribute('height'); canvas.width = svg.getAttribute('width'); canvg(canvas, svg.parentNode.innerHTML.trim()); var dataURL = canvas.toDataURL('image/png'); var data = atob(dataURL.substring('data:image/png;base64,'.length)), asArray = new Uint8Array(data.length); for (var i = 0, len = data.length; i < len; ++i) { asArray[i] = data.charCodeAt(i); } var blob = new Blob([asArray.buffer], {type: 'image/png'}); saveAs(blob, 'export_' + Date.now() + '.png');

ここで、 FileSaverライブラリを使用して保存ダイアログボックスを呼び出すこともできます。

それだけです、私たちは望ましい結果を達成しました。

1つのニュアンスに注目する価値があります。tauChartsをエクスポートするためのプラグインを作成したときに、svgをpngに保存する方法を知りました。 svgのスタイルは、元のsvgと最大限の類似性を実現するために外部ファイルから設定されるため、インラインスタイルをsvgに挿入します。そして、我々はそのような結果を得る。

この記事がお役に立てば幸いです。

svgをpngへ変換

More articles: