이미지를 12 x 12로 재조정하는 방법 누군가가 컴퓨터에서 파일을 선택할 때마다 자동으로 <input type =“file”name =“image []”class =“box_file”/>

Question

내 목표는 누군가 데스크톱에서 파일을 선택할 때마다 이미지를 자동으로 12 x 12로 다시 조정하는 것입니다. 예 :-사용자가 1000 x 500 이미지를 선택하면 자동으로 12 x 12로 크기가 조정되기를 원합니다.

HTML :

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

(Javascript 사용)

Answer 1

이미지가로드되는 즉시 12x12와 같은 특정 크기를 갖도록하려면 이미지의 'load'이벤트를 수신하여 이미지에 클래스를 추가해야합니다. 이렇게 :

이 클래스는 데스크톱에서 이미지가로드되는 즉시 적용되며이 클래스 내에서 필요한 크기를 지정합니다.

편집 : 귀하의 의견에 따라 내 게시물을 업데이트했습니다. 앞으로 질문하면서 질문 자체에 이러한 중요한 세부 사항을 지정하십시오.

아래 코드 스 니펫을 실행하고 크기가 지정된 이미지를 업로드하지만 여기에로드되면 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="#">

Answer 2

다음과 같이 할 수 있습니다.

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>

원하는대로 크기를 편집하지만 12px는 너무 작습니다.