上传时压缩图片-Picdict

上一篇：网站速度测试、分析

上篇文章推荐了大家一款可以测试网页速度，定位网站优化方向的工具------PageSpeed，看我文章的想必都看到了，我的网页首要优化提升速度的就是提供压缩后的图片，所以我就找压缩工具，但是我的网站就是图片偏重，所以不能每次都让运营人员自己压缩后上传吧，添加人家的工作量，最好可以上传图片时直接压缩，我就去百度了一个压缩图片的软件，

首先是tinypng压缩，这个压缩大家可以看官网的介绍，在这里详细介绍的是另外一个压缩软件：Picdict压缩

简介

Picdiet是一款功能强大，超快速的在线批量图像优化器和压缩器。所有图像压缩仅在本地浏览器中处理，无需任何服务器或API要求。这意味着您无需将图像上传到云端即可获得最快的压缩速度，你要是想在线压缩的话，那肯定完全免费的，可是想要集成于自己项目，还是要付费的，大家可以进Picdict官网查看一下。本仙女也是调查了好久，才找到了一个不需要的办法，那就是我直接把需要购买的js文件给你，渠道可以是留言发邮件，也可以是直接加微信，邮箱为18437975210@163.com,微信为：verymexia。下面是具体集成与项目的步骤

集成于项目

官网里面是有集成项目的文档的，这里我就不说太多，直接上代码

. 当然了，首先是html的布置

<div class="am-form-group">
                                    <label for="user-weibo" class="am-u-sm-3 am-form-label">封面图 <span
                                                class="tpl-form-line-small-title">3:4比例</span></label>
                                    <div class="am-u-sm-9">
                                        <div class="am-form-group am-form-file">
                                            <div class="tpl-form-file-img">
                                                <img  alt="" id="showimg_3_4" style=" display: none;"/>
                                                <img id='ori_img_3_4' class="item hide" />
                                            </div>
                                            <button type="button" class="am-btn am-btn-danger am-btn-sm picdiet" data-imgtype="3_4" data-accept=".jpg, .jpeg,.png,.gif" data-multiple="1" data-quality="75" data-maxwidth="1200" data-callback="uploadimage">
                                                <i class="am-icon-cloud-upload"></i> 添加封面图片
                                            </button>
                                            <span style="color:#D93D37; font-weight:bold;">&nbsp;&nbsp;&nbsp;(图片尺寸：210 * 280)</span>
                                            <input type="hidden" name="picture_3_4" id="rar_picture_3_4" style="display: none" />{{--压缩图片--}}
                                            <input type="hidden" name="ori_picture_3_4" id="ori_picture_3_4"style="display: none" />{{--原图片--}}
                                        </div>

                                    </div>
                                </div>

记住，就像手册里说的，一定要给你要点击添加图片的按钮绑定类名为picdiet，支持打开的图片格式有“.jpg, .jpeg,.png,.gif”（虽然picdiet.js支持打开此类型图片，但只对jpg、jpeg和png进行压缩、缩放和裁剪，其它格式则跳过处理），支持多文件上传，图片压缩品质为75%，当图片宽度超过1200px时，则先缩放图片再压缩，压缩完成后，执行uploadimage函数等，这里需要指出的就是这个图片压缩品质data-quality，data-quality=75%，就是说压缩后的图片时原图片的75%，这个比例是最好的，图片质量不会降低太多，但图片大小却能减小很多，所以建议使用这个，你也可以使用其他百分比，data-callback是图片选择后需要执行的函数，就是执行uploadimage这个函数，不必更改，你的需要提交的ajax保存图片的代码也只需要放在这个函数里面就好。

其次是uploadimage函数的实现，你的js要实现的代码也可以放在这里实现

