目的と実現方法
JavaScriptのみで、dot言語をpng画像に変換し、HTML上に出力したいです。そのために「dot言語→SVG→canvas→png画像」の順で変換することにしました。
発生している問題
Viz.jsによって「dot言語→SVG」の変換はできています。しかし「SVG→canvas」の箇所で、画像が透明になって出力されてしまいます。
つまり、下記の"dotToSVGElement"関数は正常に動いていますが、"SVGElementToPng"関数で不具合が発生しています。
出力結果の画像は、ブラウザの開発者ツール(F12)にあるApplicationタブから、確認しています。使用ブラウザはChromeです。
該当のソースコード
HTML
1<body> 2<img id="graph"> 3<script type="text/javascript" src="https://unpkg.com/viz.js@1.8.0"></script> 4</body>
JavaScript
1const dot = `graph G {A--B; B--C;}`; 2 3function dotToPng(dot) { 4 const output = document.getElementById("graph");// img 5 const svg = dotToSVGElement(dot); 6 SVGElementToPng(output, svg); 7 document.getElementById("svg").appendChild(svg); 8 console.log(dot, svg); 9} 10 11function dotToSVGElement(dot) { 12 const container = document.createElement("div"); 13 container.innerHTML = Viz(dot, {format: "svg"}); 14 return container.querySelector("svg"); 15} 16 17function SVGElementToPng(output, svg) { 18 const image = new Image(); 19 image.addEventListener("load", () => { 20 const width = svg.getAttribute("width"); 21 const height = svg.getAttribute("height"); 22 const canvas = document.createElement("canvas"); 23 24 canvas.setAttribute("width", width); 25 canvas.setAttribute("height", height); 26 27 const context = canvas.getContext("2d"); 28 context.drawImage(image, 0, 0, width, height); 29 30 const dataUrl = canvas.toDataURL("image/png"); 31 output.src = dataUrl; 32 }); 33 34 const svgData = new XMLSerializer().serializeToString(svg); 35 const svgDataBase64 = btoa(unescape(encodeURIComponent(svgData))); 36 const svgDataUrl = `data:image/svg+xml;charset=utf-8;base64,${svgDataBase64}`; 37 38 image.src = svgDataUrl; 39} 40 41dotToPng(dot);
知りたいこと
SVGをcanvasに変換したときに、透明にならないようにするためには、どのようにソースを変更すればよいのでしょうか?
参考にしたサイト
https://zenn.dev/tatsuyasusukida/articles/javascript-svg-png
https://qiita.com/basho/items/431af27b2fc6e90c9469
【追記】変数svgDataUrlのアドレス
data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iNjJwdCIgaGVpZ2h0PSIxODhwdCIgdmlld0JveD0iMC4wMCAwLjAwIDYyLjAwIDE4OC4wMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CjxnIGlkPSJncmFwaDAiIGNsYXNzPSJncmFwaCIgdHJhbnNmb3JtPSJzY2FsZSgxIDEpIHJvdGF0ZSgwKSB0cmFuc2xhdGUoNCAxODQpIj4KPHRpdGxlPkc8L3RpdGxlPgo8cG9seWdvbiBmaWxsPSIjZmZmZmZmIiBzdHJva2U9InRyYW5zcGFyZW50IiBwb2ludHM9Ii00LDQgLTQsLTE4NCA1OCwtMTg0IDU4LDQgLTQsNCIvPgo8IS0tIEEgLS0+CjxnIGlkPSJub2RlMSIgY2xhc3M9Im5vZGUiPgo8dGl0bGU+QTwvdGl0bGU+Cjxwb2x5Z29uIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzY5Njk2OSIgcG9pbnRzPSI1NCwtMTgwIDAsLTE4MCAwLC0xNDQgNTQsLTE0NCA1NCwtMTgwIi8+Cjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjI3IiB5PSItMTU3LjgiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0LjAwIiBmaWxsPSIjNjk2OTY5Ij5BPC90ZXh0Pgo8L2c+CjwhLS0gQiAtLT4KPGcgaWQ9Im5vZGUyIiBjbGFzcz0ibm9kZSI+Cjx0aXRsZT5CPC90aXRsZT4KPHBvbHlnb24gZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjk2OTY5IiBwb2ludHM9IjU0LC0xMDggMCwtMTA4IDAsLTcyIDU0LC03MiA1NCwtMTA4Ii8+Cjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjI3IiB5PSItODUuOCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTQuMDAiIGZpbGw9IiM2OTY5NjkiPkI8L3RleHQ+CjwvZz4KPCEtLSBBJiM0NTsmIzQ1O0IgLS0+CjxnIGlkPSJlZGdlMSIgY2xhc3M9ImVkZ2UiPgo8dGl0bGU+QS0tQjwvdGl0bGU+CjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzY5Njk2OSIgZD0iTTI3LC0xNDMuODMxNEMyNywtMTMzIDI3LC0xMTkuMjg3NiAyNywtMTA4LjQxMzMiLz4KPC9nPgo8IS0tIEMgLS0+CjxnIGlkPSJub2RlMyIgY2xhc3M9Im5vZGUiPgo8dGl0bGU+QzwvdGl0bGU+Cjxwb2x5Z29uIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzY5Njk2OSIgcG9pbnRzPSI1NCwtMzYgMCwtMzYgMCwwIDU0LDAgNTQsLTM2Ii8+Cjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjI3IiB5PSItMTMuOCIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTQuMDAiIGZpbGw9IiM2OTY5NjkiPkM8L3RleHQ+CjwvZz4KPCEtLSBCJiM0NTsmIzQ1O0MgLS0+CjxnIGlkPSJlZGdlMiIgY2xhc3M9ImVkZ2UiPgo8dGl0bGU+Qi0tQzwvdGl0bGU+CjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzY5Njk2OSIgZD0iTTI3LC03MS44MzE0QzI3LC02MSAyNywtNDcuMjg3NiAyNywtMzYuNDEzMyIvPgo8L2c+CjwvZz4KPC9zdmc+

回答2件
あなたの回答
tips
プレビュー