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

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

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

简介

Picdiet是一款功能强大，超快速的在线批量图像优化器和压缩器。所有图像压缩仅在本地浏览器中处理，无需任何服务器或API要求。这意味着您无需将图像上传到云端即可获得最快的压缩速度，你要是想在线压缩的话，那肯定完全免费的，可是想要集成于自己项目，还是要付费的，大家可以进Picdict官网查看一下。本仙女也是调查了好久，才找到了一个不需要的办法，那就是我直接把需要购买的js文件给你，渠道可以是留言发邮件，也可以是直接加微信，邮箱为@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提交过来的图片，手册里面也指出了以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获取数据，获取到的数据是二进制的流，如下图所示
所以获取后要数据写进文件里面，文件的后缀名，则取决于你上传时选择的图片的类型，下面的就是功能的上的保存图片链接进库功能了，完成！