자바 스크립트 입력 해상도 미리보기 이미지의 낮은 해상도

Question

입력 필드에 입력 이미지 (원본 크기)를 미리 보는이 자바 스크립트 기능이 있습니다.

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#blah').attr('src', e.target.result); 
     } 
     reader.readAsDataURL(input.files[0]); 
    } 

    $("#imgInp").change(function(){ 
     readURL(this); 
    }); 
} 

및 관련 HTML :

<form id="form1" runat="server"> 
    <input type='file' id="imgInp" /> 
    <img id="blah" src="#" alt="your image" /> 
</form> 

나는이 대답에서 코드를 가지고 : Preview an image before it is uploaded

내 질문은 경우와는 미리보기 이미지의 해상도를 변경할 수 있습니다 방법, 미리보기 이미지의 해상도 만 바꾸고 싶습니다.

아이디어가 있으십니까?

Answer 1

drawing that in canvas으로 이미지를 미리 볼 수도 있습니다. 캔버스에서 그림을 그리는 동안 사용자 지정 해상도를 지정할 수 있습니다. 그

function readURL(input) { 
 

 
    if (input.files && input.files[0]) { 
 
     var reader = new FileReader(); 
 

 
     reader.onload = function (e) { 
 
      $('#blah').attr('src', e.target.result); 
 
      var ctx = $('#myCanvas')[0].getContext("2d"); 
 
      ctx.drawImage($('#blah')[0], 0, 0, 240, 297); 
 
     } 
 

 
     reader.readAsDataURL(input.files[0]); 
 
    } 
 
} 
 

 
$("#imgInp").change(function(){ 
 
    readURL(this); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form1" runat="server"> 
 
    <input type='file' id="imgInp" /> 
 
    <img id="blah" style="display:none;" /> 
 
    <canvas id="myCanvas" width="240" height="297"></canvas> 
 
</form>

Answer 2

같은 무언가가 당신의 IMG을 변경하고 너비를 추가 및/또는 높이가 원하는 크기의 예에 해상도를 수축 속성 :

<form id="form1" runat="server"> 
    <input type='file' id="imgInp" /> 
    <img id="blah" src="#" alt="your image" width="300" height="300" /> <!-- Change the width and height accordingly. --> 
</form> 

Answer 3

function readURL(input) { 
    if (input.files && input.files[0]) { 
    var reader = new FileReader(); 

    reader.onload = function (e) { 
     var image = new Image(); 
     image.src = e.target.result; 

     image.onload = function() { 
     // access image size here 
     var aspectRatio = this.width/this.height, 
      thumbWidth = 100, 
      thumbHeight = aspectRatio * thumbWidth; 

     $('#blah').attr('src', this.src); 
     $('#blah').attr('width', thumbWidth); 
     $('#blah').attr('height', thumbHeight); 
     }; 
    }; 
    reader.readAsDataURL(input.files[0]); 
    } 

    $("#imgInp").change(function(){ 
    readURL(this); 
    }); 
} 

이 힘 이미지를 작게 만들 때 이미지의 종횡비를 유지하십시오. 폭을 원하는대로 변경하십시오.