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 等方法预处理。
点击纠错
该文档是否对你的开发有所帮助?
有帮助
没帮助
该文档是否对你的开发有所帮助?
有帮助
没帮助