实现图片格式转换功能：原理与前端实现

最新推荐文章于 2025-06-05 10:39:58 发布
最新推荐文章于 2025-06-05 10:39:58 发布
阅读量2.6k 收藏 77
点赞数 59
CC 4.0 BY-SA版权
分类专栏： 猫村科技 Vue3 前端 文章标签： 前端 Canvas Vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26854355/article/details/144609099

开篇

本文基于工具小站-图片模块-格式转换功能，做了一个简单的总结。

格式转换原理

  • 图像加载

这里可以使用HTML的img标签或者js中的Image对象来完成,从而获取到图像的像素数据。

  • 使用canvas绘制图像

将加载完成的图像绘制在canvas上，便于操作像素数据。

  • 转换图像格式

和压缩图像一样，这里用到的也适合canvas中的toBlob()方法，不过压缩图片用到的是toBlob()方法的第三个参数（quality），而这里用到的是它的第二个参数。

  • 下载转换后的图像

通过Blob对象生成一个URL，并通过a标签实现下载。

代码逻辑

<template>
  <div class="app-container">
    <header class="app-header">
      <h1>图片格式转换</h1>
      <p class="subtitle">支持多种图片格式之间的相互转换</p>
    </header>

    <main class="main-content">
      <!-- Tab 切换 -->
      <el-tabs v-model="activeTab" class="convert-tabs">
        <el-tab-pane label="单个转换" name="single">
          <!-- 单个转换的内容 -->
          <!-- 上传区域 -->
          <div class="upload-section" v-if="!currentImage">
            <el-upload
              class="upload-drop-zone"
              drag
              :auto-upload="false"
              accept="image/*"
              :show-file-list="false"
              @change="handleFileChange"
            >
              <el-icon class="upload-icon"><upload-filled /></el-icon>
              <div class="upload-text">
                <h3>将图片拖到此处，或点击上传</h3>
                <p>支持 PNG、JPG、WebP、GIF 等格式</p>
              </div>
            </el-upload>
          </div>

          <!-- 转换区域 -->
          <div v-else class="convert-section">
            <div class="preview-section">
              <div class="image-preview">
                <img :src="previewUrl" alt="预览图" />
              </div>
              <div class="image-info">
                <p>文件名：{{ currentImage.name }}</p>
                <p>
                  原始格式：{{ currentImage.type.split("/")[1].toUpperCase() }}
                </p>
                <p>文件大小：{{ formatFileSize(currentImage.size) }}</p>
              </div>
            </div>

            <div class="convert-controls">
              <el-form :model="convertSettings" label-position="top">
                <el-form-item label="目标格式">
                  <el-select
                    v-model="convertSettings.format"
                    class="format-select"
                  >
                    <el-option
                      v-for="format in supportedFormats"
                      :key="format.value"
                      :label="format.label"
                      :value="format.value"
                    />
                  </el-select>
                </el-form-item>

                <el-form-item label="图片质量" v-if="showQualitySlider">
                  <el-slider
                    v-model="convertSettings.quality"
                    :min="1"
                    :max="100"
                    :format-tooltip="(value) => value + '%'"
                  />
                </el-form-item>
              </el-form>

              <div class="action-buttons">
                <el-button
                  type="primary"
                  @click="convertImage"
                  :loading="converting"
                >
                  开始转换
                </el-button>
                <el-button @click="resetImage">重新选择</el-button>
                <el-button
                  type="success"
                  @click="downloadImage"
                  :disabled="!convertedImage"
                >
                  下载图片
                </el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="批量转换" name="batch">
          <!-- 批量转换的内容 -->
          <div class="batch-convert-section">
            <!-- 批量上传区域 -->
            <div class="upload-section" v-if="!batchFiles.length">
              <el-upload
                class="upload-drop-zone"
                drag
                multiple
                :auto-upload="false"
                accept="image/*"
                :show-file-list="false"
                @change="handleBatchFilesChange"
              >
                <el-icon class="upload-icon"><upload-filled /></el-icon>
                <div class="upload-text">
                  <h3>将多张图片拖到此处，或点击上传</h3>
                  <p>支持 PNG、JPG、WebP、GIF 等格式</p>
                </div>
              </el-upload>
            </div>

            <!-- 批量文件列表和转换控制 -->
            <div v-else class="batch-files-section">
              <!-- 批量转换设置 -->
              <div class="batch-controls">
                <el-form :model="convertSettings" label-position="top">
                  <el-form-item label="目标格式">
                    <el-select
                      v-model="convertSettings.format"
                      class="format-select"
                    >
                      <el-option
                        v-for="format in supportedFormats"
                        :key="format.value"
                        :label="format.label"
                        :value="format.value"
                      />
                    </el-select>
                  </el-form-item>

                  <el-form-item label="图片质量" v-if="showQualitySlider">
                    <el-slider
                      v-model="convertSettings.quality"
                      :min="1"
                      :max="100"
                      :format-tooltip="(value) => value + '%'"
                    />
                  </el-form-item>
                </el-form>

                <div class="action-buttons">
                  <el-button
                    type="primary"
                    @click="convertBatchImages"
                    :loading="converting"
                  >
                    开始转换
                  </el-button>
                  <el-button @click="resetBatchFiles">重新选择</el-button>
                  <el-button
                    type="success"
                    @click="downloadAllImages"
                    :disabled="!hasConvertedFiles"
                  >
                    下载全部
                  </el-button>
                </div>
              </div>

              <!-- 文件列表 -->
              <div class="files-list">
                <el-table :data="batchFiles" style="width: 100%">
                  <el-table-column label="文件名" prop="name" />
                  <el-table-column label="原始格式" width="120">
                    <template #default="{ row }">
                      {{ row.type.split("/")[1].toUpperCase() }}
                    </template>
                  </el-table-column>
                  <el-table-column label="状态" width="120">
                    <template #default="{ row }">
                      <el-tag :type="getStatusType(row.status)">
                        {{ getStatusText(row.status) }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="120" align="center">
                    <template #default="{ row }">
                      <el-button
                        link
                        type="primary"
                        @click="downloadSingleImage(row)"
                        :disabled="!row.convertedBlob"
                      >
                        下载
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </main>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { UploadFilled } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

// 当前激活的 tab
const activeTab = ref("single");

// 支持的格式列表
const supportedFormats = [
  { label: "PNG", value: "png" },
  { label: "JPEG", value: "jpeg" },
  { label: "WebP", value: "webp" },
];

// 单个转换相关的状态变量
const currentImage = ref(null);
const previewUrl = ref("");
const convertedImage = ref(null);
const converting = ref(false);

// 批量转换相关的状态变量
const batchFiles = ref([]);

// 转换设置
const convertSettings = ref({
  format: "png",
  quality: 90,
});

// 是否显示质量滑块
const showQualitySlider = computed(() =>
  ["jpeg", "webp"].includes(convertSettings.value.format)
);

// 是否有已转换文件
const hasConvertedFiles = computed(() =>
  batchFiles.value.some((file) => file.convertedBlob)
);

// 处理单个文件上传
const handleFileChange = (file) => {
  const fileObj = file.raw;
  if (!fileObj) return;

  // 验证是否为图片
  if (!fileObj.type.startsWith("image/")) {
    ElMessage.error("请上传图片文件");
    return;
  }

  currentImage.value = fileObj;
  previewUrl.value = URL.createObjectURL(fileObj);
};

// 处理批量文件上传
const handleBatchFilesChange = (file) => {
  const fileObj = file.raw;
  if (!fileObj) return;

  // 验证是否为图片
  if (!fileObj.type.startsWith("image/")) {
    ElMessage.error("请上传图片文件");
    return;
  }

  // 添加到文件列表
  batchFiles.value.push({
    id: Date.now() + Math.random(),
    name: fileObj.name,
    type: fileObj.type,
    file: fileObj,
    status: "pending", // pending, converting, done, error
    convertedBlob: null,
  });
};

// 转换单个图片
const convertImage = async () => {
  if (!currentImage.value || converting.value) return;

  converting.value = true;
  try {
    const blob = await convertSingleImage(currentImage.value);
    convertedImage.value = blob;
    ElMessage.success("转换成功");
  } catch (error) {
    ElMessage.error("转换失败，请重试");
    console.error(error);
  } finally {
    converting.value = false;
  }
};

// 转换批量图片
const convertBatchImages = async () => {
  if (converting.value) return;
  converting.value = true;

  try {
    for (const file of batchFiles.value) {
      if (file.status === "done") continue;

      file.status = "converting";
      try {
        const blob = await convertSingleImage(file.file);
        file.convertedBlob = blob;
        file.status = "done";
      } catch (err) {
        file.status = "error";
        ElMessage.error(`转换失败: ${file.name}`);
      }
    }
  } finally {
    converting.value = false;
  }
};

// 图片转换核心逻辑
const convertSingleImage = async (file) => {
  return new Promise((resolve, reject) => {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    const img = new Image();

    img.onload = () => {
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);

      const quality = ["jpeg", "webp"].includes(convertSettings.value.format)
        ? convertSettings.value.quality / 100
        : undefined;

      canvas.toBlob(
        (blob) => {
          if (blob) {
            resolve(blob);
          } else {
            reject(new Error("转换失败"));
          }
        },
        `image/${convertSettings.value.format}`,
        quality
      );
    };

    img.onerror = () => reject(new Error("图片加载失败"));
    img.src = URL.createObjectURL(file);
  });
};

