使用 Filesaver.js 保存 Base64 图像

2023-11-24

我收到 JPG 图像的多个 Base64 URI。

我需要将它们保存为 jpg 文件。

我正在尝试使用文件保存器.js,但它不适合我。

我之前使用过filesaver.js,当时我从aws-sdk获取图像,其中数据是缓冲区形式并且它有效。

但是,它不适用于我的 base64 字符串。

var base64 = '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'

saveAs(new Blob([base64], {type: "image/jpeg"}),"filename.jpg")

我也尝试过:

saveAs(new Blob([base64], {type: "image/jpeg;base64"}),"filename.jpg")

saveAs(new Blob([atob(base64)], {type: "image/jpeg"}),"filename.jpg")

我也尝试过使用data:image/jpeg;base64,作为我的 base64 字符串的后缀。

文件已保存,但图像已损坏。在某些情况下,文件仅包含 base64 字符串。如何将它们保存为二进制文件?


我使用下面的代码将数据 URI 转换为 BLOB,然后将其与 FileSaver.js 一起使用:

function dataURItoBlob(dataURI) {
  // convert base64 to raw binary data held in a string
  // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
  var byteString = atob(dataURI.split(',')[1]);

  // separate out the mime component
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

  // write the bytes of the string to an ArrayBuffer
  var ab = new ArrayBuffer(byteString.length);

  // create a view into the buffer
  var ia = new Uint8Array(ab);

  // set the bytes of the buffer to the correct values
  for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
  }

  // write the ArrayBuffer to a blob, and you're done
  var blob = new Blob([ab], {type: mimeString});
  return blob;

}

我在以下位置找到了这段代码:来自 DataURL 的 Blob?

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Filesaver.js 保存 Base64 图像 的相关文章

随机推荐

  • 为什么我的助手的递归方法没有返回每个值?

    我想显示用 gem 祖先管理的类别树 我想使用一个助手 它将递归地遍历树并一一返回类别 目前没有 html 标签或内容 module CategoriesHelper def display tree category if categor
  • Async.Await 未捕获任务异常

    我有一个不返回任何内容的任务 您无法对此类任务执行 Async AwaitTask 因此您需要执行 Async AwaitIAsyncTask 不幸的是 这似乎只是吞掉了底层任务抛出的任何异常 TaskFactory StartNew Ac
  • spring-data-redis redisTemplate 异常

    当我调用 get 方法时 发生异常 这是代码 Service RedisService public class RedisServiceImpl implements RedisService Autowired RedisTemplat
  • 具有透明背景的 Qt 小部件

    我正在使用 PySide 但我认为对于任何语言绑定来说答案都是相同 相似的 我试图以形状时钟为例 位于here 并使钟面 圆圈 透明 以便我看到的只是钟针和分钟滴答声 事实上 当示例运行时 它看起来像this 我使用的是 Windows 7
  • UIActionSheet/UIAlertController 多行文本

    这是我正在编写的显示代码UIActionSheet actionSheet UIActionSheet alloc initWithTitle NSLocalizedString updateresponseforrecurring nil
  • 在 go 中将切片项从一个位置移动到另一个位置

    我试图将一个项目从切片内的一个位置移动到另一个位置 去游乐场 indexToRemove 1 indexWhereToInsert 4 slice int 0 1 2 3 4 5 6 7 8 9 slice append slice ind
  • 当参数类型为开放Char数组时,是否允许使用动态Char数组?

    我在看Delphi Char 和 TCharArray 不兼容类型 数组并开始尝试 我的发现相当有趣 procedure Clear AArray array of Integer var I Integer begin for I Low
  • 如何在android中将EditText提示创建为带有图像的文本

    如何在 android 中使用文本和图像创建 EditText 提示 占位符 我这样写
  • xargs sh -c 跳过第一个参数

    我正在尝试编写一个使用 find 和 xargs 将旧文件存档在大目录中的脚本 这是该行 find tmp messages mtime 9 print0 xargs x t 0 n 1000 sh c tar rPf tmp backup
  • 如何允许覆盖 ASP.NET Core 应用程序中的 blob?

    用户可以在创建记录时上传图像 但当您编辑该记录并尝试上传新图像时 会出现 此 blob 已存在 错误 有没有办法可以在我的应用程序中启用同名 blob 的覆盖 这是我处理更新过程的代码 值得注意的是 我创建了图像的三个迭代 为了应用程序的缘
  • Alexa Top 10000 SitesTop Sites 2023 - 2023最新刚更新 全世界流量排名10000的网站

    这个问题在这里已经有答案了 我使用 PhpDocumentor2 来生成文档 我搜索了这个主题 但找不到它的具体规则 例如 我有一个名称为 AddressField 的类 我想将 addressFields 指定为 AddressField
  • Rails:验证链接 (URL) 的好方法是什么?

    我想知道如何最好地验证 Rails 中的 URL 我正在考虑使用正则表达式 但不确定这是否是最佳实践 而且 如果我要使用正则表达式 有人可以向我推荐一个吗 我对正则表达式还是新手 验证 URL 是一项棘手的工作 这也是一个非常广泛的要求 你
  • 如何在Unity中对网格进行布尔运算?

    I have Cube模型和Cylinder模型 我想在里面打个洞Cube by Cylinder 我怎样才能做到呢 我有这两个模型 我想做这个 This is 网格上的布尔运算 Use this线程以了解更多信息 这是来自的存储库GitH
  • 新项目有什么理由使用 log4j 而不是 Logback? [关闭]

    Closed 这个问题是基于意见的 目前不接受答案 我知道共同意见是 Logback gt log4j 不过 log4j 有什么比 Logback 更好的地方吗 有什么理由使用 log4j 而不是 logback 事实上它只有 60 个关于
  • Google Play 应用更新 - 无法发布新的 apk

    当我尝试在 Google Play 中发布新的 APK 时 出现以下错误 禁止将之前使用M权限 目标SDK 23及以上 的设备降级为使用旧式权限 目标SDK 22及以下 的APK 从版本 2645 目标 SDK 23 到版本 2648 目标
  • 如何在 Android 中获取类似波形的声音云

    我用我的代码生成了一个简单的波形 如下图所示 但我想在每条线之间留出更多间隙 我希望它像声云波一样 如下图所示 这是我的代码 public class VisualizerView extends View private static f
  • 使用 XOR 在 JavaScript / HTML5 中绘图以删除旧的精灵

    我正在为一个小游戏构建引擎 现在我刚刚得到了一个带有两只小眼睛的红色圆圈作为主角 我有keyPress函数来检测运动 这很有效 但我想使用我很久以前在 QBASIC 中使用过的东西来删除角色并在新位置重画 XOR 基本上 在按键时会发生这种
  • Spring安全注销处理

    根据春季安全4 0 0文档 4 2 4 注销处理 logout 元素添加了对通过导航到注销的支持 特定的网址 默认注销 URL 是 logout 但你可以设置它 使用 logout url 属性进行其他操作 更多信息 其他可用的属性可以在命
  • 是否可以在卸载前弹出窗口中显示自定义消息?

    使用时window onbeforeunload or window on beforeunload 是否可以在该弹出窗口中显示自定义消息 也许是一个适用于主流浏览器的小技巧 通过查看现有的答案 我感觉这在过去使用类似的东西是可能的conf
  • 使用 Filesaver.js 保存 Base64 图像

    我收到 JPG 图像的多个 Base64 URI 我需要将它们保存为 jpg 文件 我正在尝试使用文件保存器 js 但它不适合我 我之前使用过filesaver js 当时我从aws sdk获取图像 其中数据是缓冲区形式并且它有效 但是 它