javascript如何實現移動端HTML5圖片上傳預覽和壓縮功能

這篇文章主要講解了javascript如何實現移動端HTML5圖片上傳預覽和壓縮功能，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

我們提供的服務有：成都網站設計、成都網站制作、微信公眾號開發(fā)、網站優(yōu)化、網站認證、憑祥ssl等。為上千余家企事業(yè)單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的憑祥網站制作公司

在開發(fā)移動端web網頁中，我們不可避免的會遇到文件上傳的功能，但由于手機圖片尺寸太大，上傳時間過長導致用戶體驗太差，就需要在上傳前對圖片進行一定的壓縮。

在代碼之前，有必要先了解我們即將使用到的幾個API

file 和 FileList 對象

file對象可以用來獲取某個文件的信息,還可以用來讀取這個文件的內容.通常情況下,File對象是來自用戶在一個 input 元素上選擇文件后返回的FileList對象,也可以是來自由拖放操作生成的 DataTransfer對象。

通常情況我們這樣使用它：

<input id="test" type="file" multiple/>

// FileList 對象
var fs = document.getElementById("text").files
console.log(fs)
>>FileList
	0:File
		lastModified:1487309111498
		lastModifiedDate:Fri Feb 17 2017 13:25:11 GMT+0800 (中國標準時間)
		name:"1.png"
		size:22177
		type:"image/png"
		webkitRelativePath:""
FileReader

FileReader，web應用程序使用它可以異步的讀取存儲在用戶計算機上的文件(或者原始數據緩沖)內容。

1、具體使用之前，我們應先創(chuàng)建一個FileReader 對象

var reader = new FileReader()

2、然后讀取一個文件，共有四種方式，這里只介紹我們最常使用的一個：

reader.readAsDataURL(fs);	// var fs = document.getElementById("text").files

3、在 onload 事件中觸發(fā)回調

reader.onload = function (e) {
   console.log(e)
   console.log(this)
 }
 // this.result 是一個base64 格式的圖片地址
HTMLCanvasElement.toDataURL()

HTMLCanvasElement.toDataURL() 方法返回一個包含圖片展示的 data URI 。可以使用 type 參數其類型，默認為 PNG 格式。圖片的分辨率為96dpi。

  • 如果畫布的高度或寬度是0，那么會返回字符串“data:,”。
  • 如果傳入的類型非“image/png”，但是返回的值以“data:image/png”開頭，那么該傳入的類型是不支持的。
  • Chrome支持“image/webp”類型。

語法

canvas.toDataURL(type, encoderOptions);

參數

type 可選

&#8203; 圖片格式，默認為 image/png

encoderOptions 可選

&#8203; 在指定圖片格式為 image/jpeg 或 image/webp的情況下，可以從 0 到 1 的區(qū)間內選擇圖片的質量。如果超出取值范圍， 將會使用默認值 0.92。其他參數會被忽略。

壓縮
/**
* @param	{Object}	f	input選擇的圖片	必填
* @param	{String}	quality		圖片壓縮的質量[0, 1]
* @param	{String}	output_img_type		輸出圖片的類型
*/
compress: function (f, quality, output_img_type) {
          var mime_type = "image/jpeg";
          if(output_img_type!=undefined && output_img_type=="image/png"){
            mime_type = "image/png";
          }
          createImageBitmap(f).then(function(imageBitmap) {
            var max = 1000; // 設置最大分辨率
            var c_w = '';
            var c_h = '';
            var width = imageBitmap.width;
            var height = imageBitmap.height;
            // 等比例縮放
            if (width > max || height > max) {
              if (width > height) {
                c_w = max;
                c_h = max * height / width;
              } else {
                c_h = max;
                c_w = max * width / height;
              }
            }else {   // 不縮放
              c_w = width;
              c_h = height;
            }

            var canvas = document.createElement('canvas');
            canvas.width = c_w;
            canvas.height = c_h;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(imageBitmap,0,0, width, height, 0, 0, c_w, c_h);
            canvas.toBlob(function(blob){
              images.push(blob);
            },mime_type, quality);
          });
        }
實例

下面我們就來實現圖片預覽和壓縮功能

