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

Generating an RGB image using javascript instead of an RGBA

本文关键字：生成 RGB 图像 RGBA JavaScript 使用      更新时间：2023-09-26

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

你根本无法使用画布。

Canvas 将始终根据规范为您提供 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之外 - 您可以在缓冲区上拥有任意数量的视图），这对于像素置换等很有用。

相关文章：