php处理多图上传压缩代码功能


Posted in PHP onJune 13, 2018

网上看了一些资料,关于处理图片压缩的,找到的大部分是单图压缩的,要么是单前端或者后端的,所以就自己整了下前后端压缩,并支持多图的压缩图片实例。代码有点多,直接复制到编辑器看会比较清楚

1、先创建的一个简单的上传页面upload.php。先通过前端代码压缩图片,直接上代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <title>实名验证</title>
  <script type="text/javascript">
    /*
    三个参数
    file:一个是文件(类型是图片格式),
    w:一个是文件压缩的后宽度,宽度越小,字节越小
    objDiv:一个是容器或者回调函数
    photoCompress()
     */
    function photoCompress(file,w,objDiv){
      var ready=new FileReader();
      /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
      ready.readAsDataURL(file);
      ready.onload=function(){
        var re=this.result;
        canvasDataURL(re,w,objDiv)
      }
    }
    function canvasDataURL(path, obj, callback){
      var img = new Image();
      img.src = path;
      img.onload = function(){
        var that = this;
        // 默认按比例压缩
        var w = that.width,
          h = that.height,
          scale = w / h;
        w = obj.width || w;
        h = obj.height || (w / scale);
        var quality = 0.7; // 默认图片质量为0.7
        //生成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        // 创建属性节点
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        ctx.drawImage(that, 0, 0, w, h);
        // 图像质量
        if(obj.quality && obj.quality <= 1 && obj.quality > 0){
          quality = obj.quality;
        }
        // quality值越小,所绘制出的图像越模糊
        var base64 = canvas.toDataURL('image/jpeg', quality);
        // 回调函数返回base64的值
        callback(base64);
      }
    }
    /**
     * 将以base64的图片url数据转换为Blob
     * @param urlData
     * 用url方式表示的base64图片数据
     */
    function convertBase64UrlToBlob(urlData){
      var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
      while(n--){
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], {type:mime});
    }
    var xhr;
    //上传文件方法
    function uploadClick() {
      document.getElementsByClassName("uploadbtn")[0].value = '上传中...';
      document.getElementsByClassName("uploadbtn")[0].disabled=true; 
      var obj = document.getElementsByClassName("myfile");
      for(var i=0;i<2;i++){
        UploadFile(obj[i].files[0],'file'+i);
      }
    }
    function UploadFile(fileObj,filed){
      var shopid = document.getElementById('shopid').value;
      var adminid = document.getElementById('adminid').value;
      var url = "newshimingupload.php"; // 接收上传文件的后台地址 
      var form = new FormData(); // FormData 对象
      if(fileObj.size/1024 > 100) { //大于100k,进行压缩上传
        photoCompress(fileObj, {
          quality: 0.2
        }, function(base64Codes){
          //console.log("压缩后:" + base.length / 1024 + " " + base);
          var bl = convertBase64UrlToBlob(base64Codes);
          form.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象
          form.append("shopid", shopid); // 文件对象
          form.append("adminid", adminid); // 文件对象
          form.append("filed", filed); // 文件对象
          xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
          xhr.open("post", url, false); //post方式,url为服务器请求地址,true 该参数规定请求是否异步处理。
          xhr.onload = uploadComplete; //请求完成
          xhr.onerror = uploadFailed; //请求失败
          // xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
          xhr.upload.onloadstart = function(){//上传开始执行方法
            ot = new Date().getTime();  //设置上传开始时间
            oloaded = 0;//设置上传开始时,以上传的文件大小为0
          };
          xhr.send(form); //开始上传,发送form数据
        });
      }else{ //小于等于1M 原图上传
        form.append("file", fileObj); // 文件对象
        form.append("shopid", shopid); // 文件对象
        form.append("adminid", adminid); // 文件对象
        form.append("filed", filed); // 文件对象
        xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
        xhr.open("post", url, false); //post方式,url为服务器请求地址,true 该参数规定请求是否异步处理。
        xhr.onload = uploadComplete; //请求完成
        xhr.onerror = uploadFailed; //请求失败
        xhr.upload.onloadstart = function(){//上传开始执行方法
          ot = new Date().getTime();  //设置上传开始时间
          oloaded = 0;//设置上传开始时,以上传的文件大小为0
        };
        xhr.send(form); //开始上传,发送form数据
      }
    }
    //上传成功响应
    function uploadComplete(evt) {
      //服务断接收完文件返回的结果
      var data = JSON.parse(evt.target.responseText);
      console.log(data);
      if(data.status){
        alert(data.msg);
        if(data.msg == '门店照上传成功'){
          window.location.href = "/dd_admin/index.php";
        }
      }
    }
    //上传失败
    function uploadFailed(evt) {
      alert("网络不稳定,请重新上传!");
    }
  </script>
