在上传之前调整图像大小
我需要为用户提供一种手段，以jpeg格式将照片上传到他们的网站。 不过，这些照片在原始尺寸上是非常大的，我想在上传前resize的选项非常方便用户。 看来，我唯一的select是客户端应用程序，在通过Web服务上传照片之前调整照片大小，或者调整图像大小的上传操作的客户端JavaScript钩子。 第二个选项是非常暂时的，因为我没有一个JavaScript图像resize的库，这将是很难让JavaScript来运行我当前的resize的工具，ImageMagick。
我敢肯定，这不是一个罕见的情况，一些build议或指向这样做的网站将不胜感激。
你有几个select：
- Java的
- ActiveX（仅在Windows上）
- Silverlight的
- 闪
- 柔性
- 谷歌齿轮 （最新版本是能够resize和从您的桌面拖放）
我已经做了大量的研究，寻找类似的解决scheme，你已经描述了很多的解决scheme，在质量和灵活性方面有很大的不同。
我的build议是find一个解决scheme，将做你需要的80％，并定制它，以满足您的需求。
在2011年，我们可以通过File API和canvas来了解它。 这现在只适用于Firefox和铬。 这里是一个例子：
var file = YOUR_FILE, fileType = file.type, reader = new FileReader(); reader.onloadend = function() { var image = new Image(); image.src = reader.result; image.onload = function() { var maxWidth = 960, maxHeight = 960, imageWidth = image.width, imageHeight = image.height; if (imageWidth > imageHeight) { if (imageWidth > maxWidth) { imageHeight *= maxWidth / imageWidth; imageWidth = maxWidth; } } else { if (imageHeight > maxHeight) { imageWidth *= maxHeight / imageHeight; imageHeight = maxHeight; } } var canvas = document.createElement('canvas'); canvas.width = imageWidth; canvas.height = imageHeight; var ctx = canvas.getContext("2d"); ctx.drawImage(this, 0, 0, imageWidth, imageHeight); // The resized file ready for upload var finalFile = canvas.toDataURL(fileType); } } reader.readAsDataURL(file); 有多种技术的Plupload工具声明它可以在上传之前进行大小调整，但是我还没有尝试过。 我也有关于二进制image processingJavaScript库的问题find一个合适的答案。
我想你需要Java或者ActiveX。 例如Thin Image Upload
乔和俄罗斯说的是真的。 原因是由于安全原因，JavaScript无法访问本地文件系统。 如果JavaScript能够“看见”你的图像文件，它可以看到任何文件，这是危险的。
您需要一个应用程序级别的控制才能做到这一点，这意味着Flash，Java或Active-X。
不幸的是，你将无法调整Javascript中的图像。 这是可能的在Silverlight 2 tho。
如果你想购买已经完成的东西： Aurigma Image Uploader是非常令人印象深刻的 – ActiveX和Java版本$ 250美元。 在网站上有一些演示，我很确定Facebook使用相同的控制。
纯JavaScript解决scheme。 我的代码通过双线性插值调整JPEG大小，并且不会失去exif。
https://github.com/hMatoba/JavaScript-MinifyJpegAsync
function post(data) { var req = new XMLHttpRequest(); req.open("POST", "/jpeg", false); req.setRequestHeader('Content-Type', 'image/jpeg'); req.send(data.buffer); } function handleFileSelect(evt) { var files = evt.target.files; for (var i = 0, f; f = files[i]; i++){ var reader = new FileReader(); reader.onloadend = function(e){ MinifyJpegAsync.minify(e.target.result, 1280, post); }; reader.readAsDataURL(f); } } document.getElementById('files').addEventListener('change', handleFileSelect, false);
