以Promise风格调用: 支持
把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径。在自定义组件下,第二个参数传入组件实例this,以操作组件内<canvas/>组件。
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
x | number | 否 | 指定的画布区域的左上角横坐标 | |
y | number | 否 | 指定的画布区域的左上角纵坐标 | |
width | number | 否 | 指定的画布区域的宽度 | |
height | number | 否 | 指定的画布区域的高度 | |
destWidth | number | 否 | 输出图片宽度 | |
destHeight | number | 否 | 输出图片高度 | |
canvasId | string | 否 | 画布标识,传入<canvas/>的 canvas-id | |
fileType | string | 否 | 目标文件的类型,有效值只支持 'jpg' 或 'png' | |
quality | number | 否 | 图片的质量,取值范围为 (0, 1],不在范围内时当作 1.0 处理 | |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
属性 | 类型 | 说明 |
---|---|---|
errMsg | string | |
cancel | boolean | 是否取消 |
confirm | boolean | 是否确认 |
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); });