Question

我有名为frameBytes的Uint8Array。我已通过此代码从此字节数组中创建了RGBA值。

public class CustomListeners implements WebDriverEventListener {
/*
         * 
         * All Implemented methods
         * 
         * 
         */
}

然后我使用以下代码将此GRBA值显示到画布。

    for(var i = 0; i < frameBytes.length; i++) {
        imgData.data[4*i] = frameBytes[i];// red
        imgData.data[4*i + 1] = frameBytes[i]; // green
        imgData.data[4*i + 2] = frameBytes[i];// blue
        imgData.data[4*i + 3] = 255; //alpha 
    }

之后我从画布使用以下代码在imgae标签中进行成像：

var ctx = fingerFrame.getContext('2d');
var imgData= ctx.createImageData(fingerFrame.width,fingerFrame.height);
 ctx.putImageData(imgData, 0, 0, 0, 0,fingerFrame.width,fingerFrame.height);

但我不想使用画布。我想直接从Uint8Array中显示图像标签中的图像。我怎样才能做到这一点？任何帮助将受到高度赞赏。

Answer 1

我认为您可以从该页面上的示例直接制作一个ImageData：

const arr = new Uint8ClampedArray(40000);

// Iterate through every pixel
for (let i = 0; i < arr.length; i += 4) {
  arr[i + 0] = 0;    // R value
  arr[i + 1] = 190;  // G value
  arr[i + 2] = 0;    // B value
  arr[i + 3] = 255;  // A value
}

// Initialize a new ImageData object
let imageData = new ImageData(arr, 200);

不幸的是，似乎没有任何方法只能在ImageData中显示<img>元素中的<canvas>。 <img>需要一个实际的图像文件。

幸运的是，BMP格式得到了广泛支持，并支持原始RGBA数据。您只需要在适当的BMP标头之前添加。完成此操作后，您可以使用Ben Fortune概述的技术将数据传递到<img>。我会不要使用data: URL，即使您在网上发现有人在使用它。这是不必要的低效率。

这是一些示例代码。它将像素数据附加到单个缓冲区中的位图标头中，因为这样会更有效。如果您已经有了数据，则可以只为标题创建一个单独的Uint8Array并将其连接在Blob构造函数中，即new Blob([header, pixels])。我没有尝试过。

const header_size = 70;

const width = 255;
const height = 255;
const image_size = width * height * 4;

const arr = new Uint8Array(header_size + image_size);
const view = new DataView(arr.buffer);

// File Header

// BM magic number.
view.setUint16(0, 0x424D, false);
// File size.
view.setUint32(2, arr.length, true);
// Offset to image data.
view.setUint32(10, header_size, true);

// BITMAPINFOHEADER

// Size of BITMAPINFOHEADER
view.setUint32(14, 40, true);
// Width
view.setInt32(18, width, true);
// Height (signed because negative values flip
// the image vertically).
view.setInt32(22, height, true);
// Number of colour planes (colours stored as
// separate images; must be 1).
view.setUint16(26, 1, true);
// Bits per pixel.
view.setUint16(28, 32, true);
// Compression method, 6 = BI_ALPHABITFIELDS
view.setUint32(30, 6, true);
// Image size in bytes.
view.setUint32(34, image_size, true);
// Horizontal resolution, pixels per metre.
// This will be unused in this situation.
view.setInt32(38, 10000, true);
// Vertical resolution, pixels per metre.
view.setInt32(42, 10000, true);
// Number of colours. 0 = all
view.setUint32(46, 0, true);
// Number of important colours. 0 = all
view.setUint32(50, 0, true);

// Colour table. Because we used BI_ALPHABITFIELDS
// this specifies the R, G, B and A bitmasks.

// Red
view.setUint32(54, 0x000000FF, true);
// Green
view.setUint32(58, 0x0000FF00, true);
// Blue
view.setUint32(62, 0x00FF0000, true);
// Alpha
view.setUint32(66, 0xFF000000, true);

// Pixel data.
for (let w = 0; w < width; ++w) {
  for (let h = 0; h < height; ++h) {
    const offset = header_size + (h * width + w) * 4;
    arr[offset + 0] = w;     // R value
    arr[offset + 1] = h;     // G value
    arr[offset + 2] = 255-w; // B value
    arr[offset + 3] = 255-h; // A value
  }
}

