使用瀏覽器將 SVG 圖像轉換為 base64 PNG
[英]Converting SVG images to base64 PNG with browser
問題描述
I'm trying to convert a bunch of siblings SVG images to base64 PNG strings, using just the browser and plain Javascript, but for some reason beyond my knowledge I get the base64 PNG string of only the last SVG. 這是 HTML 片段：
<html> <head><title>Browser SVG to PNG Converter</title></head> <body bgcolor="#DDDDEE"> <h1>Browser SVG to PNG Converter</h1> <div id="div_svg"> <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150"> <rect width="100%" height="100%" style="stroke-width:0;fill:rgb(35,235,235);" /> <rect x="30" y="15" width="90" height="120" style="stroke:#000000;stroke-width:1;fill:none;" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="130" height="150"> <rect width="100%" height="100%" style="stroke-width:0;fill:rgb(35,200,35);" /> <rect x="30" y="30" width="70" height="90" style="stroke:#000000;stroke-width:2;fill:none;" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150"> <rect width="100%" height="100%" style="stroke-width:0;fill:rgb(35,235,235);" /> <rect x="30" y="15" width="90" height="120" style="stroke:#000000;stroke-width:3;fill:none;" /> </svg> </div> <br /> <button id="btn_convert">Convert SVG to PNG and display it below</button> <br /> <br /> <canvas id="aux_canvas" style="display:none;"></canvas> <textarea id="output_png" style="width:90vw;height:40vh;display:block;">base64 PNG source will be displayed here:</textarea> <script> document.getElementById('btn_convert').addEventListener('click', function() { var svg_all = document.getElementById('div_svg').querySelectorAll('svg'); var canvas = document.getElementById('aux_canvas'); var win = window.URL || window.webkitURL || window; var img = new Image(); img.addEventListener("load", function() { canvas.getContext('2d').drawImage(img, 0, 0); win.revokeObjectURL(url); document.getElementById('output_png').value += "\n\n" + canvas.toDataURL("image/png"); }); for(let i = 0; i < svg_all.length; i++) { let svg = svg_all[i]; canvas.width = svg.getBoundingClientRect().width; canvas.height = svg.getBoundingClientRect().height; var data = new XMLSerializer().serializeToString(svg); var blob = new Blob([data], { type: 'image/svg+xml' }); var url = win.createObjectURL(blob); document.getElementById('output_png').value += "\nGoing to load image..." img.src = url; document.getElementById('output_png').value += "\nEnded loading image..." } }); </script> </body> </html>
Input as hardcoded SVG and output to textarea are only for testing purposes, my ultimate goal is a Javascript function getting an array of SVG sources and returning the corresponding PNG images as an array of base64 strings.
1 個解決方案
解決方案1
2 已采納 2022-06-29 15:15:07
圖像加載是異步的，您必須等待每個圖像加載后才能移動到下一個圖像，將Promise與asyn一起使用，並在每次加載之前await 。
這是一個工作示例
const svgString = ` <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150"> <rect width="100%" height="100%" style="stroke-width:0;fill:rgb(35,235,235);" /> <rect x="30" y="15" width="90" height="120" style="stroke:#000000;stroke-width:1;fill:none;" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="130" height="150"> <rect width="100%" height="100%" style="stroke-width:0;fill:rgb(35,200,35);" /> <rect x="30" y="30" width="70" height="90" style="stroke:#000000;stroke-width:2;fill:none;" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150"> <rect width="100%" height="100%" style="stroke-width:0;fill:rgb(35,235,235);" /> <rect x="30" y="15" width="90" height="120" style="stroke:#000000;stroke-width:3;fill:none;" /> </svg>`; const div = document.createElement("div"); div.innerHTML = svgString; const svgs = div.querySelectorAll("svg"); const convertButton = document.querySelector("#btn_convert"); const output = document.querySelector("#output_png"); const img = document.createElement("img"); const canvas = document.createElement("canvas"); const ctx = canvas.getContext('2d'); const URL = window.URL || window.webkitURL || window; convertButton.onclick = async () => { for(let i = 0; i < svgs.length; i++) { output.value += "\n---- Going to load image... \n\n"; output.value += await svgToBase64(svgs[i]); output.value += "\n---- Ended loading image... \n\n"; } }; async function svgToBase64(svg) { const width = svg.getAttribute("width"); const height = svg.getAttribute("height"); canvas.width = width; canvas.height = height; const data = new XMLSerializer().serializeToString(svg); console.log(data) const blob = new Blob([data], { type: 'image/svg+xml' }); console.log(blob) var url = URL.createObjectURL(blob); return new Promise((resolve) => { img.onload = () => { ctx.drawImage(img, 0, 0); URL.revokeObjectURL(url); resolve(canvas.toDataURL("image/png")); } img.src = url; }); }
body { background: #DDDDEE; }
<h1>Browser SVG to PNG Converter</h1> <br /> <button id="btn_convert">Convert SVG to PNG and display it below</button> <br /> <br /> <textarea id="output_png" style="width:90vw;height:40vh;display:block;">base64 PNG source will be displayed here:</textarea>
如何在Google圖表中的svg中獲取帶有圖片的png（base64）？
[英]How can I get png(base64) with images inside of svg in Google Charts?
如何在javascript中將base64 png字符串轉換為base64 svg字符串？
[英]How to convert a base64 png string to base64 svg string in javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.