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

阿新 • • 發佈：2019-01-14

主要功能，使用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實現手機端圖片壓縮上傳 Base64

主要功能，使用H5的formData上傳base64格式的圖片，canvas壓縮圖片，前端樣式使用weui，為方便起見，使用了jquery封裝過的weui，jqweui。話不多少，開始上程式碼。前端程式碼，直接在jqweui官網下的demo裡改的（是dist下的demo）<!DOCTYPE html&g

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

主要功能，使用H5的formData上傳base64格式的圖片，canvas壓縮圖片，前端樣式使用weui，為方便起見，使用了jquery封裝過的weui，jqweui。話不多少，開始上程式碼。前端程式碼，直接在jqweui官網下的demo裡改的（是dist下的demo） <!DOCTYPE ht

移動端圖片壓縮上傳解決方案

長度繪制圖片 slice ase 但是 choose 100萬 lis 計算最近做移動端圖片上傳，發現圖片尤其是iPhone拍照的圖片都有2M左右，但是實際上項目中用不到這麽大，於是想到要用js在前臺進行壓縮。解決方案如下：　【一】獲取圖片數據　　先是獲取圖片數據

JS+HTML5實現前端的圖片壓縮上傳到騰訊的COS上

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="w

基於vue + axios + lrz.js 微信端圖片壓縮上傳

業務場景微信端專案是基於Vux + Axios構建的，關於圖片上傳的業務場景有以下幾點需求: 1、單張圖片上傳(如個人頭像,實名認證等業務) 2、多張圖片上傳(如某類工單記錄) 3、上傳圖片時期望能按指定尺寸壓縮處理 4、上傳圖片可以從相簿中選擇或者直接拍照遇到的坑採用微信JSSDK上傳圖片在之前開發

Vue directive自定義指令+canvas實現H5圖片壓縮上傳-Base64格式

前言最近優化專案-手機拍照圖片太大，回顯速度比較慢，使用了vue的自定義指令實現H5壓縮上傳base64格式的圖片 canvas自定義指令 Vue.directive("canvas",

H5實現多圖上傳與預覽，圖片壓縮上傳

H5多圖上傳，並實現壓縮(可根據實際情況選擇對多大的圖片進行壓縮，本例為大於512KB的進行壓縮)和預覽 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

egg-ueditor，基於egg的UEditor百度編輯器後端實現，支援圖片/檔案上傳、列表及圖片遠端抓取

egg-ueditor 基於egg的UEditor百度編輯器後端實現，支援圖片/檔案上傳、列表及圖片遠端抓取原始碼:https://github.com/inmyjs/egg-ueditor 安裝 npm install egg-ueditor --save 使用方

h5圖片壓縮上傳

1.做這個確實有必要的，有的手機拍出來的照片很大，然後加上網速一般，上傳很慢，一直等待，好不容易等到資源上傳時間結束了，但是後端介面又超時了。太久了，使用者體驗肯定不好。簡直可以說是沒辦法繼續使用了。2.已經可以查到好多人寫好的。但是直接拿來複用，總有這樣那樣的問題。3.我用

微信小程式呼叫攝像頭，實現圖片壓縮上傳

這篇文章主要為大家詳細介紹了微信小程式實現圖片壓縮功能,具有一定的參考價值,感興趣的小夥伴們可以參考一下，下面直接上程式碼先是wxml: <view bindtap='takePictures'>選擇圖片</view> <canv

循序漸進VUE+Element 前端應用開發(23）--- 基於ABP實現前後端的附件上傳，圖片或者附件展示管理

在我們一般系統中，往往都會涉及到附件的處理，有時候附件是圖片檔案，有時候是Excel、Word等檔案，一般也就是可以分為圖片附件和其他附件了，圖片附件可以進行裁剪管理、多個圖片上傳管理，及圖片預覽操作，如果是其他附件，則只需上傳和下載處理即可。本篇隨筆基於ABP後端的介面整合，實現前後端的附件上傳管理。 1、

前端圖片壓縮上傳(純js的質量壓縮，非大小壓縮)

默認 || callback doc 圖片格式 toc jpeg rtb src 此demo為大於1M對圖片進行壓縮上傳若小於1M則原圖上傳，可以根據自己實際需求更改。 demo源碼如下： <!DOCTYPE html> <html> <h

移動前端圖片壓縮上傳

safari 嘻嘻如果 tee ini andro 並且 ons create 　　摘要：之前在做一個小遊戲平臺項目，有個“用戶中心”模塊，就涉及到了頭像上傳的功能。在做移動端圖片上傳的時候，傳的都是手機本地圖片，而本地圖片一般都相對比較大，拿現在的智能手機來說，平時拍很

vue裏圖片壓縮上傳組件

UNC cep accept posit click toa dcl v-on ati //單圖上傳 <template> <div> <div class="uploader" v-if=‘!dwimg‘&g

微信小程序實現多張圖片同時上傳的方法

地址 complete 就是 name func pre files success fun 對於微信小程序上傳圖片其實很麻煩的，每次只能上傳一張，所有很多朋友就會問想要多張圖片上傳怎麽辦?這裏使用遞歸，當上傳完一張圖片後重新執行這個函數，直到所有的圖片都上傳完成後，就不再

TP框架圖片壓縮/上傳

<-- 在前端的程式碼 --><form action="{:url('index/user/personal')}" method="post" enctype="multipart/form-data"> <input type="file" name="image"

圖片壓縮上傳mongodb和下載

// 獲得SpringBoot提供的mongodb的GridFS物件 @Autowired private GridFsTemplate gridFsTemplate; public ServiceResult<FileInfoAO> compressUplo

JS—圖片壓縮上傳（單張）

eight ascii value size set tsa ade ready chan *vue+webpack環境，這裏的that指到vue實例 <input type="file" name="file" ac

JQ圖片壓縮上傳

css * { margin: 0; padding: 0; } li { list-style-type: none; } a, input { outline: none; -webkit-tap-high

Spring 使用七牛雲端儲存上傳圖片以及html5圖片壓縮上傳

需求：最近在做專案的時候採用了多模組的方案前臺是一個系統後臺是另一個系統在做圖片上傳的時候有個問題如果想之前那樣前臺系統的圖片儲存的自己的web應用目錄下後臺系統是沒法訪問的（直接寫死路徑不太好）這裡我想到了兩個方案方案一：自己搭建

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

相關推薦