Skip to main content
Version: 3.x

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

PropertyTypeRequiredDescription
canvasIdstringYesThe canvas ID, which is the canvas-id property passed into the canvas component.
heightnumberYesThe height of the rectangular area containing the image data to be extracted.
widthnumberYesThe width of the rectangular area containing the image data to be extracted.
xnumberYesThe x-coordinate of the top-left corner of the rectangular area containing the image data to be extracted.
ynumberYesThe y-coordinate of the top-left corner of the rectangular area containing the image data to be extracted.
complete(res: any) => voidNoThe callback function used when the API call completed (always executed whether the call succeeds or fails)
fail(res: any) => voidNoThe callback function for a failed API call
success(res: Result) => voidNoThe callback function for a successful API call

SuccessCallbackResult

PropertyTypeDescription
dataUint8ClampedArrayThe image pixel data, which is a one-dimensional array in which every four items express the RGBA color of one pixel.
heightnumberThe height of the image data rectangle
widthnumberThe width of the image data rectangle
errMsgstringCall 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

APIWeChat Mini-ProgramH5React Native
Taro.canvasGetImageData✔️✔️