前端实现base64编码图片的导出、图片添加描述文字导出

白桃与猫

已于 2024-04-27 09:23:46 修改

阅读量531

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端常见用法 Js 和 Ts 文章标签：前端 vue vue.js javascript

于 2024-04-24 14:16:41 首次发布

本文链接：https://blog.youkuaiyun.com/qq_52395343/article/details/138157630

本文介绍了如何使用JavaScript将Base64编码的图片转换为Blob对象并下载，以及如何在图片上添加描述文字后导出为下载文件。方法包括base64ToBlob函数和exportImageWithDescription函数的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. base64编码图片的导出

调用handleDownload方法，传入图片的base64编码，将图片进行导出保存：

// base64 转换blob对象
const base64ToBlob = (base64: string) => {
   
   
  // 将Base64编码的字符串按';base64,''拆分，得到内容类型和二进制数据两部分
  const parts = base64.split(';base64,');
  const contentType = parts[0].split(':')[1];
  // 将二进制数据转换为UTF-8编码的字符串
  const raw = window.atob(parts[1]);
  const rawLength = raw.length;
  // 创建一个Uint8Array对象，将字符串中的每个字符码存储到这个数组中
  const uInt8Array = new Uint8Array(rawLength);

  for (let i = 0