</head>
<body>
  <style type="text/css">
    .main{text-align: center;padding-top: 50px;}
    .main .myfile{margin-bottom: 15px;}
  </style>
<div class="main">
  营业执照:
  <input type="file" class="myfile" id="file1" name="file1" accept="image/x-png, image/jpg, image/jpeg, image/gif"/><br>
  门店照:
  <input type="file" class="myfile" id="file2" name="file2" accept="image/x-png, image/jpg, image/jpeg, image/gif"/><br>
  <input type="hidden" id="shopid" name="shopid" value="<?php echo $_GET['shopid']; ?>" maxlength="15">
  <input type="hidden" id="adminid" name="adminid" value="<?php echo $_GET['adminid']; ?>" maxlength="15">
  <input style="margin-top: 25px;" class="uploadbtn" type="button" onclick="uploadClick()" value="上传" /><br>
</div>
</body>
</html>
2、前端图片压缩后,请求到自定义的接口upload_deal.php.代码如下
<?php
require_once('public_func.php');
  actionUpload('uploads/','file'); //参数分别代表图片存储的路径和上传的文件名
}
3、在第二部引入public_func.php,这块代码主要是对后端处理图片压缩
function actionUpload($path = '/uploads/',$filename='myFile')
  {
    // $path = 'uploads/';  //图片存放根目录 根据自己项目路径而定
    $file = $_FILES[$filename]['name'];
    $folder = $path.date('Ymd')."/";
    $pre = rand(999,9999).time();
    $ext = strrchr($file,'.');
    $newName = $pre.$ext;
    $out = array(
      'msg'=>'',
      'status'=>'error',
      'img_url'=>''
    );
    if(!is_dir($folder))
    {
      if(!mkdir($folder, 0777, true)){
        $out['msg'] = '图片目录创建失败!';
        echo json_encode($out);
        exit;
      }
    }
    $im = $_FILES[$filename]['tmp_name']; //上传图片资源
    $maxwidth="1056"; //设置图片的最大宽度
    $maxheight="500"; //设置图片的最大高度
    $imgname = $folder.$newName; //图片存放路径 根据自己图片路径而定
    $filetype=$_FILES[$filename]['type'];//图片类型
    $result = thumbImage($im,$maxwidth,$maxheight,$imgname,$filetype);
    if($result){
      $out['msg'] = '图片上传成功';
      $out['status'] = 'success';
      $out['img_url'] = $folder.$newName;
    }else{
      $out['msg'] = '图片上传失败';
    }
    return json_encode($out);
    exit;
  }
  //压缩图片
  function thumbImage($im,$maxwidth,$maxheight,$name,$filetype)
  {
    switch ($filetype) {   
      case 'image/pjpeg':   
      case 'image/jpeg':   
        $im = imagecreatefromjpeg($im);  //PHP图片处理系统函数
        break;   
      case 'image/gif':   
        $im = imagecreatefromgif($im);  
        break;   
      case 'image/png':   
        $im = imagecreatefrompng($im);  
        break;
      case 'image/wbmp':   
        $im = imagecreatefromwbmp($im);  
        break;       
    } 
    $resizewidth_tag = $resizeheight_tag = false;
    $pic_width = imagesx($im);
    $pic_height = imagesy($im);
    if(($maxwidth && $pic_width > $maxwidth) || ($maxheight && $pic_height > $maxheight))
    {
  $resizewidth_tag = $resizeheight_tag = false;
      if($maxwidth && $pic_width>$maxwidth)
      {
        $widthratio = $maxwidth / $pic_width;
        $resizewidth_tag = true;
      }
      if($maxheight && $pic_height>$maxheight)
      {
        $heightratio = $maxheight / $pic_height;
        $resizeheight_tag = true;
      }
      if($resizewidth_tag && $resizeheight_tag)
      {
        if($widthratio < $heightratio)
         $ratio = $widthratio;
        else
         $ratio = $heightratio;
      }
      if($resizewidth_tag && !$resizeheight_tag)
      $ratio = $widthratio;
      if($resizeheight_tag && !$resizewidth_tag)
      $ratio = $heightratio;
      $newwidth = $pic_width * $ratio;
      $newheight = $pic_height * $ratio;
      if(function_exists("imagecopyresampled"))
      {
        $newim = imagecreatetruecolor($newwidth,$newheight);//PHP图片处理系统函数
        imagecopyresampled($newim,$im,0,0,0,0,$newwidth,$newheight,$pic_width,$pic_height);//PHP图片处理系统函数
      }
      else
      {
        $newim = imagecreate($newwidth,$newheight);
        imagecopyresized($newim,$im,0,0,0,0,$newwidth,$newheight,$pic_width,$pic_height);
      }
      switch ($filetype) {   
        case 'image/pjpeg' :   
        case 'image/jpeg' :   
          $result = imagejpeg($newim,$name);  
          break;   
        case 'image/gif' :   
          $result = imagegif($newim,$name);  
          break;   
        case 'image/png' :   
          $result = imagepng($newim,$name);  
          break;
        case 'image/wbmp' :   
          $result = imagewbmp($newim,$name);  
          break;       
      } 
      imagedestroy($newim);
    }
    else
    {
      switch ($filetype) {   
        case 'image/pjpeg' :   
        case 'image/jpeg' :   
          $result = imagejpeg($im,$name);  
          break;   
        case 'image/gif' :   
          $result = imagegif($im,$name);  
          break;   
        case 'image/png' :   
          $result = imagepng($im,$name);  
          break;
        case 'image/wbmp' :   
          $result = imagewbmp($im,$name);  
          break;       
      }
    }
    return $result; 
  }

