<html>
<head>
<meta charset="utf-8">
<title>图片转换</title>
</head>
<body>
<div style="width:80%;margin:0 auto;text-align:center">
<canvas style="position: fixed; left:-100000px" id="canvas"></canvas>
<input onchange="deal()" type="file" id="file" accept=".svg" multiple><br /><br />
<!-- <input type="" -->
<span>请输入图片后缀:</span><input id="filePostfix" type='text' value="bmp"><br /><br />
<button onclick="startDeal()">开始处理</button>
</div>
<script>
let arr = [];
function deal() {
let files = document.getElementById('file').files;
for (let i = 0; i < files.length; i++) {
let reader = new FileReader();
reader.readAsText(files[i]);
reader.onload = function (e) {
arr.push({
name: files[i].name,
content: this.result
})
}
}
}
function startDeal() {
let postfix = document.getElementById('filePostfix').value;
for (let i = 0; i < arr.length; i++) {
let item = arr[i];
console.log(`开始处理：${item.name}`);
let xml = new DOMParser().parseFromString(item.content, 'text/xml');
let svgContent = xml.getElementsByTagName('svg')[0].outerHTML;
let img = new Image();
img.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgContent)));
img.onload = function () {
let canvas = document.getElementById('canvas');
canvas.width = img.width;
canvas.height = img.height;
let ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, img.width, img.height);
let a = document.createElement('a')
a.href = canvas.toDataURL('image/' + postfix);
a.download = item.name.substr(0, item.name.lastIndexOf('.')) + '.' + postfix;
a.click();
if (i == arr.length - 1) {
console.log('处理完毕');
document.getElementById('file').value = '';
ctx.clearRect(0, 0, img.width, img.height);
arr = [];
}
}
}
}
</script>
</body>
</html>