前端如何獲取原始圖片大小

前言

　　日常咱們不太會關注圖片流，都是拿來主義。

　　瀏覽器加載，圖片顯示在一個容器裏面，展現給用戶。

　　在網上衝浪了一下子，發現完整的文章甚少，仍是浪花太大矇住了個人眼睛

需求

　　我想要知道圖片原始尺寸，（而不是經過css設置 圖片百分比顯示 這是另一種狀況）

　　我須要把圖片的原始尺寸保存起來。須要在上傳本地圖片的時候咱們會接觸到圖片的原始尺寸大小

正文

　　首先了解 new Image() 建立一個圖片示例
　　Image是一個瀏覽器的原生構造函數，返回一個HTMLImageElement對象的實例，即<img>標籤的實例。

var myImage = new Image(100, 100);
myImage.src = 'demo.jpg';
document.body.appendChild(myImage);

　這段代碼至關於，在body中新增了（比較經常使用）

<img width="100" height="100" src="demo.jpg">

是時候展現他真正的技術了

 

 Image 屬性（我實在是太懶了，直接從MDN 截圖下來）

 

 

 

 

 

　　 屬性是有一大堆的，不可能一個一個的使用演示。

　　 迴歸正題，獲取原始圖片大小，主要用如下屬性

1. width
2. height
3. complete
4. onerror
5. onload
6. src
7. crossorign

實例

　　用代碼效果來講話，學以至用

　　

//獲取原始圖片大小，用圖片流
    handleChangeUIImg(val){
      var that = this
      var imgReady = (function () {
      var list = [], intervalId = null,
      // 用來執行隊列
      tick = function () {
        for (var i = 0; i < list.length; i++) {

      　　list[i].end ? list.splice(i--, 1) : list[i]();
        };
        !list.length && stop();
      },
      // 中止全部定時器隊列
      stop = function () {
        clearInterval(intervalId);
        intervalId = null;
      };
      return function (url, ready, load, error) {
        var onready, width, height, newWidth, newHeight,
        img = new Image();
        img.crossOrigin = ''    //!容許圖片跨域，很關鍵
        img.src = url;
        // 若是圖片被緩存，則直接返回緩存數據
        if (img.complete) {
          ready.call(img);
          load && load.call(img);
          return;
        };
        width = img.width;
        height = img.height;
        // 加載錯誤後的事件
        img.onerror = function () {
          error && error.call(img);
          onready.end = true;
          img = img.onload = img.onerror = null;
        };
        // 圖片尺寸就緒
        onready = function () {
          newWidth = img.width;
          newHeight = img.height;
          if (newWidth !== width || newHeight !== height ||newWidth * newHeight > 1024) {
          // 若是圖片已經在其餘地方加載可以使用面積檢測
            ready.call(img);
            onready.end = true;
          };
          if(newWidth !== 0 && newHeight !== 0){
            that.getImageColor(img)
          }
        };
        onready();
        // 徹底加載完畢的事件
        img.onload = function () {
          // onload在定時器時間差範圍內可能比onready快
          // 這裏進行檢查並保證onready優先執行
          !onready.end && onready();
          load && load.call(img);
          // IE gif動畫會循環執行onload，置空onload便可
          img = img.onload = img.onerror = null;
        };
        // 加入隊列中按期執行
        if (!onready.end) {
          list.push(onready);
          // 不管什麼時候只容許出現一個定時器，減小瀏覽器性能損耗
          if (intervalId === null) intervalId = setInterval(tick, 40);
        };
      };
    })();

 

Fannie式總結

　　親測實例是能夠獲取到圖片的原始大小的

　　可能格式不太對，由於是有刪除其餘的數據。

　　有時間再整理一下