title: Taro.canvasToTempFilePath(option, component)
sidebar_label: canvasToTempFilePath
把当前画布指定区域的内容导出生成指定大小的图片。在 draw()
回调里调用该方法才能保证图片导出成功。
Bug & Tip:
tip
: 在 draw
回调里调用该方法才能保证图片导出成功。
参考文档
类型
(option: Option, component?: Record<string, any>) => Promise<SuccessCallbackResult>
参数
Option
参数 |
类型 |
默认值 |
必填 |
说明 |
canvas |
CanvasProps |
|
否 |
画布标识,传入 canvas 组件实例 (canvas type="2d" 时使用该属性)。 |
canvasId |
string |
|
是 |
画布标识,传入 canvas 组件的 canvas-id |
quality |
number |
|
否 |
图片的质量,目前仅对 jpg 有效。取值范围为 (0, 1],不在范围内时当作 1.0 处理。 |
complete |
(res: CallbackResult) => void |
|
否 |
接口调用结束的回调函数(调用成功、失败都会执行) |
destHeight |
number |
|
否 |
输出的图片的高度 |
destWidth |
number |
|
否 |
输出的图片的宽度 |
fail |
(res: CallbackResult) => void |
|
否 |
接口调用失败的回调函数 |
fileType |
"jpg" | "png" |
"png" |
否 |
目标文件的类型 |
height |
number |
|
否 |
指定的画布区域的高度 |
success |
(result: SuccessCallbackResult) => void |
|
否 |
接口调用成功的回调函数 |
width |
number |
|
否 |
指定的画布区域的宽度 |
x |
number |
|
否 |
指定的画布区域的左上角横坐标 |
y |
number |
|
否 |
指定的画布区域的左上角纵坐标 |
SuccessCallbackResult
参数 |
类型 |
说明 |
tempFilePath |
string |
生成文件的临时路径 |
errMsg |
string |
调用结果 |
fileType
参数 |
说明 |
jpg |
jpg 图片 |
png |
png 图片 |
CanvasProps
参数 |
类型 |
默认值 |
必填 |
说明 |
type |
string |
|
否 |
指定 canvas 类型,支持 2d 和 webgl |
canvasId |
string |
|
否 |
canvas 组件的唯一标识符,若指定了 type 则无需再指定该属性 |
disableScroll |
boolean |
false |
否 |
当在 canvas 中移动时且有绑定手势事件时,禁止屏幕滚动以及下拉刷新 |
onTouchStart |
CommonEventFunction<any> |
|
否 |
手指触摸动作开始 |
onTouchMove |
CommonEventFunction<any> |
|
否 |
手指触摸后移动 |
onTouchEnd |
CommonEventFunction<any> |
|
否 |
手指触摸动作结束 |
onTouchCancel |
CommonEventFunction<any> |
|
否 |
手指触摸动作被打断,如来电提醒,弹窗 |
onLongTap |
CommonEventFunction<any> |
|
否 |
手指长按 500ms 之后触发,触发了长按事件后进行移动不会触发屏幕的滚动 |
onError |
CommonEventFunction<onErrorEventDetail> |
|
否 |
当发生错误时触发 error 事件,detail = {{errMsg: 'something wrong'} } |
onErrorEventDetail
示例代码
Taro.canvasToTempFilePath({
x: 100,
y: 200,
width: 50,
height: 50,
destWidth: 100,
destHeight: 100,
canvasId: 'myCanvas',
success: function (res) {
console.log(res.tempFilePath)
}
})
API 支持度
API |
微信小程序 |
H5 |
React Native |
Taro.canvasToTempFilePath |
✔️ |
✔️ |
|