JS 使用 blob 保存数据为图片

25 min read

以下是一个将文本数据保存为PNG图片的JavaScript代码示例:

function saveAsImage(textData) {
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");

  // 设置画布大小
  canvas.width = 200;
  canvas.height = 200;

  // 绘制文本
  ctx.font = "20px sans-serif";
  ctx.fillText(textData, 50, 50);

  // 创建一个新的Blob对象
  canvas.toBlob(function(blob) {
    // 创建一个下载链接
    var link = document.createElement("a");
    link.href = window.URL.createObjectURL(blob);

    // 设置文件名
    link.download = "text-image.png";

    // 点击下载链接
    link.click();

    // 释放URL对象
    window.URL.revokeObjectURL(link.href);
  });
}

// 调用函数传入要保存的文本数据
saveAsImage("Hello World!");

这个代码将文本数据绘制在一个 200x200 的画布上,然后将其保存为 PNG 图片,并在浏览器中自动下载。