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秒左右的时间


因为图太大,就不上传了


目录
相关文章
|
移动开发 前端开发 JavaScript
js实现图片压缩上传
最近在研究H5前端图片处理相关技术,方向有图片压缩、裁切、旋转、模糊等。
224 0
|
6月前
|
区块链
webp2jpg网页在线图片格式转换源码
webp2jpg-免费在线图片格式转化器, 可将jpeg、jpg、png、gif、 webp、svg、ico、bmp文件转化为jpeg、png、webp、webp动画、gif文件。 无需上传文件,本地即可完成转换!
73 0
|
7月前
|
编解码 Rust 前端开发
纯前端也能实现在线GIF压缩
纯前端也能实现在线GIF压缩
图片压缩后,依然很大的解决方案
图片压缩后,依然很大的解决方案
117 0
|
JavaScript 前端开发
JS压缩图片,在线图片压缩,Cavas压缩图片
1. 选择一张图片 const img_original = document.getElementById('img_original'); const img_output = document.
2756 0
|
编解码 iOS开发
iOS拍摄视频,压缩并上传服务器
iOS拍摄视频,压缩并上传服务器
487 0
|
JavaScript
原生js实现图片单张上传及批量上传
原生js实现图片单张上传及批量上传
|
JavaScript 前端开发
ImagesQuicklyCompress-图片压缩插件
一款针对javascript开发的图片压缩插件
214 0
|
数据采集 Web App开发 Java
实现网络图片爬虫,只需5秒快速把整个网页上的图片全下载打包zip
我们经常需要用到互联网上的一些共享资源,图片就是资源的一种,怎么把网页上的图片批量下载下来?有时候我们需要把网页上的图片下载下来,但网页上图片那么多,怎么下载我们想要的东西呢,如果这个网页都是我们想要的图片,难道我们要一点一点一张一张右键下载吗? 当然不好,这里提供一段Java实现的网络爬虫抓图片代码,程序员同志有喜欢的记得收藏哦, 材料:必须会java开发,用到的核心jar Jsoup自己去网上下载很多。
1225 0
|
前端开发 JavaScript
JS—图片压缩上传(单张)
*vue+webpack环境,这里的that指到vue实例 &lt;input type="file" name="file" accept="image/*" @change="selectImgs" ref="file"...
2554 0