nuxt3获取远程图片base64编码功能-小超越工作室

想要实现nuxt3获取远程图片base64编码功能有两种方法

1. 基础通用方案：axios + 原生 Buffer（零额外依赖）

这是最轻量化的方案，Nuxt3 内置了 $fetch（基于 ofetch），无需额外安装 HTTP 库即可实现，核心是通过请求获取图片二进制数据，再转换为 Base64。

使用示例（Nuxt3 组件 / 插件中）：

<script setup lang="ts">
// 定义转换函数
const convertImageToBase64 = async (imageUrl: string) => {
  try {
    // 1. 请求远程图片，获取二进制数据
    const response = await $fetch(imageUrl, {
      method: 'GET',
      responseType: 'arrayBuffer' // 关键：指定响应类型为二进制数组
    });

    // 2. 将 ArrayBuffer 转为 Buffer（Node.js 环境）/ Uint8Array（浏览器）
    const buffer = Buffer.from(response);
    
    // 3. 转换为 Base64（自动处理图片格式）
    const base64 = buffer.toString('base64');
    
    // 4. 拼接完整的 Base64 URL（前端可直接用于 img 标签）
    const mimeType = getImageMimeType(imageUrl); // 辅助函数：获取图片 MIME 类型
    return `data:${mimeType};base64,${base64}`;
  } catch (error) {
    console.error('图片转换 Base64 失败：', error);
    return null;
  }
};

// 辅助函数：根据图片后缀判断 MIME 类型
const getImageMimeType = (url: string) => {
  const ext = url.split('.').pop()?.toLowerCase();
  const mimeMap: Record<string, string> = {
    jpg: 'image/jpeg',
    jpeg: 'image/jpeg',
    png: 'image/png',
    gif: 'image/gif',
    webp: 'image/webp'
  };
  return mimeMap[ext] || 'image/png';
};

// 调用示例
const remoteImageUrl = 'https://www.zhe94.com/your-image.png';
const base64Result = await convertImageToBase64(remoteImageUrl);
</script>

<template>
  <img :src="base64Result" alt="Base64 图片" v-if="base64Result" />
</template>

2. 专用工具库：image-to-base64（简洁易用）

这是一个轻量的专门用于图片转 Base64 的库，支持远程 URL 和本地路径，适配 Node.js 环境（Nuxt3 服务端）。
安装：

npm install image-to-base64 --save
# 或
yarn add image-to-base64

Nuxt3 中使用：

<script setup lang="ts">
import imageToBase64 from 'image-to-base64';

const convertRemoteImage = async () => {
  try {
    const base64 = await imageToBase64('https://www.zhe94.com/your-image.jpg');
    // 拼接完整的 Base64 URL
    const base64Url = `data:image/jpeg;base64,${base64}`;
    console.log('转换结果：', base64Url);
    return base64Url;
  } catch (error) {
    console.error('转换失败：', error);
  }
};
</script>

如需转载请保留本文出处: https://zhe94.com/985.html