摘要：二編輯合成照片使用編輯壓縮重設尺寸比例轉成輸出預覽。三保存并上傳照片提交數據到服務器需要服務器支持我跳過了。數據主要來自拍攝的照片，多用于移動端開發，端也會用到，此插件兼容主流瀏覽器，以下不支持。

關于前端上傳文件全面基礎掃盲貼(零)
關于前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest
關于前端上傳文件全面基礎掃盲貼(二) ----- File
關于前端上傳文件全面基礎掃盲貼(三) ----- FormData
關于前端上傳文件全面基礎掃盲貼(四) ----- FileReader
關于前端上傳文件全面基礎掃盲貼(五) ----- H5拖拽事件
關于前端上傳文件全面基礎掃盲貼(六) ----- 圖片上傳,旋轉,重繪,預覽等實戰(附DEMO)

距離我上次寫的系列文章好像都過了半年了,廢話不多說,先來展示一下技術思路

一、獲取用戶照片數據

獲取用戶攝像頭圖片,不是所有手機支持,并且部分手機會有旋轉角度的問題；

Input控件獲取照片文件。

二、編輯合成照片

使用canvas編輯壓縮,重設尺寸比例；

轉成base64輸出預覽。

三、保存并上傳照片
提交base64數據到服務器需要服務器支持,我跳過了。

因為一般手機像素都很高,所以把原始圖片尺寸限制在300里;

  
    
    
    
    
    
    
    
    
    
    
    
  

  
    

      
      

      
原始圖片
      

      
修改圖片
      
    

    
  

想要上傳圖片,就要用type="file"獲得文件信息,其中下面幾個重要屬性,（在pc瀏覽器打開文件要很久,所以可以選擇性屏蔽）

通過監聽input變化觸發方法

window.onload = function () {
  var dom = document.getElementById("file");
  dom.addEventListener("change", function (e) {});
}

Exif.js 提供了 JavaScript 讀取圖像的原始數據的功能擴展，例如：拍照方向、相機設備型號、拍攝時間、ISO 感光度、GPS 地理位置等數據。
EXIF 數據主要來自拍攝的照片，多用于移動端開發，PC 端也會用到，此插件兼容主流瀏覽器，IE10 以下不支持。

為了不讓用戶等待太久,我們可以在一系列操作之前先展示獲取的圖片,可以直接從本地先讀取出原始數據,然后在頁面上展示出來,下面用到的知識點之前已經寫過就不再重復了,可以前往瀏覽文章
關于前端上傳文件全面基礎掃盲貼(二) ----- File
關于前端上傳文件全面基礎掃盲貼(四) ----- FileReader

var file = e.target.files[0],
  //旋轉角度
  orientation = null,
  fReader = new FileReader();

//限制大小格式
if (!filtration(file)) {
  return false;
}

上面的filtration(file)是我抽離出去的過濾函數

filtration: function(file, extend) {
  var extend = extend || {},
    settings = {
      size: extend.size || 5 * 1024 * 1024,
      reg: extend.reg || /image/w+/
    };

  if (file.size > settings.size || !settings.reg.test(file.type)) {
    alert(extend.msg || ("上傳格式非圖片類型或上傳圖片超過" + settings.size / 1024 / 1024 + "M"))
    return false;
  }
  return true;
},

接下來要獲取圖片信息了,解決部分手機會有旋轉角度的問題的前提（可能鏈接格式問題,生成文章之后沒帶鏈接,只能自己復制粘貼訪問地址了）
中文文檔: http://code.ciaoca.com/javasc...
Demo: http://code.ciaoca.com/javasc...

EXIF.getData(file, function () {
  orientation = EXIF.getTag(this, "Orientation");
  console.log("旋轉角度: ", orientation);
});

我們已經拿到原始數據,result屬性中將包含一個data: URL格式的字符串以表示所讀取文件的內容.然后新建img對象加載資源

//轉碼完成
fReader.onload = function (e) {
  //加載圖片
  var img = new Image();
  img.src = e.target.result;
  img.onload = function () { }
}

//執行
fReader.readAsDataURL(file);