HTML結構如下：

<div class="upload">
  <p>上傳圖片</p>
  <form>
    <input multiple id="upload_input" type="file" />
  </form>
  <h5>原圖預覽</h5>
  <img src="" id="test">
  <h5>壓縮后預覽</h5>
  <img src="" id="test2" >
  <button type="submit">點擊提交</button>
</div>

JS 代碼如下：

 window.onload = function () {
    var Upload = {
      change: function () {
        var oform = document.querySelector('form'),
          _this = this,
          res = //,
          oFiles = document.getElementById('upload_input').files;
        console.log(oFiles)
        for(var key in oFiles) {
          if(oFiles.hasOwnProperty(key)) {
            var f = oFiles[key];
            var type = f.type;
            if(type !== 'image/png' && type !== 'image/jpg' &&type !== 'image/jpeg' ) {
              alert("圖片的格式必須為png或者jpg或者jpeg格式！");
              return;
            }
            var reader = new FileReader();
            reader.readAsDataURL(f);
            reader.onload = function (e) {
              console.log(e)
              console.log(this)
              var img = document.getElementById('test');
              var img2 = document.getElementById('test2');
              img.src = this.result;

              var quality = .8;
              var compressImg = Upload.compress(img,quality);
              img2.src = compressImg
            }
          }
        }

      },
      change2: function() {
        var file_arr = file.files;
            var ul = $(".weui_uploader_files");
            if(file_arr.length < 7) {
              for(var key in file_arr) {
                if(file_arr.hasOwnProperty(key)) {
                  var f = file_arr[key];
                  var url = URL.createObjectURL(f);
                  var reader = new FileReader();
                  reader.readAsDataURL(f);
                  n +=1;
                  if(n < 7) {
                    reader._onload = function(e) {

                      // 拼接顯示預覽圖片的html
                      var list = $("<li class='weui_uploader_file' style='position: relative'>" +
                        "<img id='preview" + n + "' class=preview_li' style='width: 100%;height: 100%'>" +
                        "<span id='delImg" + n+ "' style='position: absolute; top: 0; right: 4px; color: #e4007f'>X</span></li>");
                      ul.append(list);
                      // 將轉化后的圖片地址放在img中
                      var pic = document.getElementById('preview' + n);
                      //pic.src = this.result;
                      pic.src=url;
                      console.log(reader);
                      images.push(f);
                      document.getElementById('delImg' + n).addEventListener("click", function () {
                        $(this).parent().remove();
                      });
                      return {
                        images:images
                      };
                    };
                    reader._onload();
                  }else {
                    $.alert("最多上傳6張圖片");
                  }
                }
              }
            }else {
              $.alert("最多上傳6張圖片");
            }
      },
      compress: function (source_img, quality, output_img_type) {
        var mime_type = "image/jpeg";
        if(output_img_type!=undefined && output_img_type=="image/png"){
          mime_type = "image/png";
        }
        var max = 1000; // 設置最大分辨率
        var c_w = '';
        var c_h = '';
        var width = source_img.width;
        var height = source_img.height;
        // 等比例縮放
        if (width > max || height > max) {
          if (width > height) {
            c_w = max;
            c_h = max * height / width;
          } else {
            c_h = max;
            c_w = max * width / height;
          }
        }else {   // 不縮放
          c_w = width;
          c_h = height;
        }
        var canvas = document.createElement('canvas');
        canvas.width = c_w;
        canvas.height = c_h;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(source_img,0,0, width, height, 0, 0, c_w, c_h);

        var outputUrl = canvas.toDataURL(mime_type, quality);
        return outputUrl;
      },
      submit: function () {

      }

    };

    document.getElementById('upload_input').addEventListener('change',Upload.change);
  }

看完上述內容，是不是對javascript如何實現移動端HTML5圖片上傳預覽和壓縮功能有進一步的了解，如果還想學習更多內容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享文章：javascript如何實現移動端HTML5圖片上傳預覽和壓縮功能
URL網址：http://www.muchs.cn/article26/ijscjg.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站策劃、網站建設、App設計、虛擬主機、品牌網站建設、微信小程序

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

成都網站建設公司