在上传之前在客户端压缩图像[关闭]

Posted 2023-03-05

【中文标题】在上传之前在客户端压缩图像[关闭]

【英文标题】：Compress images on client side before uploading [closed]

【发布时间】：2011-08-02 05:15:27

【问题描述】：

有没有人知道有什么免费的脚本可以尽可能地压缩 JPG、GIF 和 PNG 文件？

【问题讨论】：

这三个都是压缩格式。进一步压缩现有图像会导致质量损失。

你对这个“smushit.com”有什么看法

@Charles 不一定，大多数人都懒得压缩他们的图像。所以无损压缩可能会大大减小大多数图像的大小。

【参考方案1】：

我刚刚开发了一个名为 JIC 的 javascript 库来解决这个问题。它允许您在客户端使用 javascript 100% 压缩 jpg 和 png，并且不需要外部库！

您可以在这里尝试演示：http://makeitsolutions.com/labs/jic 并在此处获取资源：https://github.com/brunobar79/J-I-C

【讨论】：

没办法解压回来？

我尝试使用 JIC 压缩的图像只是使尺寸变大。这种情况发生在其他人身上吗？

不是压缩，而是越来越大

关于尺寸的增加 - jpeg 没有 alpha 通道（'rgba' 的'a' 部分），而 png 有它，所以 jpeg 中的每个像素都需要 3 条信息 - rgb，而每个png 中的像素需要 4 条信息 - rgba。当 jpeg 到 png 的转换发生时，仅此一项就使 png 更大。此外，由于 png 是无损的，而 jpeg 是有损的，所以 jpeg 压缩允许它更小，但以牺牲 png 的质量为代价。 J-I-C 正在将您的 jpeg 转换为 png，因此尺寸会增加！

是的。规模越来越大。如果它增加了大小，使用这个库有什么用:(@brunobar79

【参考方案2】：

您也许可以使用 canvas 调整图像大小并使用 dataURI 将其导出。不过，不确定压缩。

看看这个：Resizing an image in an html5 canvas

【参考方案3】：

如果您正在寻找一个库来执行客户端图像压缩，您可以查看：compress.js。这基本上将帮助您纯粹使用 JavaScript 压缩多个图像并将它们转换为 base64 字符串。您可以选择以 MB 为单位设置最大大小以及首选的图像质量。

【参考方案4】：

我迟到了，但这个解决方案对我很有效。基于this library，你可以使用这样的函数——设置图像、质量、最大宽度和输出格式（jepg，png）：

function compress(source_img_obj, quality, maxWidth, output_format)
    var mime_type = "image/jpeg";
    if(typeof output_format !== "undefined" && output_format=="png")
        mime_type = "image/png";
    

    maxWidth = maxWidth || 1000;
    var natW = source_img_obj.naturalWidth;
    var natH = source_img_obj.naturalHeight;
    var ratio = natH / natW;
    if (natW > maxWidth) 
        natW = maxWidth;
        natH = ratio * maxWidth;
    

    var cvs = document.createElement('canvas');
    cvs.width = natW;
    cvs.height = natH;

    var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0, natW, natH);
    var newImageData = cvs.toDataURL(mime_type, quality/100);
    var result_image_obj = new Image();
    result_image_obj.src = newImageData;
    return result_image_obj;

【参考方案5】：

我在这里读到了一个实验：http://webreflection.blogspot.com/2010/12/100-client-side-image-resizing.html

理论上，您可以在上传之前使用画布调整客户端上的图像大小。原型示例似乎只在最近的浏览器中有效，但有趣的想法......

但是，我不确定使用画布压缩图像，但您当然可以调整它们的大小。

【讨论】：

我需要像 smushit.com 这样的东西

我认为您无法在客户端复制 Smushit。

$mush-it => $mu-$hit。哈哈，我用 jQuery 让自己难过.....