codecamp

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

swan.canvasToTempFilePath

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

方法参数

Object object

object 参数说明

属性名类型必填默认值说明

x

Number

0

指定的画布区域的左上角横坐标

y

Number

0

指定的画布区域的左上角纵坐标

width

Number

canvas 宽度 -x

指定的画布区域的宽度

height

Number

canvas 高度 -y

指定的画布区域的高度

destWidth

Number

width * 屏幕像素密度

输出图片宽度

destHeight

Number

height * 屏幕像素密度

输出图片高度

canvasId

String

画布标识,传入<canvas/>的 canvas-id 。

fileType

String

png

目标文件的类型,有效值只支持 'jpg' 或 'png' 。

quality

Number

图片的质量,取值范围为 (0, 1],不在范围内时当作 1.0 处理。

success

Function

接口调用成功的回调函数

fail

Function

接口调用失败的回调函数

complete

Function

接口调用结束的回调函数(调用成功、失败都会执行)

示例


图片示例

代码示例 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

错误码说明

201

解析失败,请检查调起协议是否合法。

1001

执行失败

iOS

错误码说明

202

解析失败,请检查参数是否正确。


百度智能小程序 隐含的像素数据
百度智能小程序 绘图上下文
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

百度智能小程序开发文档

百度智能小程序 组件

百度智能小程序 地图

百度智能小程序 画布

百度智能小程序 API

百度智能小程序 界面

百度智能小程序 关注小程序引导组件

百度智能小程序 自定义组件

百度智能小程序 媒体

百度智能小程序 设备

百度智能小程序 拨打电话

百度智能小程序 内存警报

百度智能小程序 手机联系人

百度智能小程序 用户截屏事件

百度智能小程序 第三方平台

百度智能小程序 开放接口

百度智能小程序 百度收银支付

百度智能小程序 分包预下载

百度智能小程序 数据分析

百度智能小程序 服务端

百度智能小程序 云开发

百度智能小程序 初始化

百度智能小程序 云函数

百度智能小程序 服务端初始化

百度智能小程序 服务器获取上下文

百度智能小程序 服务端云函数

百度智能小程序 开发教程

百度智能小程序 功能开发

百度智能小程序 基本原理

百度智能小程序 小程序自动化

百度智能小程序 视频教程

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }