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

时间:2011-04-09 19:41:56

标签: javascript jquery jquery-plugins

有没有人知道任何压缩JPG,GIF和PNG文件的免费脚本?

5 个答案:

答案 0 :(得分:52)

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

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

答案 1 :(得分:15)

您可以使用canvas调整图片大小,然后使用dataURI将其导出。但不确定是否有压缩。

看看这个:Resizing an image in an HTML5 canvas

答案 2 :(得分:5)

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

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

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

答案 3 :(得分:5)

我迟到了,但这个解决方案对我很有用。基于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;
}

答案 4 :(得分:5)

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