代码之家  ›  专栏  ›  技术社区  ›  Spankaroonie

在JavaScript中调整上传图像的大小并压缩

  •  2
  • Spankaroonie  · 技术社区  · 7 年前

    我正在建立一个网站,将有很多用户上传的图像。 在上传到服务器之前,我想在客户端调整和压缩这些图像的大小(最好将其格式更改为.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 . 虽然我也在其他地方使用它们,所以我百分之百肯定它们不是 无效的 有人知道如何在上传的文件中有效地使用这个脚本吗? 或者,是否有更好的解决方案可以在客户端调整图像大小/压缩图像?

    提前感谢!

    2 回复  |  直到 7 年前
        1
  •  2
  •   Spankaroonie    7 年前

    我找到了解决我问题的(某种)办法。这不会对每个人都有好处,但这家伙写了一个小脚本,非常适合我要实现的目标:

    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
  •  0
  •   Ferhat BAŞ    7 年前

    我曾尝试在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);