Skip to main content
Version: 3.x

Taro.canvasToTempFilePath(option, component)

Exports the content of the specified area of the current canvas to generate an image of the specified size. This method is called in the draw() callback to ensure the image is exported successfully.

Reference

Type

(option: Option, component?: Record<string, any>) => Promise<SuccessCallbackResult>

Parameters

Option

PropertyTypeDefaultRequiredDescription
canvasCanvasPropsNoThe canvas identifier, used when passing in canvas component instances (canvas type="2d")
canvasIdstringYesThe canvas ID, which is the canvas-id passed into the canvas component.
qualitynumberNoThe image quality. This is only valid for .jpg images. Value range: (0, 1]. Values not in the range are processed as 1.
destHeightnumberNoThe height of the output image.
destWidthnumberNoThe width of the output image.
fileType"jpg" | "png""png"NoThe type of the destination file.
heightnumberNoThe height of the specified canvas area.
widthnumberNoThe width of the specified canvas area.
xnumberNoThe x-coordinate of the top-left corner of the specified canvas area.
ynumberNoThe y-coordinate of the top-left the corner of the specified canvas area.
complete(res: any) => voidNoThe callback function used when the API call completed (always executed whether the call succeeds or fails)
fail(res: any) => voidNoThe callback function for a failed API call
success(res: Result) => voidNoThe callback function for a successful API call

SuccessCallbackResult

PropertyTypeDescription
tempFilePathstringThe temporary path of the generated file
errMsgstringCall result

fileType

PropertyDescription
jpgA .jpg image
pngA .png image

CanvasProps

PropertyTypeDefaultRequiredDescription
typestringNoThe type of the canvas. Only webGL is supported.
canvasIdstringNoThe unique identifier of the canvas component. This property can be ignored if a type is specified.
disableScrollbooleanfalseNoDisables screen scrolling and swipe-down-to-refresh features when the a finger taps to move on the canvas and a gesture event is bound.
onTouchStartCommonEventFunction<any>NoFinger touch starts
onTouchMoveCommonEventFunction<any>NoFinger moves after touch
onTouchEndCommonEventFunction<any>NoFinger touch ends
onTouchCancelCommonEventFunction<any>NoFinger touch is interrupted by call reminder, pop-up window, etc.
onLongTapCommonEventFunction<any>NoTriggered when a finger taps and holds on the screen for 500 ms. After this event is triggered, moving on the screen does not trigger screen scrolling.
onErrorCommonEventFunction<onErrorEventDetail>NoTriggers the error event when an error occurs. detail = {errMsg}

onErrorEventDetail

PropertyType
errMsgstring

Sample Code

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

API Support

APIWeChat Mini-ProgramH5React Native
Taro.canvasToTempFilePath✔️✔️