从 uint8Array 创建纹理（图像）答案

【问题标题】：Creating a texture (image) from uint8Array从 uint8Array 创建纹理（图像）
【发布时间】：2021-06-19 13:38:35
【问题描述】：

我正在尝试从网络上的 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++
    }

第二个问题是没有足够的信息来自 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);

【问题讨论】：

标签： axios textures arraybuffer uint8array

【解决方案1】：

到目前为止，使用 Jimp 作为库：

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

【讨论】：