使用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/WebP
          displayImage(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";
  }
});

当文档加载完毕后 (DOMContentLoaded 事件被触发时)，代码中定义的函数开始执行。

用户通过一个输入控件选择一个图像文件，并可以选择一个目标格式。

点击一个按钮后，选中的文件读取并转换为所选的图像格式。

图片转换是通过创建一个临时的 canvas 元素，将上传的图片绘制在该元素上，并以指定的格式和质量转换为 DataURL 实现的。

转换后的图片会显示在页面上，并提供一个链接供用户下载。

下载按钮最初是隐藏的，转换完成后会显示出来，并且会将 DataURL 设置为下载链接的href属性，并为转换后的文件指定一个默认的下载名称。