H5+jqweui實現手機端圖片壓縮上傳

時間 2019-11-19

標籤 h5+jqweui jqweui 實現手機圖片壓縮上傳简体版

原文原文鏈接

主要功能，使用H5的formData上傳base64格式的圖片，canvas壓縮圖片，前端樣式使用weui，爲方便起見，使用了jquery封裝過的weui，jqweui。php

話很少少，開始上代碼。css

前端代碼，直接在jqweui官網下的demo裏改的（是dist下的demo）html

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery WeUI</title>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">

<link rel="stylesheet" href="../lib/weui.min.css">
<link rel="stylesheet" href="../css/jquery-weui.css">
<link rel="stylesheet" href="css/demos.css">

  </head>

  <body ontouchstart>
    <header class='demos-header'>
      <h1 class="demos-title">Uploader</h1>
    </header>

    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <div class="weui-uploader">
            <div class="weui-uploader__hd">
              <p class="weui-uploader__title">圖片上傳</p>
              <div class="weui-uploader__info">0/2</div>
            </div>
            <div class="weui-uploader__bd">
              <ul class="weui-uploader__files" id="uploaderFiles">
                <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>

              </ul>
              <div class="weui-uploader__input-box">
                <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="../lib/jquery-2.1.4.js"></script>
<script src="../lib/fastclick.js"></script>
<script>
  $(function() {
    FastClick.attach(document.body);
  });
</script>
<script src="../js/jquery-weui.js"></script>
<script>
  $(function () {  
    // 容許上傳的圖片類型  
    var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];  
    // 1024KB，也就是 1MB  
    var maxSize = 2048 * 2048;  
    // 圖片最大寬度  
    var maxWidth = 10000;  
    // 最大上傳圖片數量  
    var maxCount = 6;  
    $('#uploaderInput').on('change', function (event) {  
      var files = event.target.files;  
      //console.log(files);return false;
        // 若是沒有選中文件，直接返回  
        if (files.length === 0) {  
          return;  
        }  
        
        for (var i = 0, len = files.length; i < len; i++) {  
          var file = files[i];  
          var reader = new FileReader();  
          
            // 若是類型不在容許的類型範圍內  
            if (allowTypes.indexOf(file.type) === -1) {  
              
                $.alert("該類型不容許上傳！", "警告！");              
              continue;  
            }  
            
            if (file.size > maxSize) {  
              //$.weui.alert({text: '圖片太大，不容許上傳'});
                $.alert("圖片太大，不容許上傳", "警告！");              
              continue;  
            }  
            
            if ($('.weui-uploader__file').length >= maxCount) {  
              $.weui.alert({text: '最多隻能上傳' + maxCount + '張圖片'});  
              return;  
            }  
            reader.readAsDataURL(file);  
            reader.onload = function (e) {
                //console.log(e);
              var img = new Image(); 
                img.src = e.target.result;         
                img.onload = function () {  
                    // 不要超出最大寬度  
                    var w = Math.min(maxWidth, img.width);  
                    // 高度按比例計算  
                    var h = img.height * (w / img.width);  
                    var canvas = document.createElement('canvas');  
                    var ctx = canvas.getContext('2d');  
                    // 設置 canvas 的寬度和高度  
                    canvas.width = w;  
                    canvas.height = h;  
                    ctx.drawImage(img, 0, 0, w, h); 
　　　　　　　　　　　　
                    var base64 = canvas.toDataURL('image/jpeg',0.8);  
                   //console.log(base64);
                    // 插入到預覽區  
                    var $preview = $('<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(' + img.src + ')"><div class="weui-uploader__file-content">0%</div></li>');  
                    $('#uploaderFiles').append($preview);  
                    var num = $('.weui-uploader__file').length;  
                    $('.weui-uploader__info').text(num + '/' + maxCount);  
                    
                   
                     var formData = new FormData();
 
                    formData.append("images", base64);
                    //console.log(img.src);
                         $.ajax({
     
                                    url: "savetofile.php",
                                     
                                    type: 'POST',
                                     
                                    data: formData,
                                                                                     
                                    contentType:false,
                                                                                    
                                    processData:false,
                                    
                                    success: function(data){
                                
                                    
                                    $preview.removeClass('weui-uploader__file_status');
                                            $.toast("上傳成功", function() {
                                              //console.log('close');
                                            });
                                },
                                error: function(xhr, type){
                                alert('Ajax error!')
                                }
                                    });
        
                      };  
                      
                                    
                    };  
                    
                  }  
                });  
  }); 
</script>
  </body>
</html>

上述代碼中前端

 var base64 = canvas.toDataURL('image/jpeg',0.8);

只有這個函數的第一個參數爲image/jpeg是壓縮功能纔可正常使用，第二個參數爲壓縮比例jquery

php代碼，對base64格式的圖片解碼並保存ajax

<?php
  
$imgData = $_REQUEST['images'];
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $imgData, $result)){
  $type = $result[2];
    
    $rand = rand(1000,9999);
  $new_file = 'img/'.$rand.'.'.$type;
  if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $imgData)))){
    echo $type;
  }

}
    
?>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。