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

前言

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

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

　　在網上衝浪了一會兒，發現完整的文章甚少，還是浪花太大矇住了我的眼睛

需求

　　我想要知道圖片原始尺寸，（而不是通過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式總結

　　親測實例是可以獲取到圖片的原始大小的

　　可能格式不太對，因爲是有刪除其他的數據。

　　有時間再整理一下