Taro.canvasGetImageData(option, component)
Obtains the implied pixel data for the canvas area.
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 | ✔️ | ✔️ |