Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/en-US/docs/Web/API/ImageData/data below:

ImageData: data property - Web APIs

Baseline Widely available

Note: This feature is available in Web Workers.

The readonly ImageData.data property returns a Uint8ClampedArray or Float16Array that contains the ImageData object's pixel data. Data is stored as a one-dimensional array in the RGBA order, with integer values between 0 and 255 (inclusive).

The type depends on the ImageData.pixelFormat used:

• A Uint8ClampedArray if the pixelFormat is "rgba-unorm8".
• A Float16Array if the pixelFormat is "rgba-float16".

This example creates an ImageData object that is 100 pixels wide and 100 pixels tall, making 10,000 pixels in all. The data array stores four values for each pixel, making 4 x 10,000, or 40,000 values in all.

let imageData = new ImageData(100, 100);
console.log(imageData.data); // Uint8ClampedArray[40000]
console.log(imageData.data.length); // 40000

If the ImageData object is set up for floating-point pixels — for example, for high dynamic range (HDR) images —data will be a Float16Array instead.

let floatArray = new Float16Array(4 * 200 * 200);
let imageData = new ImageData(floatArray, 200, 200, {
  pixelFormat: "rgba-float16",
});
console.log(imageData.data); // Float16Array

This example creates and fills a new ImageData object with colorful pixels.

<canvas id="canvas"></canvas>

Since each pixel consists of four values within the data array, the for loop iterates by multiples of four. The values associated with each pixel are R (red), G (green), B (blue), and A (alpha), in that order.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const imageData = ctx.createImageData(100, 100);

// Fill the array with RGBA values
for (let i = 0; i < imageData.data.length; i += 4) {
  // Percentage in the x direction, times 255
  let x = ((i % 400) / 400) * 255;
  // Percentage in the y direction, times 255
  let y = (Math.ceil(i / 400) / 100) * 255;

  // Modify pixel data
  imageData.data[i + 0] = x; // R value
  imageData.data[i + 1] = y; // G value
  imageData.data[i + 2] = 255 - x; // B value
  imageData.data[i + 3] = 255; // A value
}

// Draw image data to the canvas
ctx.putImageData(imageData, 20, 20);

For more examples using ImageData.data, see Pixel manipulation with canvas, CanvasRenderingContext2D.createImageData(), and CanvasRenderingContext2D.putImageData().

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4