const blob = new Blob([arr], { type: "image/bmp" });
const url = window.URL.createObjectURL(blob);

const img = document.getElementById('i');
img.src = url;

<img id="i">

一个很大的警告是，这种BMP的RGBA变体根本没有得到广泛支持。 Chrome似乎支持它。 Firefox没有，Apple的finder也没有。如果您正在编写Electron应用程序，那应该没问题，但我不会在网络上使用它。

但是，由于您将alpha设置为255，所以我猜您甚至不需要alpha通道。在这种情况下，您可以改用BI_RGB：

    const header_size = 54;

    const width = 255;
    const height = 255;
       
    const image_size = width * height * 4;

    const arr = new Uint8Array(header_size + image_size);
    const view = new DataView(arr.buffer);

    // File Header

    // BM magic number.
    view.setUint16(0, 0x424D, false);
    // File size.
    view.setUint32(2, arr.length, true);
    // Offset to image data.
    view.setUint32(10, header_size, true);

    // BITMAPINFOHEADER

    // Size of BITMAPINFOHEADER
    view.setUint32(14, 40, true);
    // Width
    view.setInt32(18, width, true);
    // Height (signed because negative values flip
    // the image vertically).
    view.setInt32(22, height, true);
    // Number of colour planes (colours stored as
    // separate images; must be 1).
    view.setUint16(26, 1, true);
    // Bits per pixel.
    view.setUint16(28, 32, true);
    // Compression method, 0 = BI_RGB
    view.setUint32(30, 0, true);
    // Image size in bytes.
    view.setUint32(34, image_size, true);
    // Horizontal resolution, pixels per metre.
    // This will be unused in this situation.
    view.setInt32(38, 10000, true);
    // Vertical resolution, pixels per metre.
    view.setInt32(42, 10000, true);
    // Number of colours. 0 = all
    view.setUint32(46, 0, true);
    // Number of important colours. 0 = all
    view.setUint32(50, 0, true);

    // Pixel data.
    for (let w = 0; w < width; ++w) {
      for (let h = 0; h < height; ++h) {
        const offset = header_size + (h * width + w) * 4;
        arr[offset + 0] = w;     // R value
        arr[offset + 1] = h;     // G value
        arr[offset + 2] = 255-w; // B value
        // arr[offset + 3] is ignored but must still be present because we specified 32 BPP
      }
    }

    const blob = new Blob([arr], { type: "image/bmp" });
    const url = window.URL.createObjectURL(blob);

    const img = document.getElementById('i');
    img.src = url;

<img id="i">

在上面的示例中，我仍然使用32 BPP，但是因为我将压缩设置为BI_RGB，所以忽略了Alpha通道。这有点浪费内存。您可以改为将其设置为24 BPP，然后每个像素仅使用3个字节，但要注意的是，每一行都必须填充为最多4个字节的倍数，在这里我不会打扰。

Answer 2

我想直接在Uint8Array的图像标签中显示图像

使用Blob非常简单：

// Small red dot image
const content = new Uint8Array([137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 0, 5, 0, 0, 0, 5, 8, 6, 0, 0, 0, 141, 111, 38, 229, 0, 0, 0, 28, 73, 68, 65, 84, 8, 215, 99, 248, 255, 255, 63, 195, 127, 6, 32, 5, 195, 32, 18, 132, 208, 49, 241, 130, 88, 205, 4, 0, 14, 245, 53, 203, 209, 142, 14, 31, 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130]);

document.getElementById('my-img').src = URL.createObjectURL(
  new Blob([content.buffer], { type: 'image/png' } /* (1) */)
);

Should display a small red dot: <img id="my-img">

（1）也可以在不指定Blob MIME类型的情况下使用。

Answer 3

如果您知道mimetype，则可以创建Blob。

const blob = new Blob(imgData.data, 'image/png');
const url = window.URL.createObjectURL(blob);

const img = document.getElementById('i');  
img.src = url;

Answer 4

我相信你可以使用btoa函数，它会创建图像数据的base64 ASCII表示。

 const img = document.getElementById('i');  

 //ImageDataArrayBuffer is your uint8 Array Buffer
 img.src =  "data:image/png;base64,"+ btoa(String.fromCharCode.apply(null, ImageDataArrayBuffer));

Uint8Array在javascript中成像

4 个答案: