在提交表单之前在 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.onload 的无限调用 因为这个

img.src = e.target.result; 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">