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参数说明

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

图片示例

代码示例

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

Page({
    onReady() {
        const CanvasContext = swan.createCanvasContext('canvas1');
        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('haha', 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();
    },
    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', res);
                    },
                    fail: err => {
                        console.log('canvasPutImageData fail', err);
                    }
                })
            },
            fail: err => {
                console.log('canvasGetImageData fail', err);
            }
        });
    }
});

.wrap {
    padding: 50rpx 30rpx;
}

错误码

Android

iOS