tt.canvasToTempFilePath
收藏
我的收藏

注意：该接口已停止维护，建议使用Canvas 组件 V2
基础库 1.0.0 版本开始支持

警告
此接口将逐步废弃，后续不再维护，请及时修改下线，避免影响小程序使用。
替代方案：请使用 Canvas V2 的 toDataURL 方法获取图片展示的 data URI。
如需下载到临时目录，请自行将 data URI 调用 fileSystemManager.writeFile 下载（encoding: 'base64'）。

把当前画布指定区域的内容导出生成指定大小 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 等方法预处理。

tt.canvasToTempFilePath收藏我的收藏