Taro.canvasGetImageData(option, component)

Obtains the implied pixel data for the canvas area.

Reference

Type

(option: Option, component?: Record<string, any>) => Promise<SuccessCallbackResult>

Parameters

Option

Property	Type	Required	Description
canvasId	string	Yes	The canvas ID, which is the canvas-id property passed into the canvas component.
height	number	Yes	The height of the rectangular area containing the image data to be extracted.
width	number	Yes	The width of the rectangular area containing the image data to be extracted.
x	number	Yes	The x-coordinate of the top-left corner of the rectangular area containing the image data to be extracted.
y	number	Yes	The y-coordinate of the top-left corner of the rectangular area containing the image data to be extracted.
complete	(res: any) => void	No	The callback function used when the API call completed (always executed whether the call succeeds or fails)
fail	(res: any) => void	No	The callback function for a failed API call
success	(res: Result) => void	No	The callback function for a successful API call

SuccessCallbackResult

Property	Type	Description
data	Uint8ClampedArray	The image pixel data, which is a one-dimensional array in which every four items express the RGBA color of one pixel.
height	number	The height of the image data rectangle
width	number	The width of the image data rectangle
errMsg	string	Call result

Sample Code

Taro.canvasGetImageData({
  canvasId: 'myCanvas',
  x: 0,
  y: 0,
  width: 100,
  height: 100,
  success: function (res) {
    console.log(res.width) // 100
    console.log(res.height) // 100
    console.log(res.data instanceof Uint8ClampedArray) // true
    console.log(res.data.length) // 100 * 100 * 4
  }
})

API Support

API	WeChat Mini-Program	H5	React Native
Taro.canvasGetImageData	✔️	✔️