title: Taro.canvasGetImageData(option, component)

sidebar_label: canvasGetImageData

Obtains the implied pixel data for the canvas area.

Reference

Type

  1. (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

  1. Taro.canvasGetImageData({
  2.   canvasId: 'myCanvas',
  3.   x: 0,
  4.   y: 0,
  5.   width: 100,
  6.   height: 100,
  7.   success: function (res) {
  8.     console.log(res.width) // 100
  9.     console.log(res.height) // 100
  10.     console.log(res.data instanceof Uint8ClampedArray) // true
  11.     console.log(res.data.length) // 100 * 100 * 4
  12.   }
  13. })

API Support

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