接著我們使用canvas畫布重新設定尺寸重繪達到壓縮的功能,我只用到基礎使用方法,詳情(Canvas API)

var canvas = document.createElement("canvas"),
  ctx = canvas.getContext("2d"),
  nSize = resetSize(this, 300, 300, 1, 600);

canvas.width = nSize.width;
canvas.height = nSize.height;
ctx.drawImage(this, 0, 0, nSize.width, nSize.height);

上面的resetSize是我自定義的一個方法,可以設置高寬比例最大范圍值,可能有點繁瑣,因為我想控制的功能比較多,中間容易發生沖突,我暫時是后面設置能覆蓋前面設置(注意:這里的this是上文的data: URL格式)

resetSize: function(img, width, height, ratio, max) {
  var w = img.naturalWidth,
    h = img.naturalHeight,
    width = width || w,
    height = height || h;

  console.log("圖片寬高: ", w, h, "入參: ", width, height, ratio, max);

  if (w != width) w = width;
  if (h != height) h = height;
  if (ratio && w / h != ratio) w = h * ratio;

  //限制最大值范圍
  if (max) {
    if (w > max && w >= h) {
      h = Math.ceil(h * max / w);
      w = max;
    } else if (h > max && h >= w) {
      w = Math.ceil(w * max / h);
      h = max;
    }
  }
  console.log("重設寬高: ", w, h);
  return { width: w, height: h }
},

接下來就是比較復雜的圖形操作了,只要掌握了中心點位置就還好理解,詳情(HTML 5 Canvas 參考手冊)
上面拿到的orientation不是真的旋轉角度,只是給一個值代表拍攝方向,
最后返回新圖片展示的 data URI,這里水比較深,我測試了jpg和png是沒問題,但是gif什么的就輸出一個靜態圖,詳情(toDataURL)

var canvas = document.createElement("canvas"),
  ctx = canvas.getContext("2d"),
  nSize = picProcess.resetSize(this, 600, 400);

switch (+ orientation) {
  case 3:
    canvas.width = nSize.width;
    canvas.height = nSize.height;
    ctx.rotate(180 * Math.PI / 180);
    ctx.drawImage(this, -nSize.width, -nSize.height, nSize.width, nSize.height);
    break;
  case 6:
    canvas.width = nSize.height;
    canvas.height = nSize.width;
    ctx.rotate(90 * Math.PI / 180);
    ctx.drawImage(this, 0, -nSize.height, nSize.width, nSize.height);
    break;
  case 8:
    canvas.width = nSize.height;
    canvas.height = nSize.width;
    ctx.rotate(270 * Math.PI / 180);
    ctx.drawImage(this, -nSize.width, 0, nSize.width, nSize.height);
    break;
  default:
    canvas.width = nSize.width;
    canvas.height = nSize.height;
    ctx.drawImage(this, 0, 0, nSize.width, nSize.height);
    break;
}

return canvas.toDataURL(file.type, 0.8);

現在回看上面,我們已經實現了獲取圖片,重繪圖片,讀取本地圖片,剩下就是預覽了,我簡單實現一個支持id和class的方法,也能判斷出img和div智能設置展示方式

preview: function(selector, url) {
  var isId = /^#w+/ig.test(selector),
    isClass = /^.w+/ig.test(selector),
    name = selector.slice(1),
    dom = null;

  //選擇器類型
  if (isId) {
    dom = document.getElementById(name);
  } else if (isClass) {
    dom = document.getElementsByClassName(name)[0];
  } else {
    alert("選擇器傳參不支持!");
    return false;
  }

  //判斷類型
  if (dom.nodeName == "IMG") {
    dom.src = url;
  } else {
    dom.style.backgroundImage = "url(" + url + ")";
  };
}

然后我們在監聽方法里調用就好了.為了更加直觀的看到代碼效果,我簡單寫了一個demo版本,可以直接下載本地運行,不依賴任何環境實戰Demo

大家且看且珍惜吧,我可能后續還會研究手勢旋轉處理之類更加復雜的東西,但也說不好,畢竟還是太懶散了.
循例還是得加上一句,因為都沒有很深入測試過,所以肯定會有些隱藏的問題,歡迎大家指出最好還有答案咯