网上保存的图片是webp类型的，但是我把它嵌入flac格式的音频里后导致网页中无法播放
wps要会员，真麻烦。
完整代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebP to PNG Converter</title>
<style>
.input-area {
margin-bottom: 10px;
}
.output-area {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="input-area">
<input type="file" id="webp-input" accept=".webp" onchange="javascript:preview()" />
<div id="img-preview">
</div>
<button onclick="convertWebp('image/png')">转换成png</button>
<button onclick="convertWebp('image/jpg')">转换成jpg</button>
</div>
<div class="output-area" id="output-area">
<!-- 下载链接将在这里动态生成 -->
</div>
<script>
function preview(){
const imgContent = document.getElementById('img-preview');
const file = document.getElementById("webp-input").files[0];
imgContent.innerHTML = '';
const img = document.createElement('img');
img.src = URL.createObjectURL(file);
imgContent.appendChild(img);
img.onload = function() {
URL.revokeObjectURL(this.src);
}
}
function convertWebp(mimeType) {
const inputElement = document.getElementById('webp-input');
const file = inputElement.files[0];
if (!file) {
alert('Please select a WebP file first.');
return;
}
const reader = new FileReader();
reader.onload = function(event) {
const img = new Image();
img.onload = function() {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, img.width, img.height);
const pngUrl = canvas.toDataURL(mimeType);
const link = document.createElement('a');
link.href = pngUrl;
if(mimeType === 'image/png'){
link.download = 'converted.png';
}else if(mimeType === 'image/jpg'){
link.download = 'converted.jpg';
}
document.getElementById('output-area').appendChild(link);
link.click(); // 触发下载
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
}
</script>
</body>
</html>