javascript - 如何使用javascript或reactjs压缩存储在浏览器中的BLOB图像并上传到服务器

Question

我完成的任务

1. 使用文件输入选择图像<input type="file" accept="image/*" multiple="multiple" />

2. 使用 url: URL.createObjectURL(file[0]) 创建对象 URL 。例如 url = blob: http://0.0.0.0:5002/e468fb70-d597-4b17-bb3a-ec6272f2d7fe 。

3. 使用 <img src={ url } width="100px" height="100px" /> 在网页中显示图像

现在我想做的是，

1. 读取并压缩图像 url=blob:http://0.0.0.0:5002/e468fb70-d597-4b17-bb3a-ec6272f2d7fe

2. 上传压缩图片到服务器

这个项目是在reactjs中。您的建议将对我有所帮助。

Answer 1

1. 使用 FileReader 将 blob 读取为 ArrayBuffer，然后将其绘制在 Canvas 上，然后对其进行压缩并拉出压缩的 BLOB。

Source code

Blob 可以像正文中的任何其他数据一样发送到服务器，对此没有什么特殊要求。