js实现webp转png/jpg

最新推荐文章于 2024-08-04 16:33:59 发布

qx09

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量342

点赞数 3

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_34188180/article/details/137725519

版权

文章描述了一个使用HTML和JavaScript编写的工具，用户可以上传WebP格式的图片，然后将其转换为PNG或JPEG格式。该工具通过创建canvas并绘制图像来实现转换，并提供下载链接。

摘要由CSDN通过智能技术生成

网上保存的图片是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>