img對象，file對象，base64，canvas對象相互轉換以及圖片壓縮

先上一張圖：

 

以上圖片是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);
};

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});
};

以上7種轉換基本可以覆蓋所有類型轉換了，下面看下JS等比壓縮圖片的辦法：

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);
  });
}

 參考：

https://blog.csdn.net/twtcqw2008/article/details/80766914