imagedata canvasrenderingcontext2d.getimagedata(number sx, number sy, number sw, number sh)
基础库 或更高版本; 若版本较低,建议采取 兼容处理。
主体: 企业支付宝小程序 、 个人支付宝小程序
获取画布指定矩形区域内的像素数据。
效果示例
代码示例执行效果
number sx
区域左上角的 x 坐标
number sy
区域左上角的 y 坐标
number sw
区域的宽度。
number sh
区域的高度。
imagedata imagedata
矩形区域内的像素数据。
代码示例
.js
.axml
page({
oncanvasready() {
my.createselectorquery().select('#canvas').node().exec(res => {
const canvas = res[0].node
let ctx = canvas.getcontext('2d')
let image = canvas.createimage()
image.src = 'https://mdn.alipayobjects.com/huamei_esgcm9/afts/img/a*s8quqr2unzaaaaaaaaaaaaaadsajaq/original'
image.onload = () => {
ctx.drawimage(image, 10, 10, 250, 80)
// 获取画布指定区域像素数据
let imagedata = ctx.getimagedata(10, 10, 50, 60)
// 将像素数据放回画布
ctx.putimagedata(imagedata, 10, 120)
}
})
},
})
<canvas id="canvas" type="2d" onready="oncanvasready">canvas>