在上传到服务器之前，使用 JavaScript 调整客户端的图像大小

javascript client-side image resize

2022-08-30 02:36:50

我正在寻找一种使用JavaScript调整图像客户端大小的方法（真正调整大小，而不仅仅是更改宽度和高度）。
我知道在Flash中可以做到这一点，但如果可能的话，我想避免它。

网络上的某个地方是否有任何开源算法？

答案 1

这里有一个要点：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图像 - 以防它们是动画的）

答案 2

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

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