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

使用 JavaScript 在客户端调整图像大小：开源解决方案

在当今的 Web 开发环境中，通常需要在客户端调整图像大小之前将它们上传到服务器。这种方法可以优化图像质量，减少服务器负载，并通过加快页面加载时间来改善用户体验。

虽然 Flash 是调整图像大小的常见选项，但许多开发人员宁愿避免使用它。幸运的是，有一个利用 JavaScript 有效调整图像大小的解决方案。

开源图像调整大小算法

GitHub 上提供的开源算法（https://gist .github.com/dcollien/312bce1270a5f511bf4a）提供了一种可靠的客户端调整图像大小的方法。它提供了 ES6 版本和可以包含在脚本标签中的 .js 版本。

实现

要实现调整大小算法，请按照以下步骤操作：

1. 添加如下所示的 HTML 代码：

<code class="HTML"><input type="file" id="select">
<img  id="preview" alt="如何在不使用 Flash 的情况下使用 JavaScript 在客户端调整图像大小？" ></code>

2. 添加以下 JavaScript 代码：

<code class="JavaScript">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.
    });
};</code>

功能和支持

该算法拥有一系列功能和支持，包括：

• 根据指定的最大宽度和高度调整大小
• 支持检测和用于跨浏览器兼容性的填充
• 排除动画 GIF 以提高效率

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