H5+jqweui实现手机端图片压缩上传

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5+jqweui实现手机端图片压缩上传相关的知识，希望对你有一定的参考价值。

主要功能，使用H5的formData上传base64格式的图片，canvas压缩图片，前端样式使用weui，为方便起见，使用了jquery封装过的weui，jqweui。

话不多少，开始上代码。

前端代码，直接在jqweui官网下的demo里改的（是dist下的demo）

<!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是压缩功能才可正常使用，第二个参数为压缩比例

php代码，对base64格式的图片解码并保存

<?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;
  }

}
    
?>

 

以上是关于H5+jqweui实现手机端图片压缩上传的主要内容，如果未能解决你的问题，请参考以下文章

H5图片预览压缩上传

H5图片预览压缩上传

h5移动端实现图片文件上传

h5移动端实现图片文件上传

使用canvas 的api 实现 图片的显示 及 压缩

移动端h5实现拍照上传图片并预览