这是执行此操作的要点：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>

它包括一堆支持检测和 polyfills，以确保它在我能管理的尽可能多的浏览器上工作。

（它也会忽略 gif 图像 - 如果它们是动画的）

答案是肯定的 - 在 HTML 5 中，您可以使用 canvas 元素在客户端调整图像大小。您还可以获取新数据并将其发送到服务器。请参阅本教程：

http://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/

如果您在上传之前调整大小，我刚刚发现这个 http://www.plupload.com/

它以任何可以想象的方法为您带来所有魔力。

不幸的是，只有 Mozilla 浏览器支持 HTML5 调整大小，但您可以将其他浏览器重定向到 Flash 和 Silverlight。

我刚试过，它和我的安卓系统一起工作！

我在 flash中使用http://swfupload.org/，它的工作非常好，但调整大小非常小。（不记得限制了）并且在 flash 不可用时不会回到 html4。

http://nodeca.github.io/pica/demo/

在现代浏览器中，您可以使用画布来加载/保存图像数据。但是，如果您在客户端调整图像大小，则应记住以下几点：

1. 每个通道只有 8 位（jpeg 可以有更好的动态范围，大约 12 位）。如果您不上传专业照片，那应该不是问题。
2. 小心调整大小算法。大多数客户端调整器使用微不足道的数学，结果比预期的更糟。
3. 您可能需要锐化缩小的图像。
4. 如果您希望重用原始元数据（exif 和其他） - 不要忘记去除颜色配置文件信息。因为它在您将图像加载到画布时应用。

也许使用画布标签（尽管它不是便携式的）。有一个关于如何使用画布旋转图像的博客here，我想如果你可以旋转它，你可以调整它的大小。也许它可以是一个起点。

另请参阅此库。