Task: to upload image and check its resolution (width/height)
Problem: I'm not able to get width and height from file data
How can I get width and height from file data on React.js ?
data that I have, when image uploaded
Related
I have been trying to convert an HTML node in my react code into Image and download it afterward. There are several libraries which we can use to perform that job for us like html-to-image, dom-to-image. But the problem is these libraries download the image at its view size, not at its original size.
I mean if I have a component that has different styles at different screens when I download an image of that component I want the image to have the styles of the larger screen, irrespective of what my current window size is.
If I have a responsive component that spreads and shrinks with the window size I want the image of that component to look like how the component looked at larger screens.
If you want to download the image with the image's original dimension then simply use width and height for width and height of the image.
If you want to download the image with the dimension of its container including padding used in the container, then use clientWidth and clientHeight property of the image element.
Refer this link
If you want to download the image with the image's original dimension then simply use width and height for width and height of the image. If you want to download the image with the dimension of its container including padding used in the container, then use clientWidth and clientHeight property of the image element. Edited the image for minimum required of pixels.
I have found that we can only download an HTML node in a react tree at its view size and style. Suppose that we have a table in a page. When we are a large screen we see that table in one style. But on a smaller screen, we see it in a different style. When we download an image of that table, we want the table to be downloaded at its large-screen style and size, irrespective of the screen size.
Apparently, we can only download what is present in the physical DOM. If the physical DOM has a smaller version we can only download the smaller version of it. If physical DOM contains a larger version of the table we can download the larger version on it.
What I did to overcome this problem is to open a modal when user wanted to download the image of that table. I drew a large version of the table with fixed height and width on that modal and downloaded the image from that modal. In smaller screen this big Table inside a modal was not looking very nice, even though it was for few moments only. So to hide this big table, I have put a nice loading animation on top with fixed position.
After download completes, I close the modal.
I use the Basic Plus UI version of blueimp jQuery-File-Upload for Upload images (https://github.com/blueimp/jQuery-File-Upload).
My wish is an output of the width and height of the image in addition to the file size and a minimal limitation of image size when uploading.
While searching on this page I found a script here from v1pr that output a message if you choose a too small image size. That works well.
But I would like to abort the upload process when closing the message.
And how do I get the image size (width x height) spent right next to the file size?
In addition to listing of the file size I would like to have the picture size of the picture listed.
When i am uploading photos in php and I went to give preview of the image to user. I don't want to generate a separate for that. But i want to set perfect height and width of that photo to make make it look like thumbnail;
You could try creating a thumbnail class and adding any of these properties to set the 'ideal' size for the image:
max-width
min-width
max-height
min-height
I am using ionic2.
I display the list of images.But these have different height and width.
Here is my URL
https://firebasestorage.googleapis.com/v0/b/apartments-ea9e5.appspot.com/o/bulletinboard%2Fsample-1494575890205.jpg?alt=media&token=69debcf1-c563-4799-8768-e64a58103e56
another URL
https://firebasestorage.googleapis.com/v0/b/apartments-ea9e5.appspot.com/o/bulletinboard%2Fsample-1494575890149.jpg?alt=media&token=81122cfa-290a-400e-b6e8-925f13db5291
I need these images are same height and width using javascript.
How can i do this?
Kindly advice me,
Thanks.
I have a problem with my project, and it is about converting the html file to pdf. I have one question, how can we alter the size of image in jspdf because when i'm downloading the pdf, it show that the image is not fit in the page and only show half of it for A4.then, i'm trying using the A0 size but the font will become very small even though the image is right. can some one tell how to fit the image or maybe changing the font size?
(and also i'm using HTMLfromPdf.js)
You can resize the canvas image using the method parameters,
pdf.addImage(imgData,'JPEG',0,0,canvas.width*0.2,canvas.height*0.2,"a","FAST");
You can calculate the required ratio and replace the image width and height parameters.
You can use dimensions for jsPDF directly from canvas object like described there
https://stackoverflow.com/a/65124814/9026103.