上传时压缩图片-Picdict

PHP 专栏收录该内容
18 篇文章 1 订阅

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

上篇文章推荐了大家一款可以测试网页速度,定位网站优化方向的工具------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杂货店,点击进店铺,欢迎选购哟,说明了解来源可以优惠!!!

  • 2
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值