이미지 크기를 조정하고 입력 파일로 설정

Question

jquery를 사용하여 업로드시 이미지의 크기를 조정하면 작업이 잘됩니다. 하지만 내 문제는 크기가 조정 된 이미지를 보내고 싶습니다. 그리고 제출시 서버에 전송되는 것과 같이 입력 파일에 새 이미지의 데이터를 설정하고 싶습니다. 그러나 나는 이것을 습득 할 수 없다. 대용량 파일을 전송할 때마다 여기에 내 코드 :

<div> 
        <input name="photo" type="file"/>      
        <p><span></span></p> 
        <i></i> 
       </div> 
       <script> 

        $().ready(function() { 


         $("input[name*='photo']").change(function(e) { 
          var file = e.target.files[0]; 

          // RESET 
          $('#area p span').css('width', 0 + "%").html(''); 
          $('#area img, #area canvas').remove(); 


          // CANVAS RESIZING 
          $.canvasResize(file, { 
           width: 300, 
           height: 0, 
           crop: false, 
           quality: 80, 
           //rotate: 90, 
           callback: function(data, width, height) { 

            // SHOW AS AN IMAGE 


            $('<img>').load(function() { 

             $(this).css({ 
              'margin': '10px auto', 
              'width': width, 
              'height': height 
             }).appendTo('#area div'); 

            }).attr('src', data); 

            // here i am trying to assign the resized data to my image from my input file 


            $(this).files[0] = data; 

           } 
          }); 

         }); 
        }); 
       </script> 

       <script src="jqLibrary/jquery.exif.js"></script> 
       <script src="jqLibrary/jquery.canvasResize.js"></script> 
       <script src="jqLibrary/canvasResize.js"></script> 
      </div> 

Answer 1

내가이 파일 리더를 사용하여 작업 한 후 캔버스에 데이터를 전달할 수 및 난 platform.Here 코드의 일부인 force.com를 이용되었을 다음, javascritp 원격 통해 제출 : 중요한 부분 (readAsDataURL) 판독 파일 형식이었다

function uploadFile() { 
    var file = document.getElementById('attachmentFile').files[0]; 
    if(file != undefined) { 
    if(file.size <= maxFileSize) { 
    attachmentName = file.name; 
var fileReader = new FileReader(); 
fileReader.onloadend = function(e) { 
    var tempImg = new Image(); 
    var dataURL; 
    tempImg.src = this.result; 
    tempImg.onload = function() { 
     var MAX_WIDTH = 400; 
     var MAX_HEIGHT = 300; 
     var tempW = tempImg.width; 
     var tempH = tempImg.height; 
     if (tempW > tempH) { 
      if (tempW > MAX_WIDTH) { 
       tempH *= MAX_WIDTH/tempW; 
       tempW = MAX_WIDTH; 
      } 
     } else { 
     if (tempH > MAX_HEIGHT) { 
      tempW *= MAX_HEIGHT/tempH; 
      tempH = MAX_HEIGHT; 
     } 
    } 
    var canvas = document.getElementById('myCanvas'); 
    canvas.width = tempW; 
    canvas.height = tempH; 
    var ctx = canvas.getContext("2d"); 
      ctx.drawImage(this, 0, 0, tempW, tempH); 
    attachment = canvas.toDataURL("image/jpeg");     
    attachment = attachment.slice(23); 
    positionIndex=0; 
    fileSize = attachment.length; 
      //this is a function to post the data 
    uploadAttachment(null); 
     }    
} 
    fileReader.readAsDataURL(file); 

,536,

Answer 2

우리가 할 수있는 다시 보안 이유에 대한 inputfield을하지 asssign 값이 링크를 체크 아웃 : 사실 How to set a value to a file input in HTML?