本文主要介紹JS圖片壓縮的方法,包括等比壓縮圖片的方法,需要的朋友可以參考下,希望能幫助到大家。
大多時候我們需要將一個File物件壓縮之後再變成File物件傳入到遠端圖片伺服器;有時候我們也需要將一個base64字串壓縮之後再變成base64字串傳入到遠端資料庫;有時候它還有可能是一塊canvas畫布,或是一個Image對象,或是直接就是一個圖片的url位址,我們需要將它們壓縮上傳到遠端;面對這麼多的需求,索性畫了一張圖:
Alt text
#二、解決辦法
如上圖所示,王二一共寫了七個方法,基本上覆蓋了JS中大部分文件類型的轉換與壓縮,其中:
1、 urltoImage(url,fn) 會通過一個url加載所需要的圖片對象,其中url 參數傳入圖片的url , fn 為回調方法,包含一個Image對象的參數,代碼如下:
function urltoImage (url,fn){ var img = new Image(); img.src = url; img.onload = function(){ fn(img); } };
2、imagetoCanvas(image) 會將一個Image 物件轉變為一個Canvas 類型對象,其中image 參數傳入一個Image對象,程式碼如下:
function imagetoCanvas(image){ var cvs = document.createElement("canvas"); var ctx = cvs.getContext('2d'); cvs.width = image.width; cvs.height = image.height; ctx.drawImage(image, 0, 0, cvs.width, cvs.height); return cvs ; };
3、 canvasResizetoFile(canvas,quality,fn) 會將一個Canvas 物件壓縮轉換為一個Blob 類型物件;其中canvas 參數傳入一個Canvas 物件; quality 參數傳入一個0-1的number 類型,表示圖片壓縮品質; fn 為回呼方法,包含一個Blob 物件的參數;程式碼如下:
function canvasResizetoFile(canvas,quality,fn){ canvas.toBlob(function(blob) { fn(blob); },'image/jpeg',quality); };
這裡的Blob 物件表示不可變的類似檔案物件的原始資料。 Blob 表示不一定是 JavaScript 原生形式的資料。 File 介面基於 Blob ,繼承了 Blob 的功能並將其擴展使其支援使用者係統上的檔案。我們可以把它當做File類型對待,其他更具體的用法可以參考MDN文檔
4、 canvasResizetoDataURL(canvas,quality) 會將一個Canvas 物件壓縮轉變為一個dataURL 字串,其中canvas 參數傳入一個Canvas 物件; quality 參數傳入一個0-1的number 類型,表示圖片壓縮品質;程式碼如下:
methods.canvasResizetoDataURL = function(canvas,quality){ return canvas.toDataURL('image/jpeg',quality); };
其中的toDataURL API可以參考MDN文件
5、 filetoDataURL(file,fn) 會將File ( Blob )型別檔轉變為dataURL 字串,其中file 參數傳入一個File ( Blob )型別檔; fn 為回呼方法,包含一個dataURL 字串的參數;代碼如下:
function filetoDataURL(file,fn){ var reader = new FileReader(); reader.onloadend = function(e){ fn(e.target.result); }; reader.readAsDataURL(file); };
6、dataURLtoImage(dataurl,fn) 會將一串dataURL 字串轉變為Image 類型檔,其中dataurl 參數傳入一個dataURL 字符字串, fn 為回呼方法,包含一個Image 類型檔案的參數,程式碼如下:
function dataURLtoImage(dataurl,fn){ var img = new Image(); img.onload = function() { fn(img); }; img.src = dataurl; };
7、dataURLtoFile(dataurl) 會將一串dataURL 字串轉變為Blob類型對象,其中dataurl 參數傳入一個dataURL 字串,程式碼如下:
function dataURLtoFile(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], {type:mime}); };
三、進一步封裝
function fileResizetoFile(file,quality,fn){ filetoDataURL (file,function(dataurl){ dataURLtoImage(dataurl,function(image){ canvasResizetoFile(imagetoCanvas(image),quality,fn); }) }) }其中, file 參數傳入一個File ( Blob )類型檔案; quality 參數傳入一個0-1 的number 類型,表示圖片壓縮品質; fn 為回呼方法,包含一個Blob 類型檔案的參數。 它使用起來就像下面這樣:
var file = document.getElementById('demo').files[0]; fileResizetoFile(file,0.6,function(res){ console.log(res); //拿到res,做出你要上传的操作; })
這樣的話,圖片壓縮上傳就能輕鬆地搞定了,以上的8個方法我已經封裝好放到github 上了,喜歡的話可以使勁的star哈。 參考文件:MDN
function proDownImage(path,imgObj) { // 等比压缩图片工具 //var proMaxHeight = 185; var proMaxHeight=300; var proMaxWidth = 175; var size = new Object(); var image = new Image(); image.src = path; image.attachEvent("onreadystatechange", function() { // 当加载状态改变时执行此方法,因为img的加载有延迟 if (image.readyState == "complete") { // 当加载状态为完全结束时进入 if (image.width > 0 && image.height > 0) { var ww = proMaxWidth / image.width; var hh = proMaxHeight / image.height; var rate = (ww < hh) ? ww: hh; if (rate <= 1) { alert("imgage width*rate is:" + image.width * rate); size.width = image.width * rate; size.height = image.height * rate; } else { alert("imgage width is:" + image.width); size.width = image.width; size.height = image.height; } } } imgObj.attr("width",size.width); imgObj.attr("height",size.height); }); }推薦10款常用的圖片壓縮上傳用法,歡迎下載! HTML5行動開發圖片壓縮上傳功能#############高效能WEB開發 圖片壓縮篇#######
以上是如何實作JS中圖片壓縮方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!