本文實(shí)例講述了javascript實(shí)現(xiàn)移動(dòng)端 HTML5 圖片上傳預(yù)覽和壓縮功能。分享給大家供大家參考，具體如下：

在開(kāi)發(fā)移動(dòng)端web網(wǎng)頁(yè)中，我們不可避免的會(huì)遇到文件上傳的功能，但由于手機(jī)圖片尺寸太大，上傳時(shí)間過(guò)長(zhǎng)導(dǎo)致用戶(hù)體驗(yàn)太差，就需要在上傳前對(duì)圖片進(jìn)行一定的壓縮。

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

file 和 FileList 對(duì)象

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

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

<input type='file' multiple/>// FileList 對(duì)象var fs = document.getElementById('text').filesconsole.log(fs)>>FileList0:FilelastModified:1487309111498lastModifiedDate:Fri Feb 17 2017 13:25:11 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)name:'1.png'size:22177type:'image/png'webkitRelativePath:''FileReader

FileReader，web應(yīng)用程序使用它可以異步的讀取存儲(chǔ)在用戶(hù)計(jì)算機(jī)上的文件(或者原始數(shù)據(jù)緩沖)內(nèi)容。

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

var reader = new FileReader()

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

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

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

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

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

如果畫(huà)布的高度或?qū)挾仁?，那么會(huì)返回字符串“data:,”。 如果傳入的類(lèi)型非“image/png”，但是返回的值以“data:image/png”開(kāi)頭，那么該傳入的類(lèi)型是不支持的。 Chrome支持“image/webp”類(lèi)型。

語(yǔ)法

canvas.toDataURL(type, encoderOptions);

參數(shù)

type 可選

​ 圖片格式，默認(rèn)為 image/png

encoderOptions 可選

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

壓縮

/*** @param{Object}finput選擇的圖片必填* @param{String}quality圖片壓縮的質(zhì)量[0, 1]* @param{String}output_img_type輸出圖片的類(lèi)型*/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; // 設(shè)置最大分辨率 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); });}實(shí)例

下面我們就來(lái)實(shí)現(xiàn)圖片預(yù)覽和壓縮功能

HTML結(jié)構(gòu)如下：

<div class='upload'> <p>上傳圖片</p> <form> <input multiple type='file' /> </form> <h4>原圖預(yù)覽</h4> <img src='http://www.gepszalag.com/bcjs/16696.html' id='test'> <h4>壓縮后預(yù)覽</h4> <img src='http://www.gepszalag.com/bcjs/16696.html' style='max-width: 200px;'> <button type='submit'>點(diǎn)擊提交</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) { // 拼接顯示預(yù)覽圖片的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); // 將轉(zhuǎn)化后的圖片地址放在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; // 設(shè)置最大分辨率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); }

DEMO效果預(yù)覽：

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。