JS 二进制数据怎么保存成图片?

34 min read

可以使用 Canvas 或 JS 中的 ImageData 对象将二进制数据保存为图片。

方法一：使用 Canvas

  1. 创建一个空的 Canvas 元素，设置其宽度和高度；
  2. 获取 Canvas 的上下文对象，使用 createImageData 方法创建一个 ImageData 对象，并将二进制数据赋值给 ImageData 对象的 data 属性；
  3. 使用 putImageData 方法将 ImageData 对象绘制到 Canvas 上；
  4. 使用 toDataURL 方法将 Canvas 转换为 base64 的图片格式。

示例代码：

const imageWidth = 100;
const imageHeight = 100;
const imageData = new ImageData(binaryData, imageWidth, imageHeight);

const canvas = document.createElement('canvas');
canvas.width = imageWidth;
canvas.height = imageHeight;

const ctx = canvas.getContext('2d');
ctx.putImageData(imageData, 0, 0);

const dataURL = canvas.toDataURL('image/png');

方法二：使用 ImageData

  1. 创建一个空的 ImageData 对象，设置其宽度和高度；
  2. 将二进制数据，一个像素一个像素地赋值给 ImageData 对象的 data 属性；
  3. 将 ImageData 对象转换为 Canvas 图片对象，使用 toDataURL 方法将 Canvas 转换为 base64 的图片格式。

示例代码：

const imageWidth = 100;
const imageHeight = 100;
const imageData = new ImageData(imageWidth, imageHeight);

for (let i = 0; i < binaryData.length; i++) {
  imageData.data[i] = binaryData[i];
}

const canvas = document.createElement('canvas');
canvas.width = imageWidth;
canvas.height = imageHeight;

const ctx = canvas.getContext('2d');
ctx.putImageData(imageData, 0, 0);

const dataURL = canvas.toDataURL('image/png');