0👍
Try the following.
this.image.size = file.size;
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = evt => {
let img = new Image();
img.onload = () => {
this.image.width = img.width;
this.image.height = img.height;
this.imageLoaded = true;
}
img.src = evt.target.result;
}
Would you like to try the following?
This is the source code that I tested.
<div>
<input type="file" @change="onThemeChange" />
{{ meta }}
</div>
export default class ComponentName extends Vue {
meta: any = null;
onThemeChange(event: any) {
const file = event.target.files[0];
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (evt: any) => {
let img = new Image();
const meta = (img.onload = () => {
return {
size: event.target.files[0].size,
width: img.width,
height: img.height,
};
});
img.src = evt.target.result;
this.meta = meta();
};
}
}
-1👍
const fileReader = new FileReader();
const image = new Image();
fileReader.onload = function (e) {
image.src = e.target.result;
image.onload = function() {
console.log(this.width, this.height);
}
}
Source:stackexchange.com