就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. Web API
  3. WebGLRenderingContext
  4. WebGLRenderingContext.readPixels()

在此页

WebGLRenderingContext.readPixels() 方法在 WebGL API reads a block of pixels from a specified rectangle of the current color framebuffer into an ArrayBufferView 对象。

句法 

// WebGL1:
void gl.readPixels(x, y, width, height, format, type, pixels);
// WebGL2:
void gl.readPixels(x, y, width, height, format, type, GLintptr offset);
void gl.readPixels(x, y, width, height, format, type, ArrayBufferView pixels, GLuint dstOffset);

参数

x
GLint specifying the first horizontal pixel that is read from the lower left corner of a rectangular block of pixels.
y
GLint specifying the first vertical pixel that is read from the lower left corner of a rectangular block of pixels.
width
GLsizei specifying the width of the rectangle.
height
GLsizei specifying the height of the rectangle.
format
A GLenum specifying the format of the pixel data. Possible values:
  • gl.ALPHA : Discards the red, green and blue components and reads the alpha component.
  • gl.RGB : Discards the alpha components and reads the red, green and blue components.
  • gl.RGBA : Red, green, blue and alpha components are read from the color buffer.

WebGL2 adds

  • gl.RED
  • gl.RG
  • gl.RED_INTEGER
  • gl.RG_INTEGER
  • gl.RGB_INTEGER
  • gl.RGBA_INTEGER
type
A GLenum specifying the data type of the pixel data. Possible values:
  • 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 adds

  • 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
ArrayBufferView object to read data into. The array type must match the type of the type 参数。
dstOffset 可选

Offset. Defaults to 0.

返回值

None.

异常

  • A gl.INVALID_ENUM error is thrown if format or type is not an accepted value.
  • A gl.INVALID_OPERATION error is thrown if
    • type is gl.UNSIGNED_SHORT_5_6_5 and format 不是 gl.RGB .
    • type is gl.UNSIGNED_SHORT_4_4_4_4 and format 不是 gl.RGB A.
    • type does not match the typed array type of pixels .
  • A gl.INVALID_FRAMEBUFFER_OPERATION error is thrown if the currently bound framebuffer is not framebuffer complete.

范例 

var canvas = document.getElementById('canvas');
var gl = canvas.getContext('webgl');
var 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

规范

规范 状态 注释
WebGL 1.0
The definition of 'readPixels' in that specification. 		推荐 初始定义。
OpenGL ES 2.0
The definition of 'glReadPixels' in that specification. 		标准 Man page of the OpenGL API.

浏览器兼容性

更新 GitHub 上的兼容性数据
桌面 移动
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
readPixels Chrome 9 Edge 12 Firefox 4 IE 11 Opera 12 Safari 5.1 WebView Android Yes Chrome Android 25 Firefox Android Yes Opera Android 12 Safari iOS 8 Samsung Internet Android 1.5
WebGL2 Chrome 56 Edge 79 Firefox 51 IE No Opera 43 Safari No WebView Android 58 Chrome Android 58 Firefox Android 51 Opera Android 43 Safari iOS No Samsung Internet Android 7.0

图例

完整支持

完整支持

不支持

不支持

另请参阅

