提交表单前在javascript中减小客户端的图片大小 [英] Reducing size of the image at Client Side in javascript before form submission

问题描述

我正在尝试在客户端读取后缩小图像的大小，javascript代码如下，我在这里遇到了两个问题 1)图片预览未显示在img id"img-upload"上 2)通过表单提交"reader.readAsDataURL(input.files [0])"提交的文件不是减小的大小.

Im trying to reduce the size of the image after reading at client side, the javascript code is as below, I'm getting two issues here 1) The image preview is not showing up on the img id "img-upload" 2) The file that is being submitted via form submission "reader.readAsDataURL(input.files[0])" is not the reduced size one.

我确实尝试过更改代码，以将读取器移动到图像加载时，然后传递e.target.files [0]，但这也不起作用.

I did try changing code to move the reader inside the image onload and then pass e.target.files[0] but that didn't work either.

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

Pls advise how I can resize and then send it via form submission to my backend.

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]);

            }
        }

推荐答案

您的代码正在创建对img.onload的无限调用 因此

Your code is creating an infinite call to img.onload because of this

img.src = e.target.result;语句位于onload中.

img.src = e.target.result; statement inside onload.

除此之外，您不会从画布上读取调整大小的图像.

Beside this you are not reading the resized image from the canvas.

您可以通过以下方式进行操作

You can do this the following way

canvas.toDataURL('image/png');

SNIPPET

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">

这篇关于提交表单前在javascript中减小客户端的图片大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！