在 JavaScript 中调整和压缩上传的图像答案

【问题标题】：Resize & compress uploaded image in JavaScript在 JavaScript 中调整和压缩上传的图像
【发布时间】：2018-04-05 01:33:35
【问题描述】：

我正在建立一个网站，其中包含大量用户上传的图片。在将它们上传到服务器之前，我想在客户端调整这些图像的大小并压缩（最好将它们的格式更改为 .jpg）。

如何去做这件事？我找到了一些解决方案，但没有一个真正适用于上传的文件。我尝试过的最新版本是Hermite-resize 脚本。应该很简单：

// Get images from input field
var uploadedImages = event.currentTarget.files;


var HERMITE = new Hermite_class(); 
HERMITE.resize_image(uploadedImages[1], 300, 100);

但显然uploadedImages 返回为null。虽然我也在其他地方使用它们，所以我 100% 肯定它们不是 null 有谁知道如何有效地使用这个脚本来上传文件？或者是否有更好的解决方案来在客户端调整/压缩图像？

提前致谢！

【问题讨论】：

标签： javascript image-resizing image-compression hermite

【解决方案1】：

我找到了一个（某种）解决方案来解决我的问题。这不会对每个人都有好处，但是这个人写了一个小脚本，非常适合我想要完成的任务：

https://stackoverflow.com/a/39235724/6756447

开箱即用！我唯一添加的是在将返回的 blob 推送到数组之前为其提供时间戳及其原始名称：

var images = event.currentTarget.files

resizeImage({
   file: images[i],
   maxSize: 500
}).then(function(resizedImage) {
   resizedImage.lastModifiedDate = new Date()
   resizedImage.name = images[i].name
   uploadedImages.push(resizedImage)
}).catch(function(error) {
   console.log(error)
})

【讨论】：

【解决方案2】：

我曾尝试在 hermite 上工作，但它不是一个好类，因为它不断给我错误，因此您可以在fiddle 上使用下面的代码，hermit 类也想要 img 元素 id

HTML

<input type="file" id="fileOpload"><br>
<img src="" alt="Image preview..." id="image">
<canvas id="canvas" height=500 width=500></canvas>

Javascript

function previewFile() {
    var preview = document.querySelector('img');
    var file    = document.querySelector('input[type=file]').files[0];
    var reader  = new FileReader();
    var percentage = 0.75;
        reader.addEventListener("load", function () {
            preview.src = reader.result;
            preview.onload = function () {
                var canvas = document.getElementById("canvas");
                var ctx = canvas.getContext("2d");
                canvas.height = canvas.width * (preview.height / preview.width);
                var oc = document.createElement('canvas'),octx = oc.getContext('2d');
                oc.width = preview.width * percentage;
                oc.height = preview.height * percentage;
                canvas.width = oc.width;
                canvas.height = oc.height;
                octx.drawImage(preview, 0, 0, oc.width, oc.height);
                octx.drawImage(oc, 0, 0, oc.width, oc.height);
                ctx.drawImage(oc, 0, 0, oc.width, oc.height,0, 0, canvas.width, canvas.height);
            }
        }, false);

    if (file) {
        reader.readAsDataURL(file);
    }
}
document.getElementById('fileOpload').addEventListener('change', previewFile);

【讨论】：