最近遇到一个需求，给定图片的 URL 链接，将链接对应的 图片直接转成八进制流，然后在使用八进制流做其他操作，这里为了性能体验，没用使用请求，纯 js 实现，具体实现如下：
实现步骤：
- 创建一个 img 标签。
- 设置 img 标签的 src 属性为图片链接。
- 监听 img 标签的 load 事件，确保图片加载完成后执行下一步。
- 创建一个 canvas 元素。
- 将 img 标签绘制到 canvas 上。
- 获取 canvas 上的像素数据。
- 将像素数据转换为八进制字符串。
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];// }// 返回 resultresolve(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">
