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

Compress images on client side before uploading

本文关键字：压缩 图像 客户端      更新时间：2023-09-26

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

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

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

您可以使用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

理论是，你可以在上传之前使用画布在客户端上调整图像的大小。原型示例似乎只在最近的浏览器中工作，有趣的想法虽然…

然而，我不确定使用画布来压缩图像，但你肯定可以调整它们的大小。

相关文章：