Taro.canvasToTempFilePath(option, component)

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

Bug & Tip：

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

支持情况：

参考文档

类型

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

参数

参数	类型	说明
option	Option
component	TaroGeneral.IAnyObject	在自定义组件下，当前组件实例的this，以操作组件内 canvas 组件

Option

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

SuccessCallbackResult

参数	类型	必填	说明
tempFilePath	string	是	生成文件的临时路径
apFilePath	string	否	图片路径(本地临时文件)。 API 支持度: alipay
errMsg	string	是	调用结果

FileType

参数	说明
jpg	jpg 图片
png	png 图片

CanvasProps

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

onErrorEventDetail

参数	类型
errMsg	string

示例代码

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