上传前在客户端压缩图像

IT技术 javascript jquery jquery-plugins
2021-02-25 02:44:15

有谁知道尽可能多地压缩 JPG、GIF 和 PNG 文件的任何免费脚本?

5个回答

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

您可以在此处尝试演示:http : //makeitsolutions.com/labs/jic 并在此处获取源代码:https : //github.com/brunobar79/JIC

我尝试使用 JIC 压缩的图像只会使尺寸变大。这有发生在其他人身上吗?
2021-04-19 02:44:15
而不是压缩,尺寸越来越大
2021-04-27 02:44:15
是的。规模越来越大。如果它增加了大小,使用这个库有什么用:(@brunobar79
2021-05-04 02:44:15
关于尺寸增加 - jpeg 没有 alpha 通道('rgba' 的'a' 部分),而 png 有它,所以 jpeg 中的每个像素都需要 3 个信息 - rgb,而 png 中的每个像素需要 4 个信息 - RGBA。当 jpeg 到 png 转换发生时,仅这一点就会使 png 变大。此外,由于 png 是无损的而 jpeg 是有损的,因此 jpeg 压缩允许它以质量 wrt png 为代价更小。JIC 正在将您的 jpeg 转换为 png,因此尺寸增加了!
2021-05-11 02:44:15
没有办法解压回来吗?
2021-05-13 02:44:15

您可以canvas使用 dataURI调整图像大小并导出它。不过不确定压缩。

看看这个:在 HTML5 画布中调整图像大小

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

我参加聚会迟到了,但是这个解决方案对我很有效。基于这个库,你可以使用这样的函数 - 设置图像、质量、最大宽度和输出格式(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;
}

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

理论上,您可以在上传之前使用画布调整客户端上的图像大小。原型示例似乎只适用于最近的浏览器,不过这个想法很有趣……

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

$mush-it => $mu-$hit。哈哈,我用 jQuery 让自己难过.....
2021-04-25 02:44:15
因为我需要像 smushit.com 这样的东西
2021-04-28 02:44:15
我认为您无法在客户端复制 Smushit。
2021-05-17 02:44:15