百度智能小程序 像素数据绘制到画布

swan.canvasPutImageData

解释：将像素数据绘制到画布的方法。在自定义组件下，第二个参数传入自定义组件实例 this ，以操作组件内 <canvas> 组件。

Web 态说明：由于 Web 态遵循浏览器对 W3C 标准的实现程度，在 W3C 规范中， putImageData 方法的入参中的 width 、 height 、 data 需要遵循 data.length === 4 * width * height 的关系，否则会进入 fail 回调。但是在百度 APP 内的小程序环境下，客户端不会校验 data 的大小。为了避免 Web 态运行异常，请尽量保证入参符合标准。

（如果您是如代码示例所示的用法，通过 canvasGetImageData 获取 data 并传入 putImageData ，则只需要保证 width 和 height 与 canvasGetImageData 中的 width 和 height 一致即可。）

方法参数

Object object

object 参数说明

示例 

在开发者工具中打开

图片示例

代码示例

<view class="wrap">
    <canvas canvas-id="canvas1"></canvas>
    <canvas canvas-id="canvas2"></canvas>
    <button type="primary" bindtap="canvasPutImageData">canvasPutImageData</button>
</view>

Page({
    /* eslint-enable */
    onReady() {
        const ctx = swan.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() {
        swan.canvasGetImageData({
            canvasId: 'canvas1',
            x: 0,
            y: 0,
            width: 200,
            height: 200,
            success: res => {
                swan.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);
            }
        });
    }
});

.wrap {
    padding: 50rpx 30rpx;
}

错误码

Android

iOS