小程序开放平台

文档中心
基础
界面
网络
数据缓存
媒体
位置
开放接口
设备
XHSML
性能
文件
数据分析
画布
createCanvasContext
canvasPutImageData
canvasGetImageData
canvasToTempFilePath
CanvasContext

xhs.canvasToTempFilePath

开发
>
JS API
>
画布
>
canvasToTempFilePath
>
更新时间:2025-04-11 19:19:14

以Promise风格调用: 支持

把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径。在自定义组件下,第二个参数传入组件实例this,以操作组件内<canvas/>组件。

参数

Object object

属性
类型
默认值
必填
说明
xnumber指定的画布区域的左上角横坐标
ynumber指定的画布区域的左上角纵坐标
widthnumber指定的画布区域的宽度
heightnumber指定的画布区域的高度
destWidthnumber输出图片宽度
destHeightnumber输出图片高度
canvasIdstring画布标识,传入<canvas/>的 canvas-id
fileTypestring目标文件的类型,有效值只支持 'jpg' 或 'png'
qualitynumber图片的质量,取值范围为 (0, 1],不在范围内时当作 1.0 处理
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

object.success 回调函数

属性
类型
说明
errMsgstring
cancelboolean是否取消
confirmboolean是否确认

代码示例

function canvasToTempFilePath(options) {
  return new Promise((resolve, reject) => {
    xhs.canvasToTempFilePath({
      canvasId: options.canvasId, // 画布标识,传入 <canvas/> 的 canvas-id
      x: options.x || 0, // 指定区域的左上角横坐标
      y: options.y || 0, // 指定区域的左上角纵坐标
      width: options.width || 300, // 指定区域的宽度
      height: options.height || 150, // 指定区域的高度
      destWidth: options.destWidth || 300, // 输出图片的宽度
      destHeight: options.destHeight || 150, // 输出图片的高度
      fileType: options.fileType || 'png', // 图片类型,支持 'jpg' 或 'png'
      quality: options.quality || 1.0, // 图片质量,范围 (0, 1]
      success: (res) => {
        console.log('导出图片成功:', res.tempFilePath);
        resolve(res.tempFilePath); // 返回生成的图片文件路径
      },
      fail: (err) => {
        console.error('导出图片失败:', err);
        reject(err); // 返回错误信息
      },
      complete: () => {
        console.log('导出图片操作完成');
      }
    });
  });
}

// 调用示例
canvasToTempFilePath({
  canvasId: 'myCanvas',
  x: 0,
  y: 0,
  width: 200,
  height: 200,
  destWidth: 400,
  destHeight: 400,
  fileType: 'jpg',
  quality: 0.8
})
  .then((filePath) => {
    console.log('生成的图片路径:', filePath);
  })
  .catch((err) => {
    console.error('操作失败:', err);
  });