javascript - 如何将值从函数传递到 VueJs 中的变量?
问题描述
我正在获取图片网址的 base64。当我将getImage 函数传递给savepdf函数并尝试将回调函数 base64_data 存储在变量中时,它会引发错误
无法设置 undefined 的属性“base64logo”。
如何将值从回调函数传递给变量?希望你能理解我的问题。
data() {
return {
base64logo: '',
}
},
methods: {
getImage(url, callback) {
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function () {
var canvas = document.createElement('CANVAS');
console.log('canvas', canvas)
var ctx = canvas.getContext('2d');
var dataURL;
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL();
callback(dataURL);
canvas = null;
};
img.src = url;
},
savepdf() {
this.getImage(this.clientDetails.company_logo, function (base64_data) {
console.log('base64_data', base64_data);
this.base64logo = base64_data; //Error HERE
});
var doc = new jsPDF('p', 'pt', 'a4');
doc.setFontSize(9);
doc.addImage(this.base64logo, 'PNG', 150, 10, 40, 20); //Have to pass here.
}
}
解决方案
您应该使用箭头函数()=>{...}
来访问this
组件实例:
this.getImage(this.clientDetails.company_logo, (base64_data) =>{
console.log('base64_data', base64_data);
this.base64logo = base64_data; //Now you could access this
});
或分配this
给全局变量:
let that=this
this.getImage(this.clientDetails.company_logo, function(base64_data){
console.log('base64_data', base64_data);
that.base64logo = base64_data; //Now you could access this
});
推荐阅读
- google-cloud-platform - 使用 Google Group 访问 BigQuery 数据集以获取服务帐号
- java - isValid 中抛出的异常 - 休眠验证器
- swift - 减慢 didReceiveMemoryWarning() 中的进程
- spring-integration - 在 Spring 集成中使用 JDBC 入站通道适配器时从选择查询更新最后获取的 Id
- excel - 计算连续几天的总小时数
- javascript - React Navigation:AuthLoading、AuthStack 和 AppStack + Nested StackNavigators
- docker - 使用反向代理后面的 Keycloak 登录后无限循环
- laravel - 如何在 vue 组件的下拉列表中获取选定的值 id
- python - 熊猫,逆向一种热编码
- angular - Angular 7子路由替换父组件