Menu
I have an input type file
<input type="file" class="userUploadButton" name="image" accept="image/*" on-change={this.setImage}/>
and Vue - method "setImage"
setImage(e){
const file = e.target.files[0];
if (!file.type.includes('image/')) {
Vue.swal({
title: 'Error!',
text: 'This is no image',
type: 'error',
});
return;
}
if(typeof FileReader === 'function'){
const reader = new FileReader();
reader.onload = (event) => {
this.imgSrc = event.target.result;
this.$refs.cropper.replace(event.target.result);
};
reader.readAsDataURL(file);
}else{
Vue.swal({
title: 'Error',
text: 'Your browser does not support FileReader API',
type: 'error',
});
}
},
In the moment when user upload an image, I have to check width and height of this image and stop uploading (or delete the image)
326
The height and width of an image can be set using height and width attribute. The height and width can be set in terms of pixels. The <img> height attribute is used to set the height of the image in pixels. The <img> width attribute is used to set the width of the image in pixels.
To get an element's height with Vue. js, we can assign a ref to the element we want to get the height for. Then we can get the height with the clientHeight property of the element that's been assigned the ref. We assigned the ref with the ref prop set to a name.
To import and use image in a Vue. js single file component, we can set the src prop of the image to the image path returned by the require function. to set the src prop of the image to the path returned by require . We call require with the relative path of the image to return the resolved path of the image.
And create a JavaScript function to show the height and width (size) of the image. If you click on the button click on the explore you will get the height and width of the image. But I didn’t define any size ( height and width ) for the image.
In JQuery it is very easy to get the height and width of an image that is displayed with styles configured. There is no direct method to retrieve the real source image height and width, We can get the DOM element using the selector of an image and can use naturalHeight and naturalWidth.
.naturalHeight and .naturalWidth will give you the actual height and width of the image file. So, this time it will show you the real size of your image, not the size you have mentioned here
Okay, I have an image with the file name myfile.jpg and in the same directory just create an HTML file to show the image on a webpage. And create a JavaScript function to show the height and width (size) of the image. If you click on the button click on the explore you will get the height and width of the image.
Actually, the file is just a file, you need to create an image using new Image() from the file source.
Please check example to here and the same type of question to here.
Use the following source code
var width, height;
var _URL = window.URL || window.webkitURL;
img = new Image();
img.onload = function() {
// here you got the width and height
width = this.width;
height = this.height;
};
img.onerror = function() {
alert( "not a valid file: " + file.type);
};
img.src = _URL.createObjectURL(file);
Hopes this will help you!!
144
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