总结

以上所述是小编给大家介绍的php处理多图上传压缩代码功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

PHP 相关文章推荐
生成sessionid和随机密码的例子
Oct 09 PHP
PHP集成FCK的函数代码
Sep 27 PHP
允许phpmyadmin空密码登录的配置方法
May 29 PHP
PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明
Dec 05 PHP
PHP中使用循环实现的金字塔图形
Nov 08 PHP
php版微信小店调用api示例代码
Nov 12 PHP
php插入含有特殊符号数据的处理方法
Nov 24 PHP
PHP实现的文件上传类与用法详解
Jul 05 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
Jul 10 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
Jun 13 PHP
Laravel框架控制器的request与response用法示例
Sep 30 PHP
PHP中类与对象功能、用法实例解读
Mar 27 PHP
Laravel框架使用Seeder实现自动填充数据功能
Jun 13 #PHP
PHP实现打包zip并下载功能
Jun 12 #PHP
PHPUnit测试私有属性和方法功能示例
Jun 12 #PHP
PHP+redis实现的悲观锁机制示例
Jun 12 #PHP
thinkPHP5框架auth权限控制类与用法示例
Jun 12 #PHP
thinkPHP5框架实现基于ajax的分页功能示例
Jun 12 #PHP
Laravel框架路由和控制器的绑定操作方法
Jun 12 #PHP
You might like
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
Javascript 对象的解释
2008/11/24 Javascript
chrome原生方法之数组
2011/11/30 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
vue2.0 elementUI制作面包屑导航栏
2018/02/22 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
linux下安装easy_install的方法
2013/02/10 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
Python爬虫包BeautifulSoup简介与安装(一)
2018/06/17 Python
Python实现的txt文件去重功能示例
2018/07/07 Python
django session完成状态保持的方法
2018/11/27 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
EJB实例的生命周期
2016/10/28 面试题
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
死亡证明书样本说明
2014/10/18 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
签字仪式主持词
2015/07/03 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
Python字符串格式化方式
2022/04/07 Python