Skip to main content
Version: 3.x

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

PropertyTypeRequiredDescription
canvasIdstringYesThe canvas ID, which is the canvas-id property passed into the canvas component.
dataUint8ClampedArrayYesThe image pixel data, which is a one-dimensional array in which every four items express the RGBA color of one pixel.
heightnumberYesThe height of the rectangular area of the source image.
widthnumberYesThe width of the rectangular area of the source image.
xnumberYesThe position offset (x-axis offset) of the source image data on the destination canvas.
ynumberYesThe position offset (y-axis offset) of the source image data on the destination canvas.
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

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

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