使用JavaScript转换图片格式

我们可以在现代浏览器中直接转换图片和格式，不需要上传服务器或者使用服务器脚本。

HTML

<!-- 文件上传控件 -->
<input type="file" id="fileInput" accept="image/*" /><!-- 输出格式选择 -->
<select id="formatSelect"><option value="image/jpeg">JPEG</option><option value="image/png">PNG</option><option value="image/webp">WEBP</option><!-- 可以添加更多图片格式 -->
</select><!-- 转换图片按钮 -->
<button id="convertButton">转换图片</button><!-- 导出图片按钮 -->
<a id="downloadButton" style="display: none">下载转换后的图片</a><!-- 这里将展示转换后的图片 -->
<div id="result"></div>

一个 file 类型的 input 用于上传本地图片，一个下拉框用于选择导出图片类型（JPEG、PNG、WEBP），一个按钮点击进行转换，一个 a 标签导出转换后的图片，最后一个 div 显示转换后的图片。

SCRIPT

document.addEventListener("DOMContentLoaded", function () {const fileInput = document.getElementById("fileInput");const formatSelect = document.getElementById("formatSelect");const downloadButton = document.getElementById("downloadButton");fileInput.addEventListener("change", handleFileSelect, false);document.getElementById("convertButton").addEventListener("click",function () {const files = fileInput.files;if (files.length === 0) {alert("Please select a file.");return;}const file = files[0];const reader = new FileReader();reader.onload = function (event) {const img = new Image();img.onload = function () {const dataUrl = convertImageFormat(img,formatSelect.value,0.92); // 92% quality for JPEG/WebPdisplayImage(dataUrl);// 显示下载按钮downloadButton.style.display = "block";// 将转换后的图片的URL设置为下载链接downloadButton.href = dataUrl;console.log(dataUrl);// 设置下载的文件名downloadButton.download ="converted_image." + formatSelect.value.split("/")[1];};img.src = event.target.result;};reader.readAsDataURL(file);},false);function displayImage(dataUrl) {const resultDiv = document.getElementById("result");resultDiv.innerHTML = "";const img = document.createElement("img");img.src = dataUrl;resultDiv.appendChild(img);}// 图片格式转换函数function convertImageFormat(image, outputFormat, quality) {const canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;const ctx = canvas.getContext("2d");ctx.drawImage(image, 0, 0, image.width, image.height);return canvas.toDataURL(outputFormat, quality);}// 文件选择处理function handleFileSelect(event) {const file = event.target.files[0];if (!file.type.match("image.*")) {alert("Please select an image file.");return;}// 隐藏下载按钮直到图片被转换downloadButton.style.display = "none";}
});