元数据

  • 最后修改：
  1. WebGL API
  2. WebGLRenderingContext
  3. 特性
    1. canvas
    2. drawingBufferHeight
    3. drawingBufferWidth
  4. 方法
    1. activeTexture()
    2. attachShader()
    3. bindAttribLocation()
    4. bindBuffer()
    5. bindFramebuffer()
    6. bindRenderbuffer()
    7. bindTexture()
    8. blendColor()
    9. blendEquation()
    10. blendEquationSeparate()
    11. blendFunc()
    12. blendFuncSeparate()
    13. bufferData()
    14. bufferSubData()
    15. checkFramebufferStatus()
    16. clear()
    17. clearColor()
    18. clearDepth()
    19. clearStencil()
    20. colorMask()
    21. commit()
    22. compileShader()
    23. compressedTexImage[23]D()
    24. compressedTexSubImage2D()
    25. copyTexImage2D()
    26. copyTexSubImage2D()
    27. createBuffer()
    28. createFramebuffer()
    29. createProgram()
    30. createRenderbuffer()
    31. createShader()
    32. createTexture()
    33. cullFace()
    34. deleteBuffer()
    35. deleteFramebuffer()
    36. deleteProgram()
    37. deleteRenderbuffer()
    38. deleteShader()
    39. deleteTexture()
    40. depthFunc()
    41. depthMask()
    42. depthRange()
    43. detachShader()
    44. disable()
    45. disableVertexAttribArray()
    46. drawArrays()
    47. drawElements()
    48. enable()
    49. enableVertexAttribArray()
    50. finish()
    51. flush()
    52. framebufferRenderbuffer()
    53. framebufferTexture2D()
    54. frontFace()
    55. generateMipmap()
    56. getActiveAttrib()
    57. getActiveUniform()
    58. getAttachedShaders()
    59. getAttribLocation()
    60. getBufferParameter()
    61. getContextAttributes()
    62. getError()
    63. getExtension()
    64. getFramebufferAttachmentParameter()
    65. getParameter()
    66. getProgramInfoLog()
    67. getProgramParameter()
    68. getRenderbufferParameter()
    69. getShaderInfoLog()
    70. getShaderParameter()
    71. getShaderPrecisionFormat()
    72. getShaderSource()
    73. getSupportedExtensions()
    74. getTexParameter()
    75. getUniform()
    76. getUniformLocation()
    77. getVertexAttrib()
    78. getVertexAttribOffset()
    79. hint()
    80. isBuffer()
    81. isContextLost()
    82. isEnabled()
    83. isFramebuffer()
    84. isProgram()
    85. isRenderbuffer()
    86. isShader()
    87. isTexture()
    88. lineWidth()
    89. linkProgram()
    90. pixelStorei()
    91. polygonOffset()
    92. readPixels()
    93. renderbufferStorage()
    94. sampleCoverage()
    95. scissor()
    96. shaderSource()
    97. stencilFunc()
    98. stencilFuncSeparate()
    99. stencilMask()
    100. stencilMaskSeparate()
    101. stencilOp()
    102. stencilOpSeparate()
    103. texImage2D()
    104. texParameter[fi]()
    105. texSubImage2D()
    106. uniform[1234][fi][v]()
    107. uniformMatrix[234]fv()
    108. useProgram()
    109. validateProgram()
    110. vertexAttrib[1234]f[v]()
    111. vertexAttribPointer()
    112. viewport()
  5. WebGL 相关页面
    1. ANGLE_instanced_arrays
    2. EXT_blend_minmax
    3. EXT_color_buffer_half_float
    4. EXT_disjoint_timer_query
    5. EXT_frag_depth
    6. EXT_sRGB
    7. EXT_shader_texture_lod
    8. EXT_texture_filter_anisotropic
    9. OES_element_index_uint
    10. OES_standard_derivatives
    11. OES_texture_float
    12. OES_texture_float_linear
    13. OES_texture_half_float
    14. OES_texture_half_float_linear
    15. OES_vertex_array_object
    16. WEBGL_color_buffer_float
    17. WEBGL_compressed_texture_atc
    18. WEBGL_compressed_texture_etc1
    19. WEBGL_compressed_texture_pvrtc
    20. WEBGL_compressed_texture_s3tc
    21. WEBGL_compressed_texture_s3tc_srgb
    22. WEBGL_debug_renderer_info
    23. WEBGL_debug_shaders
    24. WEBGL_depth_texture
    25. WEBGL_draw_buffers
    26. WEBGL_lose_context
    27. WebGL2RenderingContext
    28. WebGLActiveInfo
    29. WebGLBuffer
    30. WebGLContextEvent
    31. WebGLFramebuffer
    32. WebGLObject
    33. WebGLProgram
    34. WebGLQuery
    35. WebGLRenderbuffer
    36. WebGLSampler
    37. WebGLShader
    38. WebGLShaderPrecisionFormat
    39. WebGLSync
    40. WebGLTexture
    41. WebGLTransformFeedback
    42. WebGLUniformLocation
    43. WebGLVertexArrayObject

版权所有  © 2014-2026 乐数软件    

工业和信息化部： 粤ICP备14079481号-1