前后端多图上传与PHP压缩实例

在PHP处理多图上传压缩功能中，作者发现大部分现有的代码针对单张图片压缩，且通常局限于前端或后端。为了实现前后端协同的多图压缩，作者编写了一个结合前端与后端的实例，创建了一个名为upload.php的简单上传页面。这个过程涉及到以下几个关键知识点： 1. 前端处理： - 使用HTML5的FileReader API读取用户选择的图片文件，将其转换为Data URL。 - 创建`photoCompress`函数，接收用户上传的图片文件（file）、压缩后的宽度（w）以及一个容器或回调函数（objDiv）作为参数。 - 在`ready.onload`事件中，调用`canvasDataURL`函数，将读取到的数据URL转换成图像并在canvas上进行缩放和质量调整。 2. `canvasDataURL`函数： - 创建一个新的`Image`对象，设置其src属性为传入的数据URL。 - 当图片加载完成后，计算原始图片的宽高比，并根据提供的压缩宽度（w）和高度计算缩放比例和最终的图片质量（quality，默认为0.7）。 - 使用canvas来调整图片大小，然后返回处理后的图片数据，通常以base64编码的Data URL形式。 3. 后端压缩： - 需要服务器端的PHP代码来接收前端发送的多张图片，这些图片可能经过前端压缩并转化为Data URL。 - 服务器端可以解析这些Data URL，解码为真正的图片文件，进一步进行统一的压缩处理，例如使用GD库或Imagick等PHP图像处理库。 - 对于多张图片，可以使用循环或数组处理，对每张图片独立执行压缩操作，然后合并或存储为单个文件或多个文件。 4. 结合前后端： - 前端负责用户界面和图片预处理，减少服务器的压力。 - 后端主要负责接收前端传递的数据、执行实际的压缩操作，并返回处理结果或存储路径。 整个流程旨在提高用户体验，通过前端预处理减少上传数据量，而后端进行统一处理，确保图片质量和文件大小满足需求。通过这种方式，开发者能够实现一个高效且兼容多图的图片上传和压缩功能。