title: Taro.canvasPutImageData(option, component)

sidebar_label: canvasPutImageData

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

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

  1. const data = new Uint8ClampedArray([255, 0, 0, 1])
  2. Taro.canvasPutImageData({
  3.   canvasId: 'myCanvas',
  4.   x: 0,
  5.   y: 0,
  6.   width: 1,
  7.   data: data,
  8.   success: function (res) {}
  9. })

API Support

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