양식을 제출하기 전에 크기 조정 html5

제출하기 전에 이미지를 클라이언트에서 크기를 조정하고 양식에 추가해야합니다. 내가 생각양식을 제출하기 전에 크기 조정 html5

<html> 
    <body> 
     <form action="url"> 
     <label><b>Avatar image:</b></label> 
     <input type="file" id="imageLoader" name="avatar" onchange="return ShowImagePreview(this, 0);" /><br />  
     <canvas id="imageCanvas" class="previewcanvas" width="133" height="100"></canvas> 
     <br /> 
     <input type="submit" value="Save" /> 
     </form> 
     <script> 
     var imageLoader = document.getElementById('imageLoader'); 
     function HandleFileEvent(event, selection) 
     { 
      var img = new Image; 
      img.onload = function(event) { UpdatePreviewCanvas(event, img, selection) } 
      img.src = event.target.result; 
     } 

     function ShowImagePreview(object, selection) 
     { 
      if(typeof object.files === "undefined") 
       return; 

      var files = object.files; 

      if(!(window.File && window.FileReader && window.FileList && window.Blob)) 
      { 
       alert('The File APIs are not fully supported in this browser.'); 
       return false; 
      } 

      if(typeof FileReader === "undefined") 
      { 
       alert("Filereader undefined!"); 
       return false; 
      } 

      var file = files[0]; 

      if(file !== undefined && file != null && !(/image/i).test(file.type)) 
      { 
       alert("File is not an image."); 
       return false; 
      } 

      reader = new FileReader(); 
      reader.onload = function(event) { HandleFileEvent(event, selection) } 
      reader.readAsDataURL(file); 
     } 

     function UpdatePreviewCanvas(event, img, selection) 
     {  
      var canvas = document.getElementById('imageCanvas'); 
      var context = canvas.getContext('2d'); 

      var world = new Object(); 
      world.width = canvas.offsetWidth; 
      world.height = canvas.offsetHeight; 

      canvas.width = world.width; 
      canvas.height = world.height; 

      var WidthDif = img.width - world.width; 
      var HeightDif = img.height - world.height; 

      var Scale = 0.0; 
      if(WidthDif > HeightDif) 
      { 
       Scale = world.width/img.width; 
      } 
      else 
      { 
       Scale = world.height/img.height; 
      } 
      if(Scale > 1) 
       Scale = 1; 

      var UseWidth = Math.floor(img.width * Scale); 
      var UseHeight = Math.floor(img.height * Scale); 

      var x = Math.floor((world.width - UseWidth)/2); 
      var y = Math.floor((world.height - UseHeight)/2); 

      context.drawImage(img, x, y, UseWidth, UseHeight); 
     } 
     </script> 
    </body> 
</html>

캔버스에 이미지를 배치하는 것입니다하지만 난 입력에 그것을 돌려 보내야하는 방법을 모른다 :

다음은 전체 HTML입니다. (이 link 사용)

는

출처

2013-10-29 Mosh Feu

당신은 원본 이미지의 크기를 조정의 drawImage의 확장 된 버전을 사용할 수 있습니다.

확장 된 버전은 전체 원본 이미지를 [0,0] 및 img.width x img.height에서 가져옵니다.

그런 다음 원본을 축소하여 [0,0]

context.drawImage( img, 0,0,img.width,img.height, 0,0,UseWidth,UseHeight);

에서 캔버스의 확장 버전을 그립니다

출처

2013-10-30 15:26:12 markE

양식을 제출하기 전에 크기 조정 html5

답변

관련 문제