从 uint8Array

如何解决从 uint8Array

我正在尝试从网络上的 JPG 文件使用 uint8Array 创建纹理。

我需要 uint8Array，因为它是一个只接受该格式的 API。

为了获取数据，我使用 responseType: "arraybuffer" 请求数据。

      axios({
        method: 'get',url: imageString,responseType: 'arraybuffer'
      })
        .then(function (response) {
          const uintPic = new Uint8Array(response.data)
     }

这是第一个问题：我应该如何获得图像的宽度和高度？我从示例中查找向前推进，但找不到。

然后我像这样设置像素：

    var width = 200;
    var height = 113;
    var channels = 4; // RGBA
    var pixels = width * height * channels;

    // I create a new Uint8Array with space to hold the Alpha channel
    var newData = new Uint8Array(pixels); 

    var s = 0;
    var d = 0;
    while (d < pixels) {
       newData[d++] = uintPic[s++];
       newData[d++] = uintPic[s];
       newData[d++] = uintPic[s];
       newData[d++] = 255;
       s++
    }
  

第二个问题是来自长度为 2.784 的 uintPic 的信息不足，而它应该至少有 67.800（宽 * 高 * 3 通道）。

我在浏览器中使用 Blob 测试了来自 axios 响应的数据，但数据似乎足以创建图像：

// First the Blob:
const blob = new Blob(
    [new Uint8Array([uintPic])],{ type: 'image/jpg' }
);

// Now the image.
const img = new Image();
img.src = URL.createObjectURL(blob);
document.body.appendChild(img);

解决方法

到目前为止，使用 Jimp 作为库是有效的：

      Jimp.read(url,function (err,image) {
          console.log("? ~ image.bitmap.data:",image.bitmap.data)
      });