开发
API

tt.canvasToTempFilePath

基础库 1.0.0 版本开始支持

把当前画布指定区域的内容导出生成指定大小 png 格式的图片,并返回文件路径。在 CanvasContext.draw 回调里调用该方法才能保证图片导出成功。

语法

tt.canvasToTempFilePath(options)

参数说明

options 为 object 类型,属性如下:

属性名类型默认值必填说明最低支持版本
canvasIdstring画布标识,传入 canvas 组件的 canvas-id 属性1.0.0
xnumber0指定的画布区域的左上角横坐标1.0.0
ynumber0指定的画布区域的左上角纵坐标1.0.0
widthnumbercanvas 宽度 -x指定的画布区域的宽度1.0.0
heightnumbercanvas 高度 -y指定的画布区域的高度1.0.0
destWidthnumberwidth输出的图片的宽度1.0.0
destHeightnumberheight输出的图片的高度1.0.0
successfunction接口调用成功的回调1.0.0
failfunction接口调用失败的回调1.0.0
completefunction接口调用结束的回调函数(调用成功、失败都会执行),回调参数同成功或失败回调1.0.0

回调成功

object 类型,属性如下:

属性类型说明最低支持版本
errMsgstring"canvasToTempFilePath:ok"1.0.0
tempFilePathstring生成文件的临时路径 (本地路径),图片格式为 png1.0.0

回调失败

object 类型,属性如下:

属性类型说明最低支持版本
errMsgstring"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

点击纠错
评价此篇文档