使用plupload压缩图片
来源:互联网 发布:帝国时代3天明知乎 编辑:程序博客网 时间:2024/05/06 11:07
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,则会等比例缩放图片进行压缩。
(第一次写博客,不喜勿喷,谢谢)
- 使用plupload压缩图片
- 使用plupload实现无刷新上传图片
- 文件上传插件Plupload使用(带图片预览功能)
- 使用plupload.js实现单页面多实例图片上传
- plupload的使用
- plupload插件使用
- Plupload初步使用
- Plupload上传插件使用
- 上传plupload的使用
- 使用ImageIO压缩图片
- 使用canvas压缩图片
- 使用Thumbnails压缩图片
- plupload
- plupload
- Plupload
- plupload
- Plupload
- 在.Net中使用Plupload
- 百度外卖如何做到前端开发配置化
- 剑指offer——翻转单词顺序列(和上题一样的思路,注意空格分界)
- webpack实战(二)-loader
- git入门命令学习(自己的一点小小的总结)
- 用Navicat连接Oracle数据库出错解决方案
- 使用plupload压缩图片
- MySQL触发器使用详解
- python多线程下载器
- Java面向对象_4
- js一个页面嵌套另外一个页面
- 函数的表示跟人的自然的逻辑思维之间还是有差距
- PHP的内存限制 Allowed memory size of 134217728 bytes exhausted (tried to allocate 1099 bytes) in
- 利用Ajax发送请求(一)
- 发送Https请求(Java)