使用javascript将jpeg图像调整为固定大小的实现

Here is our implementation of a jpeg resize on client side to a fixed size of 1024 or 768. The work scenario is that a user selects an image (original image) he/she wants to upload (without display). If dimension of the original image is larger than 1024 or 768, then resize the image proportionally. The code below calculates the width and height of should-be and performs resize.

以下是我们在客户端调整jpeg大小为1024或768的固定大小。工作场景是用户选择他/她想要上传的图像(原始图像)(不显示)。如果原始图像的尺寸大于1024或768,则按比例调整图像大小。下面的代码计算应该是的宽度和高度,并执行调整大小。

There are 2 alert() to show the image size before and after resize. We find that the file size is not reduced. What could be wrong with the code?

有两个alert()来显示调整大小之前和之后的图像大小。我们发现文件大小没有减少。代码有什么问题?

$(function(){
    $('#uploaded_file_file_for_upload').change(function(){
        var _URL = window.URL || window.webkitURL;
        var img, img_width = 0, img_height = 0, max_width = 1024, max_height = 768;
        var f = $(this)[0].files[0];  
        alert(f.size);
        if (f.type == 'image/jpeg' || f.type == 'image/jpg') {
            img = new Image();
            img.onload = function () {
              img_width = this.width;  
              img_height = this.height;
            };
            img.src = _URL.createObjectURL(f);
            if (img_width > max_width){
                img_height = Math.ceil(img_height * max_width / img_width);
                img_width = max_width;
            } else if (img_height > max_height) {
                img_width = Math.ceil(img_width * max_height / img_height);
                img_height = max_height;
            };
            resize(img, img_width, img_height);
            var f1 = $(this)[0].files[0]; 
            alert(f1.size);
        };

        function resize(image, width, height) {
          var mainCanvas = document.createElement("canvas");
          mainCanvas.width = width;
          mainCanvas.height = height;
          var ctx = mainCanvas.getContext("2d");
          ctx.drawImage(image, 0, 0, width, height);
          $('#uploaded_file_file_for_upload').attr('src', mainCanvas.toDataURL("image/jpeg"));
        };

        return false;

    });
});

1 个解决方案

#1

check the naturalWidth from an image instead of css width

从图像而不是css宽度检查naturalWidth