Question

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

在调整大小之前和之后有2 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;

    });
});

Answer 1

从图片中检查naturalWidth而不是css width

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

1 个答案: