js 将图片链接转成流

最近遇到一个需求，给定图片的 URL 链接，将链接对应的 图片直接转成八进制流，然后在使用八进制流做其他操作，这里为了性能体验，没用使用请求，纯 js 实现，具体实现如下：

实现步骤：

1. 创建一个 img 标签。
2. 设置 img 标签的 src 属性为图片链接。
3. 监听 img 标签的 load 事件，确保图片加载完成后执行下一步。
4. 创建一个 canvas 元素。
5. 将 img 标签绘制到 canvas 上。
6. 获取 canvas 上的像素数据。
7. 将像素数据转换为八进制字符串。

function imageToOctalStream(imageUrl) {
  return new Promise((resolve, reject) => {
    // 创建img标签
    const img = new Image();
    img.crossOrigin = 'anonymous'; // 避免跨域问题
    img.src = imageUrl;

    // 监听图片加载完成事件
    img.onload = () => {
      // 创建canvas元素
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');

      // 将图片绘制到canvas上
      ctx.drawImage(img, 0, 0);

      // 获取canvas上的像素数据
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      const data = imageData.data;

      // 方法一：将像素数据转换为八进制字符串
      let result = '';
      for (let i = 0; i < data.length; i += 4) {
        const r = data[i].toString(8).padStart(3, '0');
        const g = data[i + 1].toString(8).padStart(3, '0');
        const b = data[i + 2].toString(8).padStart(3, '0');
        const a = data[i + 3].toString(8).padStart(3, '0');
        result += r + g + b + a;
      }

      // // 方法二：创建一个Uint8Array来存储像素数据
      // const result = new Uint8Array(data.length);
      // // 将像素数据转换为Uint8Array
      // for (let i = 0; i < data.length; i++) {
      //   result[i] = data[i];
      // }

      // 返回 result
      resolve(result);
    };

    // 监听图片加载失败事件
    img.onerror = (error) => {
      reject(error);
    };
  });
}

const imageUrl = 'https://example.com/image.jpg'; // 需要替换成你的图片链接
imageToOctalStream(imageUrl)
  .then((result) => {
    console.log('转化成功', result);
  })
  .catch((error) => {
    console.error('转换失败：', error);
  });

这里也用到了 crossOrigin 这个属性，用于设置图像的跨域策略。它决定了浏览器在加载图像时如何处理跨域请求。

当 crossOrigin 设置为 "anonymous" 时，浏览器会发起一个跨域请求，但不会发送任何凭据（如cookies）。这通常用于不需要用户凭据的跨域图片请求。

当 crossOrigin 设置为 "use-credentials" 时，浏览器会发起一个带有凭据的跨域请求。这意味着浏览器会将用户的凭据（如cookies）发送给服务器，以便进行身份验证和授权。

如果 crossOrigin 未设置或设置为空字符串，则表示不进行任何跨域请求，即同源策略。在这种情况下，浏览器只会从与当前页面相同的域名加载图像。

如下示例中，图像将从 https://example.com 加载，并且浏览器将使用匿名跨域请求来获取图像数据：

<img src="https://example.com/image.jpg" crossOrigin="anonymous">