在提交表单前在javascript中减小客户端图像的大小

Question

在客户端阅读后，我试图减小图像的大小，javascript代码如下，我在这里得到两个问题 1）图像预览未显示在img id“img-upload” 2）通过表单提交“reader.readAsDataURL（input.files [0]）提交的文件不是缩小的文件。

我曾尝试更改代码以移动图像onload中的读取器，然后传递e.target.files [0]但这也不起作用。

请告诉我如何调整大小，然后通过表单提交将其发送到我的后端。

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

       reader.onload = function (e) { 
         $('#img-upload').attr('src', e.target.result); 
         img.onload = function() { 
          var MAX_WIDTH = 100; 
          var MAX_HEIGHT = 100; 
          var width = img.width; 
          var height = img.height; 

          if (width > height) { 
           if (width > MAX_WIDTH) { 
            height *= MAX_WIDTH/width; 
            width = MAX_WIDTH; 
           } 
          } else { 
           if (height > MAX_HEIGHT) { 
            width *= MAX_HEIGHT/height; 
            height = MAX_HEIGHT; 
           } 
          } 

          var canvas = document.createElement("canvas"); 
          canvas.width = width; 
          canvas.height = height; 
          canvas.getContext("2d").drawImage(this, 0, 0, width, height); 

          img.src = e.target.result; 
          $('#img-upload').append(img); 
         } 

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

      } 
     } 

Answer 1

您的代码正在创建因为这

img.src = e.target.result;内的onload声明img.onload 无限通话。

除此之外，您并未从画布上读取已调整大小的图像。

你可以做这通过以下方式

canvas.toDataURL('image/png');

代码片段

var img = $('#img-upload')[0]; 
 
var show = $('#show')[0]; 
 

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

 
    reader.onload = function(e) { 
 
     debugger; 
 
     $('#img-upload').attr('src', e.target.result); 
 
     img.onload = function() { 
 
     var MAX_WIDTH = 100; 
 
     var MAX_HEIGHT = 100; 
 
     var width = img.width; 
 
     var height = img.height; 
 

 
     if (width > height) { 
 
      if (width > MAX_WIDTH) { 
 
      height *= MAX_WIDTH/width; 
 
      width = MAX_WIDTH; 
 
      } 
 
     } else { 
 
      if (height > MAX_HEIGHT) { 
 
      width *= MAX_HEIGHT/height; 
 
      height = MAX_HEIGHT; 
 
      } 
 
     } 
 

 
     var canvas = document.createElement("canvas"); 
 
     canvas.width = width; 
 
     canvas.height = height; 
 
     canvas.getContext("2d").drawImage(this, 0, 0, width, height); 
 

 
     //Causing Infinite Loop in your code 
 
     //img.src = e.target.result; 
 
     
 
     // Get dataURL of resized image from canvas 
 
     show.src = canvas.toDataURL('image/png'); 
 

 
     } 
 

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

 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" onchange="readURL(this)"> 
 
<img id="img-upload"> 
 
<img id="show">