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.
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've been creating a blog website. All post images should be 800x800 resolution. On the admin page, when the author uploading image to post, if he/she will try to upload a bigger than 800x800 resolution, I want to show an alert to an author like a bootstrap danger alert. How can I do it?
Before
After
Not completely sure, but try creating it using URL.createObjectURL() (https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL, How to make a simple image upload using Javascript/HTML), don't alter the image dimensions using css, insert the image into the page, and just get the image width and height.
I am using a theme which uses Dropdown.js to upload files.
The JS file is over 1000 Lines and I feel a bit lost.
What I am trying to achieve is that I have a container where you drop a file. I want that when you choose an image the image will appear as a preview in the same container. Right now when I upload an image the preview is a small 100x100 picture. I want it to fill out the whole content and be able to upload 1 image only.
I am not able to achieve it as I am pretty new and the big js file is confusing me. If someone can point me in the right direction it would be great.
You are searching in the wrong file, your js controls the user experience. You need to work in the css of the dropzone, and add a width auto, height auto. Now to upload only one file that goes in you specifications of your dropzone, max-file: 1.
Check the documentation.
https://www.dropzonejs.com/
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.
I've been searching everywhere without luck.
A simple way to reduce the width of an image picked with a simple <input type="file" /> without it losing it's aspect ratio.
I am using jquery to select the image before uploading like so: $('#image')[0] but I need a way to reduce the image width before uploading to reduce the file size and data being sent to the server and of course received when users download the image when visiting the website.
If you still need it you can use this library. It worked for me, because it lets you resize width, height and file size, obviously with a image quality loss.
Compress.js library