最近在使用uniapp+vue3开发小程序的时候,要开发个手写板组件,但是在使用uni.canvasToTempFilePath的时候,报错:canvasToTempFilePath:fail fail canvas is empty。
在搜集了各方解决资料,例如微信开发社区说,要在api后面追加this,但是在vue3+setup中是没有this的。
那我们就创建一个当前组件的实例就可以解决问题。
-
引入
getCurrentInstance
import { getCurrentInstance } from "vue";
-
声明当前实例
const instance = getCurrentInstance();
-
使用
uni.canvasToTempFilePath({
canvasId: "canvasId",
fileType: "png",
quality: 1,
success(res) {
if (record.length === 0) {
uni.showToast({
title: "您还没有签名!",
icon: "error",
duration: 1000,
});
resolve("您还没有签名!!");
} else {
resolve(res.tempFilePath);
}
},
fail: (err) => {}
}, instance);
最终不报错,而拿到了图片的地址!成功!