Taro.canvasPutImageData(option, component)

Draws pixel data to the canvas. In a custom component, the "this" of the custom component instance is passed as the second parameter to operate on the canvas component in this component.

Reference

Type

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

Parameters

Option

Property	Type	Required	Description
canvasId	string	Yes	The canvas ID, which is the canvas-id property passed into the canvas component.
data	Uint8ClampedArray	Yes	The image pixel data, which is a one-dimensional array in which every four items express the RGBA color of one pixel.
height	number	Yes	The height of the rectangular area of the source image.
width	number	Yes	The width of the rectangular area of the source image.
x	number	Yes	The position offset (x-axis offset) of the source image data on the destination canvas.
y	number	Yes	The position offset (y-axis offset) of the source image data on the destination canvas.
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

Sample Code

const data = new Uint8ClampedArray([255, 0, 0, 1])
Taro.canvasPutImageData({
  canvasId: 'myCanvas',
  x: 0,
  y: 0,
  width: 1,
  data: data,
  success: function (res) {}
})

API Support

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