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扫码

图片示例

代码示例

  1. <view class="wrap">    <canvas canvas-id="canvas1"></canvas>    <canvas canvas-id="canvas2"></canvas>    <button type="primary" bindtap="canvasPutImageData">canvasPutImageData</button></view>
  1. 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);            }        });    }});
  1. .wrap {    padding: 50rpx 30rpx;}

错误码

Android

iOS