tt.canvasToTempFilePath
基础库 1.0.0 版本开始支持
把当前画布指定区域的内容导出生成指定大小 png 格式的图片，并返回文件路径。在 CanvasContext.draw 回调里调用该方法才能保证图片导出成功。
语法
tt.canvasToTempFilePath(options)参数说明
options 为 object 类型，属性如下：
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
|---|---|---|---|---|---|
| canvasId | string | 是 | 画布标识，传入 canvas 组件的 canvas-id 属性 | 1.0.0 | |
| x | number | 0 | 否 | 指定的画布区域的左上角横坐标 | 1.0.0 |
| y | number | 0 | 否 | 指定的画布区域的左上角纵坐标 | 1.0.0 |
| width | number | canvas 宽度 -x | 否 | 指定的画布区域的宽度 | 1.0.0 |
| height | number | canvas 高度 -y | 否 | 指定的画布区域的高度 | 1.0.0 |
| destWidth | number | width | 否 | 输出的图片的宽度 | 1.0.0 |
| destHeight | number | height | 否 | 输出的图片的高度 | 1.0.0 |
| success | function | 否 | 接口调用成功的回调 | 1.0.0 | |
| fail | function | 否 | 接口调用失败的回调 | 1.0.0 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行），回调参数同成功或失败回调 | 1.0.0 | |
| fileType | string | png | 否 | 图片类型: png / jpg。如果指定了无效的类型则认为是 png | 2.26.0 |
| quality | number | 1 | 否 | 图片质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1 处理 | 2.26.0 |
回调成功
object 类型，属性如下：
| 属性 | 类型 | 说明 | 最低支持版本 |
|---|---|---|---|
| errMsg | string | "canvasToTempFilePath:ok" | 1.0.0 |
| tempFilePath | string | 生成文件的临时路径 (本地路径)，图片格式为 png | 1.0.0 |
回调失败
object 类型，属性如下：
| 属性 | 类型 | 说明 | 最低支持版本 |
|---|---|---|---|
| errMsg | string | "canvasToTempFilePath:fail " + 详细错误信息 | 1.0.0 |
代码示例
【代码示例 1】：手动调用
<!-- index.ttml -->
<canvas canvas-id="myCanvas" />
<button type="primary" bindtap="canvasToTempFilePath">
canvasToTempFilePath
</button>
<image src="{{src}}"></image>// index.js
Page({
data: {
src: "",
},
onLoad() {
const ctx = tt.createCanvasContext("myCanvas");
ctx.lineWidth = 10;
ctx.strokeRect(75, 140, 150, 110);
ctx.fillRect(130, 190, 40, 60);
ctx.beginPath();
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
ctx.closePath();
ctx.stroke();
ctx.draw();
},
canvasToTempFilePath() {
tt.canvasToTempFilePath({
x: 0,
y: 0,
width: 300,
height: 225,
destWidth: 300,
destHeight: 225,
canvasId: "myCanvas",
success: (res) => {
this.setData({
src: res.tempFilePath,
});
tt.showModal({
title: "图片路径",
content: JSON.stringify(res.tempFilePath),
});
},
});
},
});【代码示例 2】：在 draw 中使用
<!-- index.ttml -->
<canvas canvas-id="myCanvas" />
<button type="primary" bindtap="canvasToTempFilePath">
canvasToTempFilePath
</button>
<image src="{{src}}"></image>// index.js
Page({
data: {
src: "",
},
onLoad() {
const ctx = tt.createCanvasContext("myCanvas");
ctx.lineWidth = 10;
ctx.strokeRect(75, 140, 150, 110);
ctx.fillRect(130, 190, 40, 60);
ctx.beginPath();
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
ctx.closePath();
ctx.stroke();
ctx.draw(false, () => {
this.canvasToTempFilePath();
});
},
canvasToTempFilePath() {
tt.canvasToTempFilePath({
x: 0,
y: 0,
width: 300,
height: 225,
destWidth: 300,
destHeight: 225,
canvasId: "myCanvas",
success: (res) => {
this.setData({
src: res.tempFilePath,
});
tt.showModal({
title: "图片路径",
content: JSON.stringify(res.tempFilePath),
});
},
});
},
});Bug & Tip
- Tip：本 API 仅适用于
<canvas>组件 V1。 - Tip：width、height、destWidth 和 destHeight 指定的数值如果是浮点数（比如 100.2），部分
IOS系统导出图片异常。建议通过 Math.floor 等方法预处理。
点击纠错
该文档是否对你的开发有所帮助？
有帮助
没帮助
该文档是否对你的开发有所帮助？
有帮助
没帮助