Hướng dẫn what is image data in javascript? - dữ liệu hình ảnh trong javascript là gì?

Giá trị

Ví dụ

Nhận dữ liệu pixel của đối tượng hình ảnh

Ví dụ này tạo ra một đối tượng ImageData rộng 100 pixel và cao 100 pixel, tạo ra 10.000 pixel. Mảng data lưu trữ bốn giá trị cho mỗi pixel, tạo ra 4 x 10.000 hoặc 40.000 giá trị trong tất cả.

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

Điền vào một đối tượng hình ảnh trống

Ví dụ này tạo ra và điền vào một đối tượng ImageData mới với các pixel đầy màu sắc.

HTML

<canvas id="canvas">canvas>

JavaScript

Vì mỗi pixel bao gồm bốn giá trị trong mảng data, vòng lặp

<canvas id="canvas">canvas>

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);

Kết quả

Nhiều ví dụ hơn

Xem thêm