javascript - Javascript在上传到服务器之前调整图像大小以减小其大小？

Question

我正在制作一个从浏览器上传图像并将其存储在服务器中的网站。但是，有些图像真的很重，我想调整它们的大小以使其大小变化不大，主要是为了减小存储的所有图像的大小。

浏览器上的客户端代码如下（我使用的是 ReactJS 和打字稿）。我想使用浏览器代码上可用的工具（不想安装库并且必须将所有 javascript 代码捆绑到客户端）

我可以在服务器上调整它们的大小，但不想在服务器上使用更多的计算能力。有没有办法在客户端调整它们的大小以减小其大小？

我不想使用画布重绘它们，主要目的是减小尺寸。

 <input type="file" accept="image/*" onChange={async (ev) => {
                    if (ev && ev.target && ev.target.files) {

                        const formData = new FormData();
                        formData.append("file", ev.target.files[0],  "file.jpg");

                        if(imageHTMLComponent) {
                            const imageReader = new FileReader();
                            imageReader.onload = (ev) => {
                                if( ev.target && typeof ev.target.result === "string") {
                                    test.setAttribute('src', ev.target.result);
                                }
                            }
                            imageReader.readAsDataURL(ev.target.files[0]);

                            const response = await fetch(`https://localhost:8000/test?token=${encodeURI('hello')}&picture=1`, {
                        }

                    }

                Preview of the image:
                <img ref={(ref) => {setImageHTMLComponent(ref)}} />

标签： javascripthtmlnode.jsbrowser

Answer 1

根据此链接，您可以使用本机 JavaScript 和 HTML5 Canvas 功能在客户端调整图像大小。我没有尝试过本教程中的说明，但我过去曾使用 HTML5 Canvas 制作调整图像大小的 2D RPG 引擎。然而，本教程更进一步，解释了如何为您所要求的目的创建图像。查看本教程，如果您的本机浏览器不支持某些功能，例如“toBlob”，它还提供了替代方案。