专栏首页仙士可博客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事件

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

    // render方法的maxWith,maxHeight,以及quality都决定了压缩图片的质量
    var resImg = document.getElementById('resultImage');    mpImg.render(resImg, { maxWidth: 300, maxHeight: 300, quality: 0.5 }); 
  };

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

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

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

 fileSelected: function () {                    var files = $("#fileImage")[0].files;                    var count = files.length;
                    console.log("共有" + count + "个文件");                    for (var i = 0; i < count; i++) {var item = files[i];
                        console.log("原图片大小", item.size);                        if (item.size > 1024 * 1024 * 2) {
                            console.log("图片大于2M,开始进行压缩...");

                            (function(img) {                                var mpImg = new MegaPixImage(img);                                var resImg = 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属性进行取值上传,如

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

或者ajax获取值直接上传

后台代码为

if(!empty($_POST['resultImage'])){
    if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $_POST['resultImage'], $result)) {//正则获取图片格式
        $type = $result[2];
        $upload = new UploadFile();
        //设置权限
        @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_file, base64_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秒左右的时间

因为图太大,就不上传了

本文为仙士可原创文章,转载无需和我联系,但请注明来自仙士可博客www.php20.cn

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 饿了么Mint UI库Datetime picker日期选择器采坑记录

    Mint UI 是饿了么前端团队(elemeFE)推出的专门针对移动端的前端 UI 库,不过其 github 库已经有2年多没有更新了,API 也不是很详细。

    德顺
  • IOS、iPhone移动端,表单input聚焦时页面放大的解决办法

    最近的一个项目中,发现几个页面在使用 iPhone 11 访问的时候,点击 input 和 textarea 等文本输入框聚焦 focus() 时,页面会整体放...

    德顺
  • Springboot整合Shiro之认证

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明...

    用户4919348
  • 基于spring boot高性能高并发秒杀系统方案及优化

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明...

    营器
  • NodeJS学习三(静态文件托管)

    bering
  • 是时候扔掉 Postman 了,试试 IntelliJ IDEA 自带的高能神器!

    接口调试是每个软件开发从业者必不可少的一项技能,一个项目的的完成,可能接口测试调试的时间比真正开发写代码的时间还要多,几乎是每[个开发的日常工作项。]

    Java编程指南
  • NodeJS学习二(模板引擎的配置和使用)

    当页面内容比较多的时候,如果像上一节中说到的在绑定路由使用app.send()方法返回大量的html字符串是不现实的,这个时候通常需要配...

    bering
  • 单点登录(Single Sign On)解决方案

    A 网站和 B 网站是同一家公司的关联服务。现在要求,用户只要在其中一个网站登录,再访问另一个网站就会自动登录,请问怎么实现?

    Java_老男孩
  • Node.js 里,如何凭空创建一个以假乱真的 FileStream?

    感谢支持ayqy个人订阅号,每周义务推送1篇(only unique one)原创精品博文,话题包括但不限于前端、Node、Android、数学...

    ayqy贾杰
  • 微前端到底是什么?

    为了解决庞大的一整块后端服务带来的变更与扩展方面的限制,出现了微服务架构(Microservices):

    ayqy贾杰

扫码关注云+社区

领取腾讯云代金券