canvascontext.putimagedata(object object)
主体： 企业支付宝小程序 、 个人支付宝小程序
相关文档： 旧版 canvas 迁移指南
canvascontext.putimagedata 用于将像素数据绘制到画布。
效果示例
代码示例运行效果
object object
| 属性 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| data | uint8clampedarray | - | 是 | 图像像素点数据，一维数组，每四项表示一个像素点的 rgba。 |
| x | number | - | 是 | 绘制像素点数据的 x 坐标。 |
| y | number | - | 是 | 绘制像素点数据的 y 坐标。 |
| width | number | - | 是 | 源图像数据矩形区域的宽度。 |
| height | number | - | 是 | 源图像数据矩形区域的高度。 |
| success | function | - | 否 | 调用成功的回调函数。 |
| fail | function | - | 否 | 调用失败的回调函数。 |
| complete | function | - | 否 | 调用结束的回调函数（调用成功、失败都会执行）。 |
代码示例
.js
.axml
const ctx = my.createcanvascontext('canvas')
ctx.drawimage('https://mdn.alipayobjects.com/huamei_esgcm9/afts/img/a*s8quqr2unzaaaaaaaaaaaaaadsajaq/original', 10, 10, 250, 80)
ctx.draw(true, () => {
// 获取 canvas 内指定区域内的像素信息
ctx.getimagedata({
x: 10,
y: 10,
width: 50,
height: 60,
success(res) {
// 把像素信息放到到 canvas 的指定位置
ctx.putimagedata({
x: 10,
y: 120,
width: 50,
height: 60,
data: res.data,
success() {}
})
}
})
})<canvas id="canvas">canvas>