仿站网,ajs17网站建设,企业网站建设目的意义,wordpress单栏网上保存的图片是webp类型的#xff0c;但是我把它嵌入flac格式的音频里后导致网页中无法播放 wps要会员#xff0c;真麻烦。 完整代码#xff1a;
!DOCTYPE html
html langzh-CN
head
meta charsetUTF-8…网上保存的图片是webp类型的但是我把它嵌入flac格式的音频里后导致网页中无法播放 wps要会员真麻烦。 完整代码
!DOCTYPE html
html langzh-CN
head
meta charsetUTF-8
meta nameviewport contentwidthdevice-width, initial-scale1.0
titleWebP to PNG Converter/title
style .input-area { margin-bottom: 10px; } .output-area { margin-top: 10px; }
/style
/head
body div classinput-area input typefile idwebp-input accept.webp onchangejavascript:preview() /div idimg-preview/divbutton onclickconvertWebp(image/png)转换成png/buttonbutton onclickconvertWebp(image/jpg)转换成jpg/button
/div div classoutput-area idoutput-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
