Question

我目前正在使用context.createImageData（width，height）;使用html5画布创建RGBA图像。但是我不需要操纵图像的alpha值，所以我创建的数组比它需要的要大得多。有没有办法使用创建RGB图像数据的类似方法？

Answer 1

你根本无法使用画布。

Canvas将始终为您提供一个RGBA缓冲区per specification（当您使用toDataURL生成JPEG时，它产生RGB的唯一例外。）

您可以简单地忽略Alpha通道并将其保留为值255，或者创建一个自定义的Typed Array缓冲区，其中只有您操作的RGB值，然后将数据复制到画布的像素阵列。

var myBuffer = new ArrayBuffer(3 * w * h);    /// calc buffer size in bytes
var pixels = new Uint8ClampedArray(myBuffer); /// view for buffer

Uint8ClampedArray与画布使用的缓冲区视图类型相同。

然后在数据准备就绪时将值从pixels复制到图像数据：

var imageData = ctx.createImageData(w, h);   /// create a canvas buffer (RGBA)
var data = imageData.data;                   /// view for the canvas buffer
var len = data.length;                       /// length of buffer
var i = 0;                                   /// cursor for RGBA buffer
var t = 0;                                   /// cursor for RGB buffer

for(; i < len; i += 4) {
    data[i]     = pixels[t];     /// copy RGB data to canvas from custom array
    data[i + 1] = pixels[t + 1];
    data[i + 2] = pixels[t + 2];
    data[i + 3] = 255;           /// remember this one with createImageBuffer

    t += 3;
}

ctx.putImageData(imageData, 0, 0); /// put data to canvas

（两个缓冲区当然需要在宽度和高度上匹配）。

如果这种方法有益，很大程度上取决于您是否对图像进行了大量处理。如果没有，那么这只会占用更多内存，并且不会给性能带来太多好处。

根据您将处理的方式和内容，还可以在您的自定义缓冲区中使用Uint32Array（除了Uint8ClampedArray - 您可以拥有所需数量的视图缓冲区）对像素位移等有用。

使用javascript而不是RGBA生成RGB图像

1 个答案: