首页  >  文章  >  web前端  >  如何在不使用插件的情况下使用 JavaScript 调整客户端图像大小?

如何在不使用插件的情况下使用 JavaScript 调整客户端图像大小?

Patricia Arquette
Patricia Arquette原创
2024-10-19 10:38:02683浏览

How to Resize Images Client-Side Using JavaScript without Plugins?

使用 JavaScript 在客户端调整图像大小

图像操作是 Web 开发的一个重要方面,有效地调整图像大小对于优化用户体验和网站性能至关重要。 Flash 传统上用于调整图像大小,但随着 JavaScript 的进步,现在可以在客户端调整图像大小,而无需额外的插件。

对于寻求开源解决方案来调整图像大小的开发人员JavaScript,以下资源提供了强大且可靠的选项:

Github Gist:

此要点提供了图像调整大小算法的 ES6 和 JavaScript 版本:https:// gist.github.com/dcollien/312bce1270a5f511bf4a.

用法:

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.
    });
};

功能:

  • 支持调整各种图像格式的大小。
  • 包括填充以确保与旧版浏览器的兼容性。
  • 出于兼容性原因忽略动画 GIF。

以上是如何在不使用插件的情况下使用 JavaScript 调整客户端图像大小?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn