0

My Goal is to rescale the image automatically to 12 x 12 whenever someone select the file from desktop. Eg: - If user select 1000 x 500 image i want it to automatically rescale to 12 x 12

HTML:

<input type="file" name="files[]" class="myimage" />

(Using Javascript)

Link
  • 1,198
  • 4
  • 14
CodeXoro
  • 11
  • 4

2 Answers2

2

If you want the image to have a certain dimensions such as 12x12 as soon as it loads, you will need to add a class to the image by listening to the 'load' event of the image. Like this:

The class will be applied as soon as the image is loaded from desktop, and within this class you will specify your required dimensions.

EDIT: I have updated my post as per your comment. Please make sure to specify these important details in the question itself while asking in the future.

Run the below code snippet and upload any sized image but when it loads here it will have 100px x 100px.

const input = document.querySelector(".myimage");

input.addEventListener("change", function () {
  if (input.files && input.files[0]) {
    const reader = new FileReader();

    reader.addEventListener("load", function (e) {
      document.querySelector("img").src = e.target.result;
      document.querySelector("img").classList.add("rescale-img");
    });
    reader.readAsDataURL(input.files[0]);
  }
});
.rescale-img{
    width: 100px;
    height: 100px;
    }
<input type="file" name="files" class="myimage" /> 
<img src="#">
Link
  • 1,198
  • 4
  • 14
  • yes this is what i wanted...... but not on click but automatically – CodeXoro Nov 14 '20 at 06:41
  • Yes, I've made changes for that, Please check the answer now – Link Nov 14 '20 at 06:42
  • User ---> Select File From Computer ----> File Automatically Rescaled to desired length and width, – CodeXoro Nov 14 '20 at 06:42
  • but it has one disadvantage that, the whole image is not resized to the 12px x 12px, but it is cropped and resized, what if we want the whole image to be resized to the 12px x 12px, without losing anything from the image, like not a crop method. – Rohan Devaki Nov 14 '20 at 06:43
  • 1
    It is not cropped, this is the original image: https://images.freeimages.com/images/large-previews/389/mitze-1380778.jpg The aspect ratio and the contents are intact, not cropped. – Link Nov 14 '20 at 06:44
  • 1
    ok thankyou, i also wanted to make this kind of code, for resizing, as it was a problem in one of my app. thankyou very much. – Rohan Devaki Nov 14 '20 at 06:47
  • this is my input form....... please change the above code according to it....... – CodeXoro Nov 14 '20 at 07:10
  • try now, click on button, select any large sized image, it will automatically rescale as it loads. – Link Nov 14 '20 at 07:23
  • Please make sure to add these important details to the question itself instead of comments in the future, hope this resolves your problem – Link Nov 14 '20 at 07:24
  • your code alone is working properly........ but not with my web app...... – CodeXoro Nov 14 '20 at 07:39
  • That means you are either integrating my code into your app wrong, or there is something else that is wrong in your code. Sorry, but I will not be able to help with that via stack overflow. Hope you'll find a way to make my code work in your app. – Link Nov 14 '20 at 07:47
  • it is only working in web page.....but when i download the resize image it still show the original size...... – CodeXoro Nov 14 '20 at 08:01
  • Yes, that is because that is how JS, HTML Elements and DOM work. You cannot just change the dimensions of the original image without some external library using vanilla Javascript. You can only edit how stuff looks on your webpage, JS is limited to a webpage, it is not a photo editing tool. – Link Nov 14 '20 at 08:03
  • Maybe you can use a library such as : compress.js https://www.npmjs.com/package/compress.js – Link Nov 14 '20 at 08:04
0

You can just do this:

function activate() {
  document.getElementById("image").style.width = "12rem"
  document.getElementById("image").style.height = "12rem"
}
<img src="https://upload.wikimedia.org/wikipedia/en/9/95/Test_image.jpg" id="image"></img>
<button onclick="activate()">Activate small thingy</button>

Edit the size to your liking, but 12px is too small.

Anvay
  • 362
  • 1
  • 14