使用plupload压缩图片

2024年6月6日 200次阅读 来源: Jedi丶plxh

Plupload 是一个Web浏览器上的界面友好的文件上传模块，可显示上传进度、图像自动缩略和上传分块。可同时上传多个文件。

Plupload有以下功能和特点：

1、拥有多种上传方式：HTML5、flash、silverlight以及传统的。Plupload会自动侦测当前的环境，选择最合适的上传方式，并且会优先使用HTML5的方式。所以你完全不用去操心当前的浏览器支持哪些上传方式，Plupload会自动为你选择最合适的方式。

2、支持以拖拽的方式来选取要上传的文件

3、支持在前端压缩图片，即在图片文件还未上传之前就对它进行压缩

4、可以直接读取原生的文件数据，这样的好处就是例如可以在图片文件还未上传之前就能把它显示在页面上预览

5、支持把大文件切割成小片进行上传，因为有些浏览器对很大的文件比如几G的一些文件无法上传。

我们在上传图片的时候，图片有大有小，图片过大上传至服务器端会占用大量的服务器内存，所以我们在前端上传图片时就会先对图片进行压缩处理，使用plupload上传，在实例化一个plupload对象时，传入配置参数resize：

// 可以使用该参数对将要上传的图片进行压缩，该参数是一个对象，里面包括5个属性：

// width：指定压缩后图片的宽度，如果没有设置该属性则默认为原始图片的宽度

// height：指定压缩后图片的高度，如果没有设置该属性则默认为原始图片的高度

// crop：是否裁剪图片

// quality：压缩后图片的质量，只对jpg格式的图片有效，默认为90。quality可以跟width和height一起使用，但也可以单独使用，单独使用时，压缩后图片的宽高不会变化，但由于质量降低了，所以体积也会变小

// preserve_headers：压缩后是否保留图片的元数据，true为保留，false为不保留,默认为true。删除图片的元数据能使图片的体积减小一点点

// resize参数的配置示例如下：

resize: {
  width: 100,
  height: 100,
  crop: true,
  quality: 60,
  preserve_headers: false
}

width与height的单位为像素（px），在实际使用过程中， 我们往往不能控制图片的宽高尺寸，而在resize参数配置中又不能使用%，否则会抛异常，为了符合我们要等比例缩放图片的效果，我在使用中只使用width、crop、preserve_headers参数，如下：

resize: { width: 1000, crop: false, preserve_headers: true }

这里宽度我使用的1000，意思就是如果图片宽小于1000，则不会改变原图片大小，只是删除元数据进行图片压缩，若图片宽度大于1000，则会等比例缩放图片进行压缩。

（第一次写博客，不喜勿喷，谢谢）

    原文作者：Jedi丶plxh
    原文地址: https://blog.csdn.net/qq_18976999/article/details/73904993
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