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

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; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }
// 使用Blob对象的构造函数创建一个新的Blob对象，将Uint8Array作为参数传递，并设置内容类型。
  return new Blob([uInt8Array], { type: contentType });
}
// 保存二维码
const handleDownload = (base64:string) => {
  // 将图片从base64转换为blob对象
  const blob = base64ToBlob(base64);
  // 创建一个URL对象，用于存储blob对象
  const url = URL.createObjectURL(blob);
  // 创建一个a标签，用于下载文件
  const link = document.createElement('a');
  // 设置a标签的href属性，为url对象
  link.href = url;
  // 设置a标签的download属性，为要下载的文件名
  link.download = 'downloaded.png'; // 指定下载文件的名称
  // 将a标签添加到body中
  document.body.appendChild(link);
  // 点击a标签，触发下载
  link.click();
  // 销毁URL对象
  URL.revokeObjectURL(url);
  // 从body中移除a标签
  document.body.removeChild(link);
}

2. 图片添加描述文字导出


// 绘制图片与描述文字
function exportImageWithDescription(base64Image: string, desc: string, fileName?: string) {
  // 创建临时Canvas元素
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // 创建图像对象并加载Base64编码图片
  const image = new Image();
  image.onload = function () {
    // 设置Canvas尺寸与图像尺寸一致
    canvas.width = image.width;
    canvas.height = image.height;

    // 在Canvas上绘制图像
    ctx.drawImage(image, 0, 0);

    // 添加自定义描述文字
    ctx.font = "20px Arial";
    ctx.fillStyle = "black";
    ctx.fillText(desc, 20, canvas.height - 20);

    // 将Canvas内容导出为PNG图片
    const dataURL = canvas.toDataURL('image/png');

    // 创建一个下载链接并模拟点击下载
    const a = document.createElement('a');
    a.href = dataURL;
    a.download = `${fileName || 'downloaded'}.png`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };
  // 加载Base64编码的图片
  image.src = base64Image;
}