我正在建立一个网站,从浏览器上传图像并将其存储在服务器中。但是,有些图像确实很重,我想调整它们的大小以使其大小没有太大变化,主要是为了减小所存储的所有图像的大小。
浏览器上的客户端代码如下(我正在使用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)}} />
根据this link,您可以使用本地JavaScript和HTML5 Canvas功能在客户端上调整图像大小。我没有尝试过本教程中的说明,但是过去我使用HTML5 Canvas来制作可调整图像大小的2D RPG引擎。但是,本教程将进一步讲解,并说明如何根据您的要求创建映像。查看本教程,如果您的本机浏览器不支持某些功能(例如“ toBlob”),它还将提供替代方法。