^{<style id="oqmuo"></style>}

深入研究HTML5實現圖片壓縮上傳功能

2019-10-26 17:42:15

字體：大中小

來源：轉載

供稿：網友

上篇文章中提到移動端上傳圖片，我們知道現在流量還是挺貴的，手機的像素是越來越高，拍個照動不動就是好幾M，傷不起。雖然客戶端可以輕輕松松實現圖片壓縮再上傳，但是我們的應用還可能在瀏覽器里面打開，怎么辦呢，圖片壓縮。受以前PC上的開發思維影響，尼瑪js哪有權限去操作文件，哪有資格壓縮圖片啊，搞不了，你們客戶端去整吧。只能說自己還是有些井底之蛙了。在HTML5的影響下，前端能干的事情越來越多了，開發的功能逼格也越來越高了，H5萬歲！前端的魅力也在這，過去不可能的并不意味現在、以后不可能，努力吧，騷年！

js怎么壓縮圖片？？？潛意識里確實一開始是覺得實現不了，后來翻閱資料，研究了下，發現可行！搞起！

先說說H5以前我們怎么上傳，一般是借助插件、flash或者干脆一個文件form表單，少操不少心。

自從有了H5，老板再也不擔心我的開發了。

上篇文章提到圖片上傳用到了FileReader，FormData，實際上主要用這兩個我們基本能實現圖片的預覽和上傳了。實現圖片壓縮，我們需要借助canvas，是的，就是canvas！

大致思路是：

1、創建一個圖片和一個canvas

XML/HTML Code復制內容到剪貼板

var image = new Image(), canvas = document.createElement("canvas"),
ctx = canvas.getContext('2d');

2、我們將input中選擇的圖片地址通過FileReader獲取后賦給新建的圖片對象，然后將圖片對象丟到canvas畫布上。

XML/HTML Code復制內容到剪貼板

var file = obj.files[0]; var reader = new FileReader();//讀取客戶端上的文件
reader.onload = function() { var url = reader.result;//讀取到的文件內容.這個屬性只在讀取操作完成之后才有效,并且數據的格式取決于讀取操作是由哪個方法發起的.所以必須使用reader.onload，
image.src=url;//reader讀取的文件內容是base64,利用這個url就能實現上傳前預覽圖片 ...

上一篇：HTML5里autofocus自動聚焦屬性使用介紹

下一篇：Html5上傳圖片移動端、PC端通用代碼