在上传之前压缩客户端图片

Question

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

- xtremist

---

这三种都已经是压缩格式了。对现有图像进行进一步压缩会导致质量损失。 - Charles

你对这个 "smushit.com" 有什么看法？ - xtremist

@Charles 不一定，大多数人都太懒了，根本不会压缩他们的图像。因此，无损压缩可能会极大地减小大多数图像的大小。 - user7892745

Answer 1

我刚刚开发了一个名为JIC的javascript库来解决这个问题。它允许您使用javascript在客户端完全压缩jpg和png，无需外部库！您可以在此处尝试演示：http://makeitsolutions.com/labs/jic并获取源代码： https://github.com/brunobar79/J-I-C。

- brunobar79

---

无法解压缩回来吗？ - RWendi

我尝试使用JIC压缩的图像，但结果只会使其变得更大。有其他人也遇到过这种情况吗？ - Soumya R

关于尺寸增加 - JPEG 没有 Alpha 通道（'RGBA' 的 'A'），而 PNG 有，因此 JPEG 中的每个像素需要 3 个信息片段 - RGB，而 PNG 中的每个像素需要 4 个信息片段 - RGBA。这使得在进行 JPEG 到 PNG 转换时，PNG 的大小更大。此外，由于 PNG 是无损的而 JPEG 是有损的，JPEG 压缩可以在质量方面牺牲以更小的代价得到更小的大小相对于 PNG。因此，将 JPEG 转换为 PNG 会导致文件大小增加。 - vjjj

是的。大小变得更大了。如果增加大小，使用这个库有什么用 :( @brunobar79 - lakshman_dev

使用JIC时，请将输出格式设置为jpg，一切都会很好。 - Hassan Baig

Answer 2

你可能可以使用 canvas 调整图片大小并通过 dataURI 导出图片。不过我不能确定压缩方面是否可行。

可以参考这个链接：在 HTML5 画布中调整图像大小

- typeof

Answer 3

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

- alextanhongpin

Answer 4

我来晚了，但是这个解决方案对我很有效。基于这个库，你可以使用一个函数 - 设置图像、质量、最大宽度和输出格式（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;
}

- user1791914

Answer 5

我在这里读到了一个实验：http://webreflection.blogspot.com/2010/12/100-client-side-image-resizing.html。理论上，您可以在上传前使用画布来调整客户端上的图像大小。原型示例似乎只适用于最近的浏览器，但这是一个有趣的想法... 然而，我不确定是否可以使用画布来压缩图像，但您肯定可以调整它们的大小。

- David Hellsing

---

到目前为止，我需要像smushit.com这样的东西。 - xtremist

我认为你无法在客户端上复制Smushit。 - David Hellsing

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