小程序开放平台

文档中心
基础
路由
跳转
转发
界面
网络
支付
数据缓存
媒体
位置
开放接口
设备
XHSML
性能
第三方平台
文件
数据分析
画布
createCanvasContext
canvasPutImageData
canvasGetImageData
canvasToTempFilePath
CanvasContext

xhs.canvasPutImageData

开发
>
JS API
>
画布
>
canvasPutImageData
>
更新时间:2025-12-04 20:19:30

以Promise风格调用: 支持

将像素数据绘制到画布的方法。在自定义组件下,第二个参数传入自定义组件实例 this ,以操作组件内 Canvas 组件。

参数

Object object

属性
类型
默认值
必填
说明
xnumber将要被提取的图像数据矩形区域的左上角横坐标
ynumber将要被提取的图像数据矩形区域的左上角纵坐标
widthnumber将要被提取的图像数据矩形区域的宽度
heightnumber将要被提取的图像数据矩形区域的高度
canvasIdstring画布标识,传入<canvas/>的 canvas-id
datastring图像像素点数据,一维数组,每四项表示一个像素点的 rgba
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

object.success 回调函数

属性
类型
说明
errMsgstring
cancelboolean是否取消
confirmboolean是否确认

代码示例

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