我正在嘗試僅使用瀏覽器和純 Javascript 將一堆兄弟 SVG 影像轉換為 base64 PNG 字串，但由于某種我不知道的原因，我只得到了最后一個 SVG 的 base64 PNG 字串。這是 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>作為硬編碼的 SVG 輸入和輸出textarea僅用于測驗目的，我的最終目標是獲取 SVG 源陣列并將相應的 PNG 影像作為 base64 字串陣列回傳的 Javascript 函式。
uj5u.com熱心網友回復：
圖片加載是異步的，你必須等待每張圖片加載完畢才能移動到下一張，在每次加載之前使用Promise。asynawait
這是一個作業示例
const convertButton = document.querySelector("#btn_convert");
const output = document.querySelector("#output_png");
const svgs = document.querySelectorAll("svg");
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, height } = svg.getBoundingClientRect();
canvas.width = width;
canvas.height = height;
const data = new XMLSerializer().serializeToString(svg);
const blob = new Blob([data], {
type: 'image/svg xml'
});
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>
<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 />
<textarea id="output_png" style="width:90vw;height:40vh;display:block;">base64 PNG source will be displayed here:</textarea>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/497618.html
標籤：javascript html svg base64 PNG