怎么通過js實現壓縮圖片上傳功能

這篇文章給大家分享的是有關怎么通過js實現壓縮圖片上傳功能的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

大概的流程就是

• 點擊file選擇圖片

• js將圖片解讀出base64編碼,然后通過js將base64編碼轉為壓縮后的base64

• 然后通過ajax或者form把壓縮后的base64編碼提交到服務器(php)

• 然后php將base64寫入文件

html

<!-- 首先引入jquery!!!!!!這里沒有引入 -->


<img src="/Uploads/verifyinfo/cardz.png" >
<input id="cardz" name="cardz" class="weui-uploader__input" type="file" accept="image/*" multiple="">
<input type="hidden" id="cardzbase" name="cardzbase">


<script>
 $(function(){
  $("input[type=file]").on('change', function(){

   var filePath = $(this).val(),     //獲取到input的value，里面是文件的路徑
       fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
       fileObj = document.getElementById($(this).attr('id')).files[0]; //上傳文件的對象,要這樣寫才行，用jquery寫法獲取不到對象

   var imgBase64str = '';   //存儲圖片的imgBase64
   // 檢查是否是圖片
   if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
    alert('上傳錯誤,文件格式必須為：png/jpg/jpeg');
    return;
   }
   var that = this;
   // 調用函數，對圖片進行壓縮
   compress(fileObj,function(imgBase64){
    imgBase64str = imgBase64;//存儲轉換后的base64編碼

    var reader = new FileReader();
    var img = $(that).prev("img")
    file = that.files[0]
    reader.addEventListener("load", function () {
     img.attr("src",imgBase64str);
     $("#"+$(that).attr('id')+"base").val(imgBase64str);
    }, false);
    reader.readAsDataURL(file)
   });



  })
  $("#uploadcard").on("click", function(){
   var cardzbase = $("#cardzbase").val();
   if (cardzbase.length<=0) {
    $.toast("請添加正面照");
    return;
   }
   $.post(
    "php路徑",
    {
     cardzbase:cardzbase
    },
    function (data) {
     alert(data.msg);
    }
   );


  });
 })
 // 對圖片進行壓縮
 function compress(fileObj, callback){
  if ( typeof (FileReader) === 'undefined') {
   console.log("當前瀏覽器內核不支持base64圖標壓縮");
   //調用上傳方式不壓縮
   directTurnIntoBase64(fileObj,callback);
  } else {
   var reader = new FileReader();
   reader.onload = function (e) { //要先確保圖片完整獲取到，這是個異步事件


    var image = new Image();
    image.src=e.target.result;
    image.onload = function(){
     square = 0.2,  //定義畫布的大小，也就是圖片壓縮之后的像素
         canvas = document.createElement('canvas'), //創建canvas元素
         context = canvas.getContext('2d'),
         imageWidth = Math.round(square*image.width),  //壓縮圖片的大小
         imageHeight = Math.round(square*image.height),
         data = '';

     canvas.width = imageWidth;
     canvas.height = imageHeight;
     context.clearRect(0, 0, imageWidth, imageHeight); //在給定矩形內清空一個矩形
     context.drawImage(this, 0, 0, imageWidth, imageHeight);
     var data = canvas.toDataURL('image/jpeg',0.6);
     //壓縮完成執行回調

     callback(data);
    };
   };
   reader.readAsDataURL(fileObj);

  }
 }
 // 不對圖片進行壓縮，直接轉成base64
 function directTurnIntoBase64(fileObj,callback){
  var r = new FileReader();
  // 轉成base64
  r.onload = function(){
   //變成字符串
   imgBase64 = r.result;
   //console.log(imgBase64);
   callback(imgBase64);
  }
  r.readAsDataURL(fileObj);  //轉成Base64格式
 }
</script>

php

<?php
/**
   * [將Base64圖片轉換為本地圖片并保存]
   * @param $base64_image_content [要保存的Base64]
   * @param $path [要保存的路徑]
   * @return bool|string
   */
  public function base64_image_content($base64_image_content,$path){
    //匹配出圖片的格式
    if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){
      $type = $result[2];
      //生成文件名
      $file_name = random_str(10).".{$type}";
      //路徑和文件名拼接
      $local_file_url = $path.$file_name;
      if (file_put_contents($local_file_url, base64_decode(str_replace($result[1], '', $base64_image_content)))){
        return array("filename"=>$file_name,"path"=>$path,"filepath"=>$local_file_url);
      }else{
        return false;
      }
    }else{
      return false;
    }
  }

  public function uploadm()
  {
    $da['status'] = 0;
    if (IS_POST) {
      $infoz = I("post.cardzbase");
      if (!$infoz || !$infof) {
        // 上傳錯誤提示錯誤信息
//        $this->error($upload->getError());
        $da['msg'] = "上傳異常";
      } else {
        $infoz_info = $this->base64_image_content($infoz,"Uploads/verifyinfo/");
        if($infof_info==false){
          $da['msg'] = "上傳失敗";
        }else{
          //自己的業務...
        }
      }
    }else{
      $da['msg'] = "非法請求";
    }
    $this->ajaxReturn($da);
  }

感謝各位的閱讀！關于“怎么通過js實現壓縮圖片上傳功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！