canvas壓縮上傳圖片

Ⅰ 如何實現JS中圖片壓縮方法

本文主要介紹JS中圖片壓縮的方法，包括等比壓縮圖片的方法,需要的朋友可以參考下，希望能幫助到大家。
大多時候我們需要將一個File對象壓縮之後再變為File對象傳入到遠程圖片伺服器；有時候我們也需要將一個base64字元串壓縮之後再變為base64字元串傳入到遠程資料庫；有時候後它還有可能是一塊canvas畫布，或者是一個Image對象，或者直接就是一個圖片的url地址，我們需要將它們壓縮上傳到遠程；面對這么多的需求，索性畫了一張圖：
Alt text
二、解決辦法
如上圖所示，王二一共寫了七個方法，基本覆蓋了JS中大部分文件類型的轉換與壓縮，其中：
1、 urltoImage(url,fn) 會通過一個url載入所需要的圖片對象，其中 url 參數傳入圖片的 url , fn 為回調方法,包含一個Image對象的參數，代碼如下：


2、 imagetoCanvas(image) 會將一個 Image 對象轉變為一個 Canvas 類型對象，其中 image 參數傳入一個Image對象，代碼如下：


3、 canvasResizetoFile(canvas,quality,fn) 會將一個 Canvas 對象壓縮轉變為一個 Blob 類型對象；其中 canvas 參數傳入一個 Canvas 對象; quality 參數傳入一個0-1的 number 類型，表示圖片壓縮質量; fn 為回調方法，包含一個 Blob 對象的參數;代碼如下：


這里的 Blob 對象表示不可變的類似文件對象的原始數據。 Blob 表示不一定是 JavaScript 原生形式的數據。 File 介面基於 Blob ，繼承了 Blob 的功能並將其擴展使其支持用戶系統上的文件。我們可以把它當做File類型對待，其他更具體的用法可以參考MDN文檔
4、 canvasResizetoDataURL(canvas,quality) 會將一個 Canvas 對象壓縮轉變為一個 dataURL 字元串,其中 canvas 參數傳入一個 Canvas 對象; quality 參數傳入一個0-1的 number 類型，表示圖片壓縮質量;代碼如下：


其中的 toDataURL API可以參考MDN文檔
5、 filetoDataURL(file,fn) 會將 File （ Blob ）類型文件轉變為 dataURL 字元串,其中 file 參數傳入一個 File （ Blob ）類型文件; fn 為回調方法，包含一個 dataURL 字元串的參數;代碼如下：


6、 dataURLtoImage(dataurl,fn) 會將一串 dataURL 字元串轉變為 Image 類型文件,其中 dataurl 參數傳入一個 dataURL 字元串, fn 為回調方法，包含一個 Image 類型文件的參數，代碼如下：


7、 dataURLtoFile(dataurl) 會將一串 dataURL 字元串轉變為 Blob 類型對象，其中 dataurl 參數傳入一個 dataURL 字元串,代碼如下：


三、進一步封裝
對於常用的將一個 File 對象壓縮之後再變為 File 對象,我們可以將上面的方法再封裝一下，參考如下代碼：


其中， file 參數傳入一個 File （ Blob ）類型文件； quality 參數傳入一個 0-1 的 number 類型，表示圖片壓縮質量； fn 為回調方法，包含一個 Blob 類型文件的參數。
它使用起來就像下面這樣：


這樣的話，圖片壓縮上傳就能輕松地搞定了，以上的8個方法我已經封裝好放到 github 上了，喜歡的話可以使勁的star哈。
參考文檔：
MDN
ps：下面看下JS等比壓縮圖片的辦法

Ⅱ 前端把圖片壓縮轉換成base64編碼把值賜予input='hidden' 之後提交給後台. HTML5,PHP,Javascript,canvas

缺點你無法直接驗證傳來的base64數據的完整性，比如大小，文件頭之類的，還需要自己來實現。