my.canvastotempfilepath(object object)
主体： 企业支付宝小程序 、 个人支付宝小程序
相关文档： 旧版 canvas 迁移指南 、 native 渲染
将画布指定区域保存为图片。
此接口同时兼容新版和旧版画布的使用。关于新旧版本接口的差异和升级方法，请参考 旧版 canvas 迁移指南。
object object
| 属性 | 类型 | 默认值 | 必填 | 兼容性 | 描述 | ||||
|---|---|---|---|---|---|---|---|---|---|
| canvasid | string | - | 否 | - | 要提取的画布的 id。基于旧版画布使用时必填 |
||||
| canvas | canvas | - | 否 | 基础库: 2.7.15 支付宝: 10.2.35 |
要提取的画布的实例。基于新版画布使用时必填 |
||||
| x | number | 0 | 否 | - | 指定的画布区域的左上角横坐标 |
||||
| y | number | 0 | 否 | - | 指定的画布区域的左上角纵坐标 |
||||
| width | number | canvas宽度-x | 否 | - | 指定的画布区域的宽度 |
||||
| height | number | canvas高度-y | 否 | - | 指定的画布区域的高度 |
||||
| destwidth | number | width*屏幕像素密度 | 否 | - | 输出的图片的宽度 |
||||
| destheight | number | height*屏幕像素密度 | 否 | - | 输出的图片的高度 |
||||
| filetype | string | png | 否 | - | 导出的图片的类型 |
||||
|
|||||||||
| quality | number | 1 | 否 | - | 导出图片的质量。仅当 filetype 为 jpg 时有效。合法值为 (0, 1]，不在范围内时当作 1 处理 |
||||
| success | function | - | 否 | - | 调用成功的回调函数 |
||||
| fail | function | - | 否 | - | 调用失败的回调函数 |
||||
| complete | function | - | 否 | - | 调用结束的回调函数（调用成功、失败都会执行） |
success 回调函数
参数
object res
| 属性 | 类型 | 描述 |
|---|---|---|
| apfilepath | string | 图片路径(本地临时文件) |
新版画布使用
旧版画布使用
.js
.axml
page({
oncanvasready() {
my.createselectorquery().select('#canvas').node().exec((res) => {
const canvas = res[0].node
var ctx = canvas.getcontext('2d')
let img = canvas.createimage()
img.src = "https://mdn.alipayobjects.com/huamei_esgcm9/afts/img/a*ouykq5wgy-aaaaaaaaaaaaaadsajaq/original"
img.onload = function () {
ctx.drawimage(img, 0, 0)
my.canvastotempfilepath({
canvas: canvas,
x: 0,
y: 0,
width: 300,
height: 250,
filetype: 'jpg',
quality: 1,
success: (res) => {
console.log('res', res.apfilepath)
}
})
}
})
}
})
<canvas id="canvas" type="2d" onready="oncanvasready">canvas>
.js
.axml
page({
onready() {
const ctx = my.createcanvascontext('canvas')
ctx.drawimage('https://mdn.alipayobjects.com/huamei_esgcm9/afts/img/a*s8quqr2unzaaaaaaaaaaaaaadsajaq/original', 10, 10, 250, 80)
ctx.draw(true, () => {
my.canvastotempfilepath({
canvasid: 'canvas',
x: 0,
y: 0,
width: 300,
height: 250,
filetype: 'jpg',
quality: 1,
success: (res) => {
console.log('res', res.apfilepath)
},
})
})
}
})
<canvas id="canvas">canvas>
-
tip真机中保存图片后返回的文件扩展名为 .image，而非图片真实扩展名。若需判断文件真实扩展名，可使用 my.detectfiletype。