首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在React本机中将Base64字符串转换为blob

在React本机中将Base64字符串转换为Blob,可以使用以下步骤:

  1. 导入atob函数:在React组件中,首先需要导入atob函数。atob函数是一个全局函数,用于将Base64字符串转换为原始字符串。
  2. 创建Blob对象:使用atob函数将Base64字符串解码为原始字符串。然后,根据原始字符串创建Blob对象。Blob对象代表一个不可变的、原始数据的类文件对象。可以使用Blob构造函数来创建一个新的Blob对象。
  3. 使用Blob URL:使用URL.createObjectURL方法,将Blob对象转换为Blob URL。Blob URL是一个特殊的URL,可以将Blob对象直接用作链接或图像源等。

以下是一个示例代码:

代码语言:txt
复制
import React from "react";

class Base64ToBlob extends React.Component {
  convertBase64ToBlob(base64String) {
    const byteString = atob(base64String);
    const arrayBuffer = new ArrayBuffer(byteString.length);
    const uint8Array = new Uint8Array(arrayBuffer);

    for (let i = 0; i < byteString.length; i++) {
      uint8Array[i] = byteString.charCodeAt(i);
    }

    const blob = new Blob([uint8Array], { type: "application/octet-stream" });
    const blobUrl = URL.createObjectURL(blob);

    return blobUrl;
  }

  render() {
    const base64String = "Base64字符串";
    const blobUrl = this.convertBase64ToBlob(base64String);

    return (
      <div>
        <a href={blobUrl} download>下载Blob文件</a>
        <img src={blobUrl} alt="Blob图片" />
      </div>
    );
  }
}

export default Base64ToBlob;

在上面的示例代码中,我们定义了一个Base64ToBlob组件,其中包含了一个convertBase64ToBlob函数,用于将Base64字符串转换为Blob对象。在render方法中,我们使用convertBase64ToBlob函数将Base64字符串转换为Blob对象,并使用Blob URL展示下载链接和图像。

这种方法可以在React本机中将Base64字符串转换为Blob对象,并且适用于多种场景,如下载文件或显示图像等。在转换过程中,没有涉及到特定的云计算产品,因此不需要提供腾讯云相关产品的链接地址。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • C#实现图片Base64字符串,以及base64字符串Markdown文件内复原的演示

    引用1.0.3版本或以上的Wesky.Net.OpenTools 包 1.0.3 版本提供图片Base64字符串方案,并提供根据后缀名自动识别Mime类型,合成标准URI 该nuget包支持.net...Github:https://github.com/LittleLittleRobot/OpenTools.git 引用1.0.3版本或以上的Wesky.Net.OpenTools 包 1.0.3 版本提供图片Base64...[avatar]({data})"; Console.WriteLine(mdString); } 运行程序,得到base64字符串.base64字符串base64字符串,使用格式:!...[avatar](base64字符串)的形式,即可被markdown所识别,并显示未原始图片。 复制该全部字符串内容,粘贴到任意markdown文本编辑器内。...核心代码解析: /// /// 将图片文件转换为 Base64 编码的字符串

    5510

    Vue解析剪切板图片并实现发送功能

    每一份坚持都是成功的累积,只要相信自己,总会遇到惊喜 前言 我们使用QQ进行聊天时,从别的地方Ctrl+C一张图片,然后聊天窗口Ctrl+V,QQ就会将你刚才复制的图片粘贴到即将发送的消息容器里,按下...// 参数: base64地址,压缩比例,回调函数(返回压缩后图片的blobbase64) compressPic:function(base64, scale, callback)...(此处需要注意:base64文件时,需要用正则表达式删掉base64图片的前缀),将当前图片地址推送至websocket服务。...图片flie // base64file convertBase64UrlToImgFile: function (urlData, fileName, fileType) { // 转换为byte...前端通过post请求将base64码传到服务端,服务端直接将base64码解析为图片保存至服务器 从下午2点折腾到晚上6点,一直找Java解析base64图片存到服务器的方案,最终选择了放弃,采用了前端转换方式

    1.4K20

    Redisant Toolbox——面向开发者的多合一工具箱

    ,如 \t、\n、\s 等 Base64 Image Encode/Decode:使用 Base64 确定或编码图像 Base64 String Encode/Decode:使用 Base64 解码或编码字符串...JSON to YAML:将 JSON 字符串换为 YAML YAML to JSON:将 YAML 字符串换为 JSON JWT Debugger:校验或签署 JWT 令牌 Language Beautify...:格式化各种语言的源代码 Number Base Converter:二进制、八进制、十进制、十六进制和其他数字基数之间转换 QR Code Reader/Generator:读取二维码或生成二维码...Parser:Query StringJSON,解析URL协议、主机、端口等 UUID/GUID Generate/Decode:生成 UUID、ULID、Nano ID Offline OCR:将图像转换为文本...Icon Font Previewer:预览矢量图标 YAML To Properties:将 YAML 字符串换为 Properties JSON To Properties:将 JSON 字符串换为

    4.6K60

    .NET Winform中图像与Base64格式互转

    我们可以创建一个新的Windows窗体应用程序项目来演示,然后从Visual Studio工具箱中将图片框,标签和按钮拖到Winform中,然后设计一个简单的UI,该UI允许您从硬盘中选择图像...,然后进行转换如下图所示,将图像转换为base64字符串或将编码后的base64字符串换为c#中的image。...base64字符串,可以创建一个ConvertImageToBase64方法,如下所示。...字符串换为字节数组,然后写入内存流,最后从该流返回图像。...互转的小工具,它的意义在于进行图像相关数据传输时,可以不再需要直接把图像地址作为参数传输,取而代之的是用Base64字符串作为参数传入,如此操作可以显著降低操作系统资源消耗。

    1.9K40

    Node.js中的Base64编码和解码

    幸运的是,Node.js提供了一个称为Buffer的本地模块,可用于执行Base64编码和解码。缓冲区可用作全局对象,这意味着您无需应用程序中显式包含此模块。...让我们看下面的示例,这些示例解释了如何使用Buffer对象Node.js应用程序中执行Base64编码和解码。...Base64 编码 要将字符串换为Base64编码的字符串,我们首先需要使用Buffer.from()方法根据给定的字符串创建一个缓冲区。...我们研究了如何使用本机Buffer模块Node.js应用程序中执行Base64编码和解码。 Buffer对象不仅限于Base64换。...如果您想了解有关JavaScript中Base64换的更多信息,请参阅本指南。 喜欢这篇文章吗? Twitter和LinkedIn上关注我。 您也可以订阅RSS Feed。

    17.5K50

    10行JavaScript代码完成图片的上传预览

    // file blob对象 let bold = window.URL.createObjectURL(file.files[0]); console.log('bold==>'+bold);...let boldImg = document.getElementById('bold'); boldImg.src = bold; // file base64 let base64Img =...这样看blob对象和base64都可以预览图片,但是blob对象仅仅是当次缓存,如果刷新,你重新把之前转的字符串放到src是不可以预览的,当时base64是可以的。...所以存库的时候不仅可以图片路径,还可以直接存base64base64很占用数据库空间,文件越大,base64字符串越大) 优化 下面我们对上面示例做优化,可以上传多张图片并预览,美化界面。 ?...document.getElementById('up-file'); let imgPre = document.getElementById('img-pre'); // file

    1.7K20
    领券