65 lines
2.6 KiB
HTML
65 lines
2.6 KiB
HTML
<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> |