// 下载单个转换后的图片
const downloadImage = () => {
  if (!convertedImage.value) return;

  const link = document.createElement("a");
  const fileName = currentImage.value.name.split(".")[0];
  link.download = `${fileName}.${convertSettings.value.format}`;
  link.href = URL.createObjectURL(convertedImage.value);
  link.click();
};

// 下载批量转换后的单个图片
const downloadSingleImage = (file) => {
  if (!file.convertedBlob) return;

  const link = document.createElement("a");
  const fileName = file.name.split(".")[0];
  link.download = `${fileName}.${convertSettings.value.format}`;
  link.href = URL.createObjectURL(file.convertedBlob);
  link.click();
};

// 下载所有转换后的图片
const downloadAllImages = () => {
  batchFiles.value
    .filter((file) => file.convertedBlob)
    .forEach((file) => downloadSingleImage(file));
};

// 重置单个转换
const resetImage = () => {
  currentImage.value = null;
  previewUrl.value = "";
  convertedImage.value = null;
  convertSettings.value.format = "png";
  convertSettings.value.quality = 90;
};

// 重置批量转换
const resetBatchFiles = () => {
  batchFiles.value = [];
};

// 格式化文件大小
const formatFileSize = (bytes) => {
  if (bytes === 0) return "0 B";
  const k = 1024;
  const sizes = ["B", "KB", "MB", "GB"];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`;
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    pending: "待处理",
    converting: "转换中",
    done: "已完成",
    error: "失败",
  };
  return statusMap[status];
};

// 获取状态类型
const getStatusType = (status) => {
  const typeMap = {
    pending: "info",
    converting: "warning",
    done: "success",
    error: "danger",
  };
  return typeMap[status];
};
</script>

<style scoped>
.app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.app-header {
  text-align: center;
  margin-bottom: 3rem;
}

.app-header h1 {
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.subtitle {
  color: var(--text-secondary);
  font-size: 1.1rem;
}

/* Tab 相关样式 */
.convert-tabs {
  background: var(--card-background);
  border-radius: var(--border-radius);
  padding: 2rem;
  box-shadow: var(--shadow-lg);
}

.convert-tabs :deep(.el-tabs__nav-wrap::after) {
  height: 1px;
  background-color: var(--border-color);
}

.convert-tabs :deep(.el-tabs__item) {
  font-size: 1.1rem;
  padding: 0 2rem;
}

.convert-tabs :deep(.el-tabs__item.is-active) {
  color: #34c759;
}

.convert-tabs :deep(.el-tabs__active-bar) {
  background-color: #34c759;
}

/* 上传区域样式 */
.upload-section {
  background: var(--card-background);
  border-radius: var(--border-radius);
  padding: 2rem;
}

.upload-drop-zone {
  border: 2px dashed #e5e5e5;
  border-radius: var(--border-radius);
  padding: 3rem 1rem;
  transition: all 0.3s ease;
}

.upload-drop-zone:hover {
  border-color: #34c759;
  background: rgba(52, 199, 89, 0.04);
}

.upload-icon {
  font-size: 3rem;
  color: #909399;
  margin-bottom: 1rem;
}

/* 转换区域样式 */
.convert-section,
.batch-files-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

.preview-section {
  text-align: center;
}

.image-preview {
  margin-bottom: 1rem;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.image-preview img {
  max-width: 100%;
  height: auto;
}

.image-info,
.convert-controls,
.batch-controls {
  padding: 2rem;
  background: rgba(245, 245, 247, 0.6);
  border-radius: var(--border-radius);
}

.format-select {
  width: 100%;
}

.action-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

/* 批量转换特有样式 */
.batch-files-section {
  grid-template-columns: 1fr;
}

.files-list {
  margin-top: 2rem;
}

:deep(.el-button--primary) {
  background: var(--primary-gradient);
  border: none;
}
</style>

效果截图演示

在这里插入图片描述在这里插入图片描述

能看到，已经转换为了png格式。

注

以上，便是图片格式转换功能的简单总结，感谢阅读w

JavaScript实现图片格式转换（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-23 657
JavaScript实现图片格式转换（附完整源码）
Django 实现前端图片压缩功能的方法
09-18
本文将探讨如何在Django中实现前端图片压缩功能。 首先，我们需要理解图片压缩的基本原理。图片压缩通常是通过减小图片的尺寸和/或降低其质量来实现的。在Django中，我们可以利用Python Imaging Library (PIL) 来...
前端图片canvas，file，blob，DataURL等格式转换
weixin_33922670的博客
06-03 545
将file转化成base64 方法一：利用URL.createObjectURL() 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>base</title> 5 </head> 6 <body> 7 <input t...
图片格式转化功能实现
最新发布
m0_67078501的博客
06-05 220
摘要：imgTypeChange.js封装了一个高效的图片格式转换组件，提供以下核心功能：1. 支持图片转Canvas（使用naturalWidth获取原始尺寸）和Canvas转Blob（可配置质量参数）；2. 采用Promise异步处理流程，包含通用文件读取处理器；3. 主转换方法支持格式转换和规范文件名处理。业务应用时可通过convertImageFormat方法实现格式统一化处理，与上传逻辑解耦。组件优化了性能（减少临时变量）和扩展性（processorFn独立单元），并完善了异常处理机制。典型使用场
前端图片格式的转换
时漂亮的博客
07-16 1252
【代码】前端js图片转base64格式。
asp.net 将bmp格式图片怎么转换为jpg_PNG图片怎么转换成JPG？原来还可以这么转换...
weixin_39844525的博客
10-30 259
PNG和JPG的区别是，对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但PNG与JPG相比，PNG格式的文件容量比较大，不适合日常的传播流通。如果需要上传的图片的网页不支持PNG格式的图片上传，这时就需要将PNG图片的格式进行转换。有的人说我不会用制图软件将PNG图片怎么转换成JPG怎么办？下面小编就分享一个将PNG图片转换成JPG的方法，希望可以帮助到你。方法步骤：1.我个人觉得用的比较多...
前端转换图片格式 前端将png格式图片转成jpg格式 前端用使用canvas转换图片格式
qq_41287158的博客
02-22 6063
在开发中，遇到这样一个需求。由于我们的照片是要下发到设备上，而我们的设备只支持jpg格式的图片。那么我们不能限制用户只选择jpg图片进行上传，这样用户体验极差。 解决方案：用canvas转换图片的格式 1、把转换的方法单独放在imgTypeChange.js中 imgTypeChange.js文件 // 把image 转换为 canvas对象 function imgToCanvas(image) { let canvas = document.createElement("canvas"); c
前端实现图片预览功能js jq
04-09
2. 使用`FileReader` API读取图片文件，`readAsDataURL`方法将文件转换为Base64编码的字符串，这是可以直接作为`<img>`标签`src`的格式。 3. 创建一个新的`<img>`元素，将其`src`设置为Base64编码的字符串。 4. 将`...
PHP文字转图片功能原理与实现方法分析
10-19
验证码的原理与文字转图片类似，只是在转换过程中会进一步增加图片的复杂性，比如添加背景干扰线、颜色扭曲、文字变形等技术，从而使得机器难以识别和自动输入。 最后，对于PHP的更多图形和图像操作技巧、面向对象...
前端技术分享 编辑器的实现与原理 共41页.pdf
06-09
前端技术分享 编辑器的实现与原理 编辑器是前端技术中一个非常重要的组件，它可以帮助用户快速地编辑和格式化文本内容。在这篇文章中，我们将从编辑器的实现和原理入手，深入探讨编辑器的组成要素、UEditor的设计和...
JS屏幕截图插件：实现Web前端截图功能
在Web前端实现屏幕截图功能，通常涉及到以下几个关键技术点: - Canvas API: Canvas API 是HTML5的一部分，它提供了一种在网页上绘制图形的方式。它可以捕获网页或网页的某个部分的像素数据，并且可以将这些数据保存...
JQ JS javascript 普通图片上传 图片格式转换 图片base64转换 jpg转base64 png转base64
04-18
JQ JS javascript 普通图片上传 图片格式转换 图片base64转换 jpg转base64 png转base64
js+canvas实现图片格式webp/png/jpeg在线转换
11-19
功能需求： 我们在网页中上传一张图片，选择不同的格式，将该图片转换为对应的格式。 实现思路： 实现这样的功能，使用后端语言【php,java等】可以很容易的完成。但是如果只在前端如何完成呢？ 1、通过input上传图片，使用FileReader将文件读取到内存中。 2、将图片转换为canvas，canvas.toDataURL()方法设置为我们需要的格式，如：”image/webp”,”image/jpeg”,”image/png”。 3、最后将canvas转换为图片，显示在网页中。点击右键保存，就得到了不同格式的图片了。 toDataURL说明： 方法返回一个包含图片展示的 data URI
图像格式转换算法原理
10-23
图像格式转换算法原理，文章分析了各个图像格式，并提出了转换方式
前端 - 将非 jpeg 格式图片转为 jpeg 格式、压缩图片
工作中遇到问题记录
10-12 399
前端 - 将非 jpeg 格式图片转为 jpeg 格式、压缩图片
【前端技巧】图片格式转换（File、Blob、base64）
Outman's blog
11-17 6369
图片格式转换（File、Blob、base64）
前端Img图片不同格式的互相转化
qq_44930306的博客
04-20 3967
这章主要分享平时前后端对于img的格式互转上的使用，以及前端如何在视图今进行展示。
用JS实现图片格式的转换
WanFengZhou
11-04 3599
html代码： <div class="wrap"> <div class="wrap_info"> <div class="btn select_img"> 选择图片<input type="file" id="inputimg" /> </div> <div class="image_name"></
JS图片(文件)格式转换
Rain022111的博客
03-22 1399
一起请求加载，不会再单独进行请求加载,可以防止由于图片路径错误导致图片加载失败的问题;则是异步操作，接收一个回调函数，避免同步阻塞进程。是将图片导出生成二进制文件，处理速度会快很多;是同步执行，直接返回结果；位编码后，图片会跟随代码。
Silverlight实现图片像素与格式自动转换技术
图片格式转换是指将图片文件从一种格式转换成另一种格式。常见的图片格式包括但不限于JPEG、PNG、GIF、BMP等。不同格式适用于不同的场景。例如，JPEG通常用于照片和网络上，因为它能很好地压缩图像；PNG则常用于网络...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值