WebGLRenderingContext: readPixels() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Note: This feature is available in Web Workers.

Phương thức WebGLRenderingContext.readPixels() của WebGL API đọc một khối pixel từ một hình chữ nhật được chỉ định của bộ đệm khung màu hiện tại vào một đối tượng TypedArray hoặc DataView.

Cú pháp

js
// WebGL1:
readPixels(x, y, width, height, format, type, pixels)

// WebGL2:
readPixels(x, y, width, height, format, type, offset)
readPixels(x, y, width, height, format, type, pixels)
readPixels(x, y, width, height, format, type, pixels, dstOffset)

Thông số

x

A GLint chỉ định pixel ngang đầu tiên được đọc từ góc dưới bên trái của khối pixel hình chữ nhật.

y

A GLint chỉ định pixel dọc đầu tiên được đọc từ góc dưới bên trái của khối pixel hình chữ nhật.

width

A GLsizei chỉ định chiều rộng của hình chữ nhật.

height

A GLsizei xác định chiều cao của hình chữ nhật.

format

Một GLenum chỉ định định dạng của dữ liệu pixel. Các giá trị có thể:

gl.ALPHA

Loại bỏ các thành phần màu đỏ, xanh lá cây và xanh dương và đọc thành phần alpha.

gl.RGB

Loại bỏ các thành phần alpha và đọc các thành phần màu đỏ, xanh lá cây và thành phần màu xanh.

gl.RGBA

Các thành phần màu đỏ, xanh lá cây, xanh dương và alpha được đọc từ đệm màu.

WebGL2 thêm vào - gl.RED - gl.RG - gl.RED_INTEGER - gl.RG_INTEGER - gl.RGB_INTEGER - gl.RGBA_INTEGER

type

A GLenum chỉ định loại dữ liệu của dữ liệu pixel. Các giá trị có thể:

  • gl.UNSIGNED_BYTE
  • gl.UNSIGNED_SHORT_5_6_5
  • gl.UNSIGNED_SHORT_4_4_4_4
  • gl.UNSIGNED_SHORT_5_5_5_1
  • gl.FLOAT

WebGL2 thêm vào - gl.BYTE - gl.UNSIGNED_INT_2_10_10_10_REV - gl.HALF_FLOAT - gl.SHORT - gl.UNSIGNED_SHORT - gl.INT - gl.UNSIGNED_INT - gl.UNSIGNED_INT_10F_11F_11F_REV - gl.UNSIGNED_INT_5_9_9_9_REV

pixels

Đối tượng để đọc dữ liệu vào. Kiểu mảng phải khớp với kiểu của tham số type:

dstOffset Optional

Bù lại. Mặc định là 0.

Giá trị trả về

Không có (undefined).

Ngoại lệ

  • Lỗi gl.INVALID_ENUM được đưa ra nếu format hoặc type không phải là giá trị được chấp nhận.

  • Lỗi gl.INVALID_OPERATION sẽ xuất hiện nếu

    • typegl.UNSIGNED_SHORT_5_6_5format không phải là gl.RGB.
    • typegl.UNSIGNED_SHORT_4_4_4_4format không phải là gl.RGBA.
    • type không khớp với kiểu mảng được gõ của pixels.
  • Lỗi gl.INVALID_FRAMEBUFFER_OPERATION sẽ xuất hiện nếu hiện tại bộ đệm khung bị ràng buộc chưa hoàn thành bộ đệm khung.

Ví dụ

js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
const pixels = new Uint8Array(
  gl.drawingBufferWidth * gl.drawingBufferHeight * 4,
);
gl.readPixels(
  0,
  0,
  gl.drawingBufferWidth,
  gl.drawingBufferHeight,
  gl.RGBA,
  gl.UNSIGNED_BYTE,
  pixels,
);
console.log(pixels); // Uint8Array

Thông số kỹ thuật

Thông số kỹ thuật
WebGL Specification
# 5.14.12

Khả năng tương thích của trình duyệt

Xem thêm