js base64转图片url

可以使用以下代码将 base64 转换为图片 url：

function base64ToImageUrl(base64) {
  const blob = new Blob([base64], { type: 'image/png' });
  const url = URL.createObjectURL(blob);
  return url;
}

其中，`base64` 是 base64 编码的字符串，返回值是图片的 url。

相关问题

uniapp base64转图片url

在uniapp中，将Base64字符串转换为图片URL可以通过以下步骤实现：

1. **将Base64字符串转换为Blob对象**：
- 使用`atob`函数将Base64字符串解码为二进制字符串。
- 将二进制字符串转换为字节数组。
- 使用`Uint8Array`将字节数组转换为无符号整数数组。
- 使用`Blob`构造函数将无符号整数数组转换为Blob对象。

2. **创建URL对象**：
- 使用`URL.createObjectURL`方法将Blob对象转换为URL。

以下是一个示例代码，展示了如何将Base64字符串转换为图片URL：

function base64ToImageUrl(base64Data) {
    // 将Base64字符串转换为二进制字符串
    const byteCharacters = atob(base64Data.split(',')[1]);

    // 将二进制字符串转换为字节数组
    const byteNumbers = new Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
    }

    // 将字节数组转换为无符号整数数组
    const byteArray = new Uint8Array(byteNumbers);

    // 创建Blob对象
    const blob = new Blob([byteArray], { type: 'image/png' });

    // 创建URL对象
    const imageUrl = URL.createObjectURL(blob);

    return imageUrl;
}

// 使用示例
const base64Data = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...'; // 你的Base64数据
const imageUrl = base64ToImageUrl(base64Data);
console.log(imageUrl); // 输出转换后的图片URL

在这个示例中，`base64ToImageUrl`函数接受一个Base64字符串作为参数，并返回对应的图片URL。

vue3 base64转图片url并展示

在 Vue 3 中，你可以使用 `FileReader` API 和一些辅助函数来将 Base64 编码的图片数据转换为 URL，以便显示在页面上。这是一个简单的示例：

首先，你需要安装一个依赖，如果你的项目中还没有安装 `vue-file-loader`，可以通过 npm 或 yarn 来安装：

npm install vue-file-loader @vue/cli-plugin-vuex --save-dev
# 或者
yarn add vue-file-loader @vue/cli-plugin-vuex --dev

然后，在你的项目配置文件（如 `vue.config.js`）中配置 base64 图片处理：

// vue.config.js
module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif)$/i,
          use: ['file-loader'],
          options: {
           esModule: false,
            name: 'static/images/[name].[hash:8].[ext]',
          },
        },
      ],
    },
  },
};

接着，在你的 Vue 组件中，可以这样实现 Base64 到 URL 的转换：

<!-- template.vue -->
<template>
  <div>
    <img :src="decodeBase64Image(encodedImage)" alt="Decoded Image" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { createReadStream } from 'fs/promises';

async function decodeBase64Image(base64Image) {
  const buffer = Buffer.from(atob(base64Image.replace(/^data:image\/\w+;base64,/, '')), 'binary');
  const stream = createReadStream({ buffer });
  return new Response(stream).blob().then(blob => URL.createObjectURL(blob));
}

export default {
  data() {
    return {
      encodedImage: 'data:image/jpeg;base64,base64-encoded-data-goes-here', // 替换为实际的 Base64 数据
    };
  },
  mounted() {
    this.$watch(
      () => this.encodedImage,
      async (newImage) => {
        if (newImage) {
          try {
            this.imageUrl = await decodeBase64Image(newImage);
          } catch (error) {
            console.error('Error decoding base64 image:', error);
          }
        }
      },
      {
        deep: true,
      }
    );
  },
};
</script>

在这个例子中，`decodeBase64Image` 函数会接收 Base64 字符串，将其转换为二进制数据，然后创建一个 ReadableStream，并返回一个包含 URL 的响应。