‘壹’ 前端把图片压缩转换成base64编码把值赐予input='hidden' 之后提交给后台. HTML5,PHP,Javascript,canvas
缺点你无法直接验证传来的base64数据的完整性，比如大小，文件头之类的，还需要自己来实现。
‘贰’ 实现一个压缩图片功能
在寻找在线图片压缩工具时，我推荐熊猫压缩，它为我提供了灵感。我根据其方法，自行实现了一个图片压缩功能。压缩过程的核心在于运用HTML5的canvas元素，通过结合`toDataURL`和`toBlob`方法，用户可以选择图片质量，而非直接设定大小百分比。关于具体计算方式，可以参考MDN文档深入理解。我原计划分享代码，但最终建议直接查看GitHub以获取完整实现。
需要注意的是，`toDataURL`和`toBlob`原本都能实现压缩。`toDataURL`转成Base64后，还需转为Blob进行下载。尽管`toBlob`理论上性能更好，但在实际应用中，由于我没有限制图片数量和大小，当图片数量增多时，浏览器内存溢出，导致问题。相比之下，`toDataURL`在性能和稳定性上表现更佳。代码中我同时实现了两个方法，供你尝试。
至于下载功能，我提供了两种选项：单独下载和批量下载。单独下载部分，我参考了一些资源，使用模拟的a链接点击即可实现。批量下载则利用了jszip和file-saver库，它们之间的配合使用相对简单。jszip依赖file-saver，但npm文档中并未明确说明内部实现，我在使用时需要额外安装和引用，但并未进行深入实验。