前端面试题 - 93. 把一张图片序列化到json里面，有什么方式？

将一张图片序列化到JSON中，可以采用以下两种方式：

1. 将图片转换为 Base64 编码。将图片转换成 Base64 编码后，就可以将编码后的字符串序列化到 JSON 中。

例如，使用 Canvas API 将图片绘制到一个 Canvas 元素中，然后将 Canvas 元素转换成 Base64 编码，最后将编码后的字符串作为图片数据存储到 JSON 中。

以下是示例代码：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'path/to/image.png';
img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  const imageDataURL = canvas.toDataURL(); // 将 Canvas 元素转换成 Base64 编码
  const data = {image: imageDataURL};
  const jsonString = JSON.stringify(data); // 序列化 JSON 数据
  console.log(jsonString);
};

2. 使用 File API 将图片文件对象存储到 JSON 中。通过 input[type=file] 元素获取用户选择的图片文件对象，然后将该文件对象作为图片数据存储到 JSON 中。

以下是示例代码：

const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.onchange = function(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onloadend = function() {
    const data = {image: reader.result};
    const jsonString = JSON.stringify(data); // 序列化 JSON 数据
    console.log(jsonString);
  };
};
document.body.appendChild(input); // 显示文件选择框

需要注意的是，以上两种方式都会将图片数据存储到 JSON 中，因此不适用于大型的图片。如果需要处理大型的图片，可以考虑使用其他方式。