在上传到服务器之前，使用JavaScript调整客户端的大小
我想知道在技术上是否可以在JavaScript的客户端调整图像（真正resize，而不仅仅是改变宽度和高度）。 我知道在Flash中可以做到这一点，但是如果可能的话，我想避免它。 networking上有没有开源的algorithm？
这是一个这样做的要点： https ： //gist.github.com/dcollien/312bce1270a5f511bf4a
（一个es6版本和一个.js版本可以包含在脚本标签中）
你可以使用它如下：
<input type="file" id="select"> <img id="preview"> <script> document.getElementById('select').onchange = function(evt) { ImageTools.resize(this.files[0], { width: 320, // maximum width height: 240 // maximum height }, function(blob, didItResize) { // didItResize will be true if it managed to resize it, otherwise false (and will return the original file as 'blob') document.getElementById('preview').src = window.URL.createObjectURL(blob); // you can also now upload this blob using an XHR. }); }; </script> 它包含了一堆支持检测和polyfill，以确保它可以在我所能pipe理的浏览器上工作。
（它也忽略gif图像 – 万一它们是animation）
答案是肯定的 – 在HTML 5中，您可以使用canvas元素调整图像客户端的大小。 你也可以把新的数据发送到服务器。 看到这个教程：
http://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/
不知道你为什么要这样做…但如果你在上传之前resize，我只是发现这个http://www.plupload.com/它在任何可以想象的方法中为你做的所有魔术。;
不幸的是，HTML5的大小调整仅支持Mozilla Borwser，但您可以将其他浏览器redirect到flash和silverlight。
我只是试了一下，并与我的android！
我在flash中使用了http://swfupload.org/ ，它做得非常好，但是resize非常小。 （不能记住的限制），并不会回到HTML4时，闪光灯不可用。
http://nodeca.github.io/pica/demo/
在现代浏览器中，您可以使用canvas来加载/保存图像数据。 但是，如果您在客户端上调整图像大小，则应记住以下几点：
- 每个通道只有8位（jpeg可以有更好的dynamic范围，大约12位）。 如果你不上传专业照片，那应该不成问题。
- 要小心resize的algorythm。 大多数客户端的respet使用微不足道的math，结果是比它可能会更糟糕。
- 您可能需要锐化缩小的图像。
- 如果你希望重用元数据（exif和其他）从原始 – 不要忘记剥离颜色configuration文件信息。 因为它在将图像加载到canvas时应用。
也许用canvas标签（虽然它不是可移植的）。 有一个关于如何在这里用canvas旋转图像的博客，我想如果你可以旋转它，你可以调整它的大小。 也许这可能是一个起点。
也见那里 。
是的，用现代浏览器，这是完全可行的。 甚至可以将file upload到一个特定的二进制文件做了任何数量的canvas改动。
（这个答案是在这里接受的答案的改进）
记住在PHP中处理结果提交类似于：
//File destination $destination = "/folder/cropped_image.png"; //Get uploaded image file it's temporary name $image_tmp_name = $_FILES["cropped_image"]["tmp_name"][0]; //Move temporary file to final destination move_uploaded_file($image_tmp_name, $destination);
如果有人担心维塔利的观点，你可以尝试一些裁剪和调整工作jfiddle。
