百度智能小程序 画布内容导出生成图片

swan.canvasToTempFilePath

解释：把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。在自定义组件下，第二个参数传入组件实例this，以操作组件内<canvas/>组件。

方法参数

Object object

object 参数说明

示例

图片示例

代码示例 1 

在开发者工具中打开

请使用2.7.0-beta 及其以上版本进行预览，正式版将在 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 中使用 

在开发者工具中打开

请使用 2.19.0-rc 及其以上版本进行预览，正式版将在 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 回调里调用该方法才能保证图片导出成功。
• Tip：当 x < 0 或者 x > canvase.width 时，x 会被置成 0，y 同理。
• Tip：当 x 合法的前提下，若 x + width > canvas.width 时， width 会被置成 canvas.width - x，y 同理。

错误码

Android

iOS