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

我正在寻找一种方法来使用JavaScript调整客户端图像的大小(实际上调整大小,而不仅仅是更改宽度和高度).
我知道可以在Flash中完成它但我想尽可能避免它.

网上某处有开源算法吗?

解决方法:

这是一个要点:
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,以确保它可以在尽可能多的浏览器上运行.

(它也忽略了gif图像 – 如果它们是动画的)

上一篇:在Android上将大型位图文件的大小调整为缩放输出文件


下一篇:layui tab页签超出宽度,没出现箭头