H5图片压缩与上传

简介: H5图片压缩与上传

现在手机用户拍照照片都十分巨大,1m-10m,而普通用户的上传带宽大概为100kb/s-1m/s,导致上传图片十分缓慢


解决方法为上传之前先把图片进行压缩,使得上传速度增加,服务器硬盘,带宽速度压力也更小


本文参考http://www.cnblogs.com/stoneniqiu/p/5957356.html


使用到git的一个现成库 https://github.com/stomita/ios-imagefile-megapixel


引入文件之后绑定onchange事件

varfileInput = document.getElementById('fileInput');

  fileInput.onchange = function() {    varfile = fileInput.files[0];    // 创建一个压缩对象,该构造函数接收file或者blob。

    varmpImg = newMegaPixImage(file);

 

    // render方法的maxWith,maxHeight,以及quality都决定了压缩图片的质量

    varresImg = document.getElementById('resultImage');    mpImg.render(resImg, { maxWidth: 300, maxHeight: 300, quality: 0.5 }); 

  };


压缩完之后,将会得到一个类似这样的图片

image.png


需要注意的是resImg是一个预览图片,已经存于文档中,而resultImage是在html里面的一个预览img标签的id,如果你不填的话,将会报错在224行,解决方法是自己修改源码,而本人技术能力不够,如果不需要预览图的话,将resultImage标签加上display:none自然就隐藏了,该填的还是要填的.

image.png


压缩图片十分的耗时,尤其是多张图片一起的时候,所以需要稍微变换一下

 fileSelected: function() {                    varfiles = $("#fileImage")[0].files;                    varcount = files.length;

                    console.log("共有"+ count + "个文件");                    for(vari = 0; i < count; i++) {varitem = files[i];

                        console.log("原图片大小", item.size);                        if(item.size > 1024 * 1024 * 2) {

                            console.log("图片大于2M,开始进行压缩...");

 

                            (function(img) {                                varmpImg = newMegaPixImage(img);                                varresImg = document.createElement("img");

                                resImg.file = img;

                                mpImg.render(resImg, { maxWidth: 500, maxHeight: 500, quality: 1 }, function() {

                                  //do some thing

                                });

                            })(item);

 

                        

                        core.previewImage(item);

                    }

                },


上传图片的话,可以直接通过img标签的src属性进行取值上传,如

image.png

将img的src值存到input进行直接的form表单上传

或者ajax获取值直接上传


后台代码为

if(!empty($_POST['resultImage'])){

    if(preg_match('/^(data:\s*image\/(\w+);base64,)/'$_POST['resultImage'], $result)) {//正则获取图片格式

        $type$result[2];

        $uploadnewUploadFile();

        //设置权限

        @chmod(BASE_UPLOAD_PATH.DS.$this->default_dir,0755);//修改权限

        $path= BASE_UPLOAD_PATH.DS.'ipi_apply'.DS. $upload->getSysSetPath();//目录地址

        $new_file= md5(uniqid($this->member_info['member_id'])).".{$type}";//用微秒和会员id产生md5唯一字符串

        if(file_put_contents($path.$new_filebase64_decode(str_replace($result[1], ''$_POST['resultImage'])))) {

            $data['img_url'] = $new_file;

        }

    }

}

当然还有其他方法,下载源码中提供了demo可以自己测试,如果压缩质量太差,可以尝试修改长宽和图片质量的值,亲测当

mpImg.render(resImg, {maxWidth: 800, maxHeight: 800, quality: 0.9});

时,一张20m的中国地图,压缩成了297kb,花费了8秒左右的时间


因为图太大,就不上传了


目录
相关文章
|
前端开发
webpack如何设置devServer启动项目为https协议
webpack如何设置devServer启动项目为https协议
1976 0
|
存储
base64图片是什么?原理、优缺点是什么?
base64图片是什么?原理、优缺点是什么?
799 0
|
机器人 Windows
QQ机器人有哪些?QQ机器人怎么设置?
随着QQ群的活跃,越来越多的群组需要用机器人来管理群,比较流行的QQ机器人有哪些?QQ机器人又需要怎么设置?目前市面上有很多QQ群机器人,其中比较流行的有第十代qq机器人、酷q机器人等。这些机器人都有各自的特点和功能,可以满足不同的需求,具体需要怎么设置机器人呢?下面就拿第十代QQ机器人给大家举例。
ECharts 柱状图横轴(X轴)文字内容显示不全
ECharts 柱状图横轴(X轴)文字内容显示不全
2130 0
|
应用服务中间件 nginx
https网页加载http资源时不显示图片,报错解决方案
本文是博主学习网络知识的记录,希望对大家有所帮助。
5615 0
https网页加载http资源时不显示图片,报错解决方案
|
11月前
|
数据可视化 前端开发 测试技术
接口测试新选择:Postman替代方案全解析
在软件开发中,接口测试工具至关重要。Postman长期占据主导地位,但随着国产工具的崛起,越来越多开发者转向更适合中国市场的替代方案——Apifox。它不仅支持中英文切换、完全免费不限人数,还具备强大的可视化操作、自动生成文档和API调试功能,极大简化了开发流程。
|
9月前
|
XML Java Maven
springboot-多环境配置文件
本文介绍了如何创建开发和生产环境的配置文件,并在IDEA和Maven中进行配置。开发环境中,通过设置profile为`dev`来指定配置文件;生产环境中,使用Maven命令参数`-Pprod`打包并指定配置文件。公共配置可放在`application.yml`中统一管理。日志配置需确保`logback-spring.xml`中的profile正确,以保证日志正常输出。
535 4
springboot-多环境配置文件
|
数据采集 存储 数据可视化
Python实战项目——餐厅订单数据分析(一)
Python实战项目——餐厅订单数据分析(一)
1630 0
|
JavaScript 前端开发 测试技术
如何测试 CORS 是否正常工作?
通过以上多种方法的综合测试,可以全面地检查 CORS 是否正常工作,及时发现和解决跨域资源共享中可能存在的问题,确保不同源的网页和服务器之间能够正常地进行数据交互。
1325 60