百度智能小程序 像素數(shù)據(jù)繪制到畫布

swan.canvasPutImageData

解釋：將像素數(shù)據(jù)繪制到畫布的方法。在自定義組件下，第二個參數(shù)傳入自定義組件實例 this ，以操作組件內(nèi) <canvas> 組件。

Web 態(tài)說明：由于 Web 態(tài)遵循瀏覽器對 W3C 標(biāo)準(zhǔn)的實現(xiàn)程度，在 W3C 規(guī)范中， putImageData 方法的入?yún)⒅械?width 、 height 、 data 需要遵循 data.length === 4 * width * height 的關(guān)系，否則會進入 fail 回調(diào)。但是在百度 APP 內(nèi)的小程序環(huán)境下，客戶端不會校驗 data 的大小。為了避免 Web 態(tài)運行異常，請盡量保證入?yún)⒎蠘?biāo)準(zhǔn)。

（如果您是如代碼示例所示的用法，通過 canvasGetImageData 獲取 data 并傳入 putImageData ，則只需要保證 width 和 height 與 canvasGetImageData 中的 width 和 height 一致即可。）

方法參數(shù)

Object object

object 參數(shù)說明

示例 

在開發(fā)者工具中打開

圖片示例

代碼示例

<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