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

【问题标题】：Generating an RGB image using javascript instead of an RGBA使用 javascript 而不是 RGBA 生成 RGB 图像
【发布时间】：2013-11-21 06:20:57
【问题描述】：

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

【问题讨论】：

标签： javascript html image html5-canvas

【解决方案1】：

你根本无法使用画布。

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

您可以简单地忽略 Alpha 通道并将其保留为 255，或者创建一个自定义类型数组缓冲区，其中仅包含您操作的 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 - 您可以在缓冲区上拥有任意数量的视图），即对像素位移等很有用。

【讨论】：