Javascript 上传前在客户端压缩图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5607396/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Compress images on client side before uploading
提问by xtremist
Does anyone know of any free script that compresses JPG, GIF and PNG files as much as possible?
有谁知道尽可能多地压缩 JPG、GIF 和 PNG 文件的任何免费脚本？
采纳答案by typeof
You might be able to resize the image with canvasand export it using dataURI. Not sure about compression, though.
您可以canvas使用 dataURI调整图像大小并导出它。不过不确定压缩。
Take a look at this: Resizing an image in an HTML5 canvas
看看这个：在 HTML5 画布中调整图像大小
回答by brunobar79
I just developed a javascript library called JIC to solve that problem. It allows you to compress jpg and png on the client side 100% with javascript and no external libraries required!
我刚刚开发了一个名为 JIC 的 javascript 库来解决这个问题。它允许您使用 javascript 在客户端 100% 压缩 jpg 和 png，并且不需要外部库！
You can try the demo here : http://makeitsolutions.com/labs/jicand get the sources here : https://github.com/brunobar79/J-I-C
您可以在此处尝试演示：http: //makeitsolutions.com/labs/jic并在此处获取源代码：https: //github.com/brunobar79/JIC
回答by user1791914
I'm late to the party, but this solution worked for me quite well. Based on this library, you can use a function lik this - setting the image, quality, max-width, and output format (jepg,png):
我参加聚会迟到了，但是这个解决方案对我很有效。基于此库，您可以使用类似这样的函数 - 设置图像、质量、最大宽度和输出格式（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;
}
回答by alextanhongpin
If you are looking for a library to carry out client-side image compression, you can check this out:compress.js. This will basically help you compress multiple images purely with JavaScript and convert them to base64 string. You can optionally set the maximum size in MB and also the preferred image quality.
如果您正在寻找一个库来执行客户端图像压缩，您可以查看：compress.js。这将基本上帮助您纯粹使用 JavaScript 压缩多个图像并将它们转换为 base64 字符串。您可以选择以 MB 为单位设置最大大小以及首选图像质量。
回答by David Hellsing
I read about an experiment here: http://webreflection.blogspot.com/2010/12/100-client-side-image-resizing.html
我在这里读到一个实验：http: //webreflection.blogspot.com/2010/12/100-client-side-image-resizing.html
The theory is that you can use canvas to resize the images on the client before uploading. The prototype example seems to work only in recent browsers, interesting idea though...
理论上，您可以在上传之前使用画布调整客户端上的图像大小。原型示例似乎只适用于最近的浏览器，不过这个想法很有趣......
However, I'm not sure about using canvas to compress images, but you can certainly resize them.
但是，我不确定是否使用画布来压缩图像，但您当然可以调整它们的大小。
