Question

嗨朋友们，我使用javascript减少了图像，但却失去了它的质量。请减少图像尺寸，帮助我获得相同的图像质量。以下是我的代码请帮帮我。

我使用输入文件上传图片。对于多个文件，你也必须在上传图像时上传，图像尺寸减小但质量有损失所以请帮助我......我2天就遇到了这个问题......

html代码

<div class="row">
        <label for="fileToUpload">Select Files to Upload</label><br />
        <input type="file" name="filesToUpload[]" id="filesToUpload" multiple="multiple" />
        <output id="filesInfo"></output>
    </div>
    <div class="row">
        <input type="submit" value="Upload" />
    </div>

的javascript：

<script>

    if (window.File && window.FileReader && window.FileList && window.Blob) {
        document.getElementById('filesToUpload').onchange = function () {
            var files = document.getElementById('filesToUpload').files;
            for (var i = 0; i < files.length; i++) {
                resizeAndUpload(files[i]);
            }
        };
    } else {
        alert('The File APIs are not fully supported in this browser.');
    }

    function resizeAndUpload(file) {
        var reader = new FileReader();
        reader.onloadend = function () {

            var tempImg = new Image();
            tempImg.src = reader.result;
            tempImg.onload = function () {

                var MAX_WIDTH = 400;
                var MAX_HEIGHT = 300;
                var tempW = tempImg.width;
                var tempH = tempImg.height;
                if (tempW > tempH) {
                    if (tempW > MAX_WIDTH) {
                        tempH *= MAX_WIDTH / tempW;
                        tempW = MAX_WIDTH;
                    }
                } else {
                    if (tempH > MAX_HEIGHT) {
                        tempW *= MAX_HEIGHT / tempH;
                        tempH = MAX_HEIGHT;
                    }
                }

                var canvas = document.createElement('canvas');
                canvas.width = tempW;
                canvas.height = tempH;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(this, 0, 0, tempW, tempH);
                var dataURL = canvas.toDataURL("image/jpeg");

                var div = document.createElement('div');
                div.innerHTML = '<img  src="' + dataURL + '" />';

                document.getElementById('filesInfo').appendChild(div);
            }

        }
        reader.readAsDataURL(file);
    }
</script>

Answer 1

有一些方法可以保持图像的相同尺寸，同时在不牺牲视觉质量的情况下更好地进行压缩。我也一直在研究这个主题 - 有几家公司正在为它提供商业（和服务器端）解决方案，例如kraken.io或jpegmini.com。结果是文件大小减小了60％，但看起来几乎相同。

天然，他们没有描述他们在做什么，但我认为他们非常非常依赖于jpeg压缩的内部来实现这些结果。

如果您想在该字段中取得任何进展，这可能需要您深入了解jpeg压缩算法，而不是依赖于标准的javascript jpeg压缩库。

在不降低图片质量的情况下缩小javascript中的图片大小并下载图片

1 个答案: