以Promise风格调用： 支持
将像素数据绘制到画布的方法。在自定义组件下，第二个参数传入自定义组件实例 this ，以操作组件内 <canvas> 组件。
属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| x | number | 否 | 将要被提取的图像数据矩形区域的左上角横坐标 | |
| y | number | 否 | 将要被提取的图像数据矩形区域的左上角纵坐标 | |
| width | number | 否 | 将要被提取的图像数据矩形区域的宽度 | |
| height | number | 否 | 将要被提取的图像数据矩形区域的高度 | |
| canvasId | string | 否 | 画布标识，传入<canvas/>的 canvas-id | |
| data | string | 否 | 图像像素点数据，一维数组，每四项表示一个像素点的 rgba | |
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
属性 | 类型 | 说明 |
|---|---|---|
| errMsg | string | |
| cancel | boolean | 是否取消 |
| confirm | boolean | 是否确认 |
将像素数据绘制到画布的方法。在自定义组件下，第二个参数传入自定义组件实例 this ，以操作组件内 canvas 组件。
Web 态说明：由于 Web 态遵循浏览器对 W3C 标准的实现程度，在 W3C 规范中， putImageData 方法的入参中的 width 、 height 、 data 需要遵循 data.length === 4 * width * height的关系，否则会进入 fail 回调。但是在百度 APP 内的小程序环境下，客户端不会校验 data 的大小。为了避免 Web 态运行异常，请尽量保证入参符合标准。
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| canvasId | String | 0 | 否 | 一个数值数组，包含所有阈值 | |
| initialRatio | number | 0 | 否 | 初始的相交比例，如果调用时检测到的相交比例与这个值不相等且达到阈值，则会触发一次监听器的回调函数 | |
| selectAll | boolean | false | 否 | 是否同时观测多个目标节点（而非一个），如果设为 true ，observe 的 targetSelector 将选中多个节点（注意：同时选中过多节点将影响渲染性能） 2.0.0 |
canvas 组件的 id
CanvasContext
Page({
/* eslint-enable */
onReady() {
const ctx = xhs.createCanvasContext('canvas1');
ctx.setFillStyle('#0f0f0f');
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.setStrokeStyle('#0000ff');
ctx.moveTo(90, 70);
ctx.lineTo(70, 80);
ctx.lineTo(90, 80);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.setStrokeStyle('#0000ff');
ctx.moveTo(130, 70);
ctx.lineTo(110, 80);
ctx.lineTo(130, 80);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.setFillStyle('#00ff00');
ctx.arc(100, 100, 20, 0, 1 * Math.PI);
ctx.fill();
ctx.setFillStyle('#00ff00');
ctx.setFontSize(12);
ctx.fillText('haha', 165, 78);
ctx.moveTo(100, 50);
ctx.setStrokeStyle('#00ff00');
ctx.bezierCurveTo(100, 25, 75, 25, 50, 50);
ctx.stroke();
ctx.moveTo(100, 50);
ctx.quadraticCurveTo(75, 25, 50, 50);
ctx.stroke();
ctx.draw();
},
canvasPutImageData() {
xhs.canvasGetImageData({
canvasId: 'canvas1',
x: 0,
y: 0,
width: 200,
height: 200,
success: res => {
xhs.canvasPutImageData({
canvasId: 'canvas2',
x: 0,
y: 0,
width: 200,
height: 200,
data: res.data,
success: res => {
console.log('canvasPutImageData success');
},
fail: err => {
console.log('canvasPutImageData fail', err);
}
})
},
fail: err => {
console.log('canvasGetImageData fail', err);
}
});
}
});