最近在移動(dòng)端設(shè)計(jì)頭像上傳功能時(shí)，原本是以<input type="file">直接通過(guò)formData上傳，然而實(shí)際使用情況是：對(duì)于過(guò)大的圖片（高像素手機(jī)所拍攝的照片等）上傳時(shí)間過(guò)長(zhǎng)會(huì)導(dǎo)致上傳失敗，而每次都上傳原始大小的圖片（后臺(tái)處理壓縮）十分影響用戶(hù)體驗(yàn)，所以研究了一下通過(guò)canvas壓縮圖片并上傳的方法，以下是整理的一些思路和心得：
JavaScript Code復(fù)制內(nèi)容到剪貼板
- var result = document.getElementById("/* 出錯(cuò)信息顯示塊 */");
- var input = document.getElementById("/* 上傳文件標(biāo)簽 */");
-
- if(typeof FileReader === 'undefined'){
- result.innerHTML = "<p class='warn'>抱歉，你的瀏覽器不支持 FileReader</p>";
- input.setAttribute('disabled','disabled');
- }else{
- input.addEventListener('change',readFile,false);
- }
-
- function readFile(){
- var file = this.files[0];
- if(!/image\/\w+/.test(file.type)){
- alert("請(qǐng)確保文件為圖像類(lèi)型");
- return false;
- }
- var reader = new FileReader();
- reader.readAsDataURL(file);
- reader.onload = function(e){
-
- }
- }
JavaScript Code復(fù)制內(nèi)容到剪貼板
- var c=document.getElementById("/* canvas標(biāo)簽的id */");
- var cxt=c.getContext("2d");
- var img=new Image();
- img.src=;
- var width = img.width;
- var height = img.height;
- dic = height / width;
- c.width = 200;
- c.height = 200 * dic;
- cxt.clearRect(0,0,200,200*dic);
- cxt.drawImage(img,0,0,200,200*dic);
- var finalURL = c.toDataURL();
-
2、canvas中的drawImage()方法具備圖像剪裁功能，但將圖像拉伸和剪裁同時(shí)寫(xiě)入的話(huà)，會(huì)優(yōu)先執(zhí)行剪裁的方法；
