从uint8Array创建纹理(图像)

Question

我正在尝试从网络上的JPG到用uint8Array创建一个纹理。

我需要uint8Array，因为它是一个只接受该格式的应用程序接口。

为了获取数据，我使用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++
    }

第二个问题是没有足够的信息来自uintPic，它的长度是2.784，而它应该至少有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);

Answer 1

到目前为止，使用Jimp作为库是可行的：

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