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.
Type
(option: Option, component?: Record<string, any>) => Promise<SuccessCallbackResult>
Parameters
Option
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| canvas | CanvasProps | No | The canvas identifier, used when passing in canvas component instances (canvas type="2d") | |
| canvasId | string | Yes | The canvas ID, which is the canvas-id passed into the canvas component. | |
| quality | number | No | The image quality. This is only valid for .jpg images. Value range: (0, 1]. Values not in the range are processed as 1. | |
| destHeight | number | No | The height of the output image. | |
| destWidth | number | No | The width of the output image. | |
| fileType | "jpg" | "png" | "png" | No | The type of the destination file. |
| height | number | No | The height of the specified canvas area. | |
| width | number | No | The width of the specified canvas area. | |
| x | number | No | The x-coordinate of the top-left corner of the specified canvas area. | |
| y | number | No | The y-coordinate of the top-left the corner of the specified canvas area. | |
| complete | (res: any) => void | No | The callback function used when the API call completed (always executed whether the call succeeds or fails) | |
| fail | (res: any) => void | No | The callback function for a failed API call | |
| success | (res: Result) => void | No | The callback function for a successful API call |
SuccessCallbackResult
| Property | Type | Description |
|---|---|---|
| tempFilePath | string | The temporary path of the generated file |
| errMsg | string | Call result |
fileType
| Property | Description |
|---|---|
| jpg | A .jpg image |
| png | A .png image |
CanvasProps
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| type | string | No | The type of the canvas. Only webGL is supported. | |
| canvasId | string | No | The unique identifier of the canvas component. This property can be ignored if a type is specified. | |
| disableScroll | boolean | false | No | Disables screen scrolling and swipe-down-to-refresh features when the a finger taps to move on the canvas and a gesture event is bound. |
| onTouchStart | CommonEventFunction<any> | No | Finger touch starts | |
| onTouchMove | CommonEventFunction<any> | No | Finger moves after touch | |
| onTouchEnd | CommonEventFunction<any> | No | Finger touch ends | |
| onTouchCancel | CommonEventFunction<any> | No | Finger touch is interrupted by call reminder, pop-up window, etc. | |
| onLongTap | CommonEventFunction<any> | No | Triggered 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. | |
| onError | CommonEventFunction<onErrorEventDetail> | No | Triggers the error event when an error occurs. detail = {errMsg} |
onErrorEventDetail
| Property | Type |
|---|---|
| errMsg | string |
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
| API | WeChat Mini-Program | H5 | React Native |
|---|---|---|---|
| Taro.canvasToTempFilePath | ✔️ | ✔️ |