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

Question

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

Answer 1

你根本无法使用画布.

Canvas将始终根据规范为您提供RGBA缓冲区(当您用于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- 您可以在缓冲区中拥有所需数量的视图),这对于像素位移等非常有用.