首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

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处理多图上传压缩代码功能

- Author -

qq_20411009

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
thinkphp3.0 模板中函数的使用
Nov 13 PHP
ajax php传递和接收变量实现思路及代码
Dec 19 PHP
基于PHP编程注意事项的小结
Apr 27 PHP
与文件上传有关的php配置参数总结
Jun 14 PHP
PHP中使用memcache存储session的三种配置方法
Apr 05 PHP
destoon实现资讯信息前面调用它所属分类的方法
Jul 15 PHP
给PHP开发者的编程指南 第一部分降低复杂程度
Jan 18 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
Apr 07 PHP
谈谈php对接芝麻信用踩的坑
Dec 01 PHP
PHP实现限制IP访问的方法
Apr 20 PHP
解决laravel5.4下的group by报错的问题
Oct 16 PHP
Laravel框架下的Contracts契约详解
Mar 17 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
Logrotate(1) 临时表(1) 批处理(1) 表变量(1) timestamp(1) 排序失效(1) 黑名单(1) T-SQL(1) NFS(1) 重复数据(2)
You might like
3
2006/10/09 PHP
php+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
一步一步学习PHP(8) php 数组
2010/03/05 PHP
关于尾递归的使用详解
2013/05/02 PHP
php下载excel无法打开的解决方法
2013/12/24 PHP
php按单词截取字符串的方法
2015/04/07 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
PDO::errorCode讲解
2019/01/28 PHP
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
JavaScript常用脚本汇总（二）
2015/03/04 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
Angular2中监听数据更新的方法
2018/08/31 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
vue实现图片上传功能
2020/05/28 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
Myprotein瑞士官方网站：运动营养和健身网上商店
2019/09/25 全球购物
银行学习十八大感想
2014/01/11 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
我爱我家教学反思
2014/05/01 职场文书
积极向上的团队口号
2014/06/06 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
被告代理词范文
2015/05/25 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL