上传时压缩图片-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">封面图 <spanclass="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协议的关系，自行百度，如果上传的有文件，那么只能设置为falsesuccess: 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杂货店，点击进店铺，欢迎选购哟，说明了解来源可以优惠！！！