百度智能小程序隐含的像素数据

2020-09-05 14:21 更新

swan.canvasGetImageData

解释：返回一个数组，用来描述 canvas 区域隐含的像素数据。在自定义组件下，操作组件内 <canvas> 组件。

方法参数

Object object

object 参数说明

属性名	类型	必填	说明
canvasId	String	是	画布标识，传入 `<canvas>` 组件的 canvas-id 属性。
x	Number	是	将要被提取的图像数据矩形区域的左上角横坐标
y	Number	是	将要被提取的图像数据矩形区域的左上角纵坐标
width	Number	是	将要被提取的图像数据矩形区域的宽度
height	Number	是	将要被提取的图像数据矩形区域的高度
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success 返回参数说明

参数	类型	说明
width	Number	图像数据矩形的宽度
height	Number	图像数据矩形的高度
data	Uint8ClampedArray	图像像素点数据，一维数组，每四项表示一个像素点的 rgba 。

示例

在开发者工具中打开

图片示例

代码示例

<canvas canvas-id="myCanvas" class="canvas" />
<button type="primary" bindtap="canvasGetImageData">canvasGetImageData</button>

Page({
    onReady: function () {
        const CanvasContext = this.createCanvasContext('myCanvas');
        CanvasContext.setFillStyle('#0f0f0f');
        CanvasContext.arc(100, 100, 50, 0, 2 * Math.PI);
        CanvasContext.fill();
        CanvasContext.beginPath();
        CanvasContext.setStrokeStyle('#0000ff');
        CanvasContext.moveTo(90, 70);
        CanvasContext.lineTo(70, 80);
        CanvasContext.lineTo(90, 80);
        CanvasContext.closePath();
        CanvasContext.stroke();
        CanvasContext.beginPath();
        CanvasContext.setStrokeStyle('#0000ff');
        CanvasContext.moveTo(130, 70);
        CanvasContext.lineTo(110, 80);
        CanvasContext.lineTo(130, 80);
        CanvasContext.closePath();
        CanvasContext.stroke();
        CanvasContext.beginPath();
        CanvasContext.setFillStyle('#00ff00');
        CanvasContext.arc(100, 100, 20, 0, 1 * Math.PI);
        CanvasContext.fill();
        CanvasContext.setFillStyle('#00ff00');
        CanvasContext.setFontSize(12);
        CanvasContext.fillText('hello', 165, 78);
        CanvasContext.moveTo(100, 50);
        CanvasContext.setStrokeStyle('#00ff00');
        CanvasContext.bezierCurveTo(100, 25, 75, 25, 50, 50);
        CanvasContext.stroke();
        CanvasContext.moveTo(100, 50);
        CanvasContext.quadraticCurveTo(75, 25, 50, 50);
        CanvasContext.stroke();
        CanvasContext.draw();
    },
    canvasGetImageData() {
        swan.canvasGetImageData({
            canvasId: 'myCanvas',
            x: 0,
            y: 0,
            width: 100,
            height: 100,
            success: res => {
                console.log('canvasGetImageData success', res);
                swan.showModal({
                    title: '返回结果',
                    content: JSON.stringify(res)
                });
            },
            fail: err => {
                console.log('canvasGetImageData fail', err);
            }
        });
    }
});