<script type="text/javascript">
    /*
* 当图片的缩放、裁剪、压缩完成后，系统将调用此函数，并传入以下3个值
* @param dom 绑定的上传按钮对象
* @param blob 图片压缩处理完成后生成的blob对象
* @param file 从文件上传的标签获得的file原始对象
*/
    function uploadimage(dom,blob,file) {
        var index = dom.getAttribute('data-imgtype');
        var reader = new FileReader();
        reader.onload = function (e) {
            var data = e.target.result;
            //加载图片获取图片真实宽度和高度
            var image = new Image();
            image.onload=function(){
                window.boxW = image.width;
                window.boxH = image.height;
                $('#showimg_'+index).height(boxH)
                $('#showimg_'+index).width(boxW)
            };
            image.src= data;
        };
        reader.readAsDataURL(file);
        $('#showimg_'+index).show();
        var formData = new FormData();
        formData.append('rar_file', blob);
        formData.append('ori_file', file);
        formData.append('filename', file.name);
        rar_upload("{{ Route('rarupload') }}",formData,index);

    }
</script>

对于这个传递图片到后台接受的，可以看一下，是创建了一个表单对象FormData，通过给这个表单添加属性，然后图片信息到指定的路由，在这里只是创建了表单对象，关于提交到后台的代码，由另外一个js方法实现，叫rar_upload()方法，它需要三个参数，一个是路由，一个是需要提交的表单数据，这里第三个参数index只是为了在提交后可以让对应的图片显示出来，起到识别图片的作用，可以好好看看这个处理文件的流程，都是对于文件的处理，方便后续传递图片信息

与后台交互功能的实现：rar_upload（）

下面是与后台交互，传递图片信息的方法：

/**压缩图片的上传
*
* */
function rar_upload(url,formData,index) {
    $.ajax({
        type: "POST",
        url: url,  //同目录下的php文件
        data:formData,
        dataType:"json", //声明成功使用json数据类型回调

        //如果传递的是FormData数据类型，那么下来的三个参数是必须的，否则会报错
        cache:false,  //默认是true，但是一般不做缓存
        processData:false, //用于对data参数进行序列化处理，这里必须false；如果是true，就会将FormData转换为String类型
        contentType:false,  //一些文件上传http协议的关系，自行百度，如果上传的有文件，那么只能设置为false
        success: function(result){  //请求成功后的回调函数
            $("#showimg_"+index).attr('src', result.datalist['rar_img']);
            $("#ori_img_"+index).attr('src', result.datalist['ori_img']);
            $("#rar_picture_"+index).val(result.datalist['rar_img']);
            $("#ori_picture_"+index).val(result.datalist['ori_img']);
        }
    });
    return ;
}

这里就不用做太多的介绍了，就ajax提交后台数据的操作
**注意：**ajax提交的数据data，是uploadimage处理后的数据，是文件类型的

后台接收，处理，保存图片路径

大家这时候肯定纠结怎么在后台获取到ajax提交过来的图片，手册里面也指出了以PHP为例的接收数据的代码，

<?php
    $extension=pathinfo($_POST['filename'],PATHINFO_EXTENSION);
    if(in_array($extension,array('jpg','jpeg','png','gif','bmp')))
    {
        $image_content = file_get_contents($_FILES['file']['tmp_name']);
        $store_name=uniqid().'.'.$extension;
        file_put_contents($store_name,$image_content);
        $size=getimagesize($store_name);
        if($size[0]>0 && $size[1]>0 && $size[0]<=1200) //二次校验宽度是否在预设值1200px范围内
        {
            echo '存储的文件名为：'.$store_name;
        }else{
            unlink($store_name);
        }
    }
    ?>

，大家可以看一下，使用file_get_contents获取数据，获取到的数据是二进制的流，如下图所示
所以获取后要数据写进文件里面，文件的后缀名，则取决于你上传时选择的图片的类型，下面的就是功能的上的保存图片链接进库功能了，完成！

正事说完了，在这里帮忙宣传一个日用百货的店铺：‘我虽然资历尚浅，但质量绝对保证，价格绝对良心’
店铺名称：98K杂货店，点击进店铺，欢迎选购哟，说明了解来源可以优惠！！！