小凖
小凖

React将Base64编码字符串转化为图片

在React中，你可以使用类似的方法将Base64编码字符串转化为图片。以下是一个示例：

首先，你需要定义状态变量来存储Base64编码字符串和Blob URL：

import React, { useState } from "react";

function App() {
  const [base64Str, setBase64Str] = useState("");
  const [imageUrl, setImageUrl] = useState("");

  // 处理Base64编码字符串的变化
  const handleBase64StrChange = (event) => {
    setBase64Str(event.target.value);
  };

  // 将Base64编码的字符串转换为Blob URL
  const convertBase64ToBlobUrl = () => {
    const byteCharacters = atob(base64Str.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);
    const blob = new Blob([byteArray], { type: "image/png" });
    setImageUrl(URL.createObjectURL(blob));
  };

  return (
    

      {/* 输入Base64编码的字符串 */}