跳到主要内容
版本:3.x

Taro.canvasToTempFilePath(option, component)

把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。

Bug & Tip:

  1. tip: 在 draw 回调里调用该方法才能保证图片导出成功。

支持情况:

参考文档

类型

(option: Option, component?: TaroGeneral.IAnyObject) => Promise<SuccessCallbackResult>

参数

参数类型说明
optionOption
componentTaroGeneral.IAnyObject在自定义组件下,当前组件实例的this,以操作组件内 canvas 组件

Option

参数类型默认值必填说明
canvasCanvas画布标识,传入 canvas 组件实例 (canvas type="2d" 时使用该属性)。
canvasIdstring画布标识,传入 canvas 组件的 canvas-id
qualitynumber图片的质量,目前仅对 jpg 有效。取值范围为 (0, 1],不在范围内时当作 1.0 处理。
complete(res: TaroGeneral.CallbackResult) => void接口调用结束的回调函数(调用成功、失败都会执行)
destHeightnumber输出的图片的高度
destWidthnumber输出的图片的宽度
fail(res: TaroGeneral.CallbackResult) => void接口调用失败的回调函数
fileTypekeyof FileType"png"目标文件的类型
heightnumber指定的画布区域的高度
success(result: SuccessCallbackResult) => void接口调用成功的回调函数
widthnumber指定的画布区域的宽度
xnumber指定的画布区域的左上角横坐标
ynumber指定的画布区域的左上角纵坐标

SuccessCallbackResult

参数类型必填说明
tempFilePathstring生成文件的临时路径
apFilePathstring图片路径(本地临时文件)。
API 支持度: alipay
errMsgstring调用结果

FileType

参数说明
jpgjpg 图片
pngpng 图片

CanvasProps

参数类型默认值必填说明
typestring指定 canvas 类型,支持 2d 和 webgl
canvasIdstringcanvas 组件的唯一标识符,若指定了 type 则无需再指定该属性
disableScrollbooleanfalse当在 canvas 中移动时且有绑定手势事件时,禁止屏幕滚动以及下拉刷新
onTouchStartTaroGeneral.CommonEventFunction手指触摸动作开始
onTouchMoveTaroGeneral.CommonEventFunction手指触摸后移动
onTouchEndTaroGeneral.CommonEventFunction手指触摸动作结束
onTouchCancelTaroGeneral.CommonEventFunction手指触摸动作被打断,如来电提醒,弹窗
onLongTapTaroGeneral.CommonEventFunction手指长按 500ms 之后触发,触发了长按事件后进行移动不会触发屏幕的滚动
onErrorTaroGeneral.CommonEventFunction<onErrorEventDetail>当发生错误时触发 error 事件,detail = {errMsg: 'something wrong'}

onErrorEventDetail

参数类型
errMsgstring

示例代码

Taro.canvasToTempFilePath({
x: 100,
y: 200,
width: 50,
height: 50,
destWidth: 100,
destHeight: 100,
canvasId: 'myCanvas',
success: function (res) {
console.log(res.tempFilePath)
}
})