以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);
});