百度智能小程序 畫布內(nèi)容導(dǎo)出生成圖片

swan.canvasToTempFilePath

解釋：把當(dāng)前畫布指定區(qū)域的內(nèi)容導(dǎo)出生成指定大小的圖片，并返回文件路徑。在自定義組件下，第二個(gè)參數(shù)傳入組件實(shí)例this，以操作組件內(nèi)<canvas/>組件。

方法參數(shù)

Object object

object 參數(shù)說(shuō)明

示例

圖片示例

代碼示例 1 

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

請(qǐng)使用2.7.0-beta 及其以上版本進(jìn)行預(yù)覽，正式版將在 2.6.1 以上版本支持。

<canvas canvas-id="myCanvas" />
<button type="primary" bindtap="canvasToTempFilePath">canvasToTempFilePath</button>
<image src="{{src}}"></image>

Page({
    data: {
        src: ''
    },
    onLoad() {
        const canvasContext = this.createCanvasContext('myCanvas');
        canvasContext.setFillStyle('#ff0000');
        canvasContext.arc(100, 50, 50, 0, 2 * Math.PI);
        canvasContext.fill();
        canvasContext.draw();
    },
    canvasToTempFilePath() {
        swan.canvasToTempFilePath({
            x: 0,
            y: 0,
            width: 300,
            height: 225,
            destWidth: 300,
            destHeight: 225,
            canvasId: 'myCanvas',
            fileType: 'jpg',
            quality: 1,
            success: res => {
                this.setData('src', res.tempFilePath);
                swan.showModal({
                    title: '圖片路徑',
                    content: JSON.stringify(res.tempFilePath)
                })
            }
        })
    }
})

代碼示例 2：在 draw 中使用 

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

請(qǐng)使用 2.19.0-rc 及其以上版本進(jìn)行預(yù)覽，正式版將在 2.18.1（不包括 2.18.1 ）以上版本支持。

<canvas canvas-id="myCanvas" />
<image src="{{src}}"></image>

Page({
     data: {
        src: ''
    },
    onLoad() {
        const canvasContext = this.createCanvasContext('myCanvas');
        canvasContext.setFillStyle('#ff0000');
        canvasContext.arc(100, 50, 50, 0, 2 * Math.PI);
        canvasContext.fill();
        canvasContext.draw(() =>{
            swan.canvasToTempFilePath({
                x: 0,
                y: 0,
                width: 300,
                height: 225,
                destWidth: 300,
                destHeight: 225,
                canvasId: 'myCanvas',
                fileType: 'jpg',
                quality: 1,
                success: res => {
                    this.setData('src', res.tempFilePath);
                    swan.showModal({
                        title: '圖片路徑',
                        content: JSON.stringify(res.tempFilePath)
                    })
                }
            })
        });
    }
});

Bug & Tip

• Tip：在 draw 回調(diào)里調(diào)用該方法才能保證圖片導(dǎo)出成功。
• Tip：當(dāng) x < 0 或者 x > canvase.width 時(shí)，x 會(huì)被置成 0，y 同理。
• Tip：當(dāng) x 合法的前提下，若 x + width > canvas.width 時(shí)， width 會(huì)被置成 canvas.width - x，y 同理。

錯(cuò)誤碼

Android

iOS