淺談Image對象--new image

先來個簡單案例：

    <button id="btn">點擊</button>
    <script type="text/javascript">
        var btn = document.querySelector('#btn')
        btn.addEventListener('click',function(){
            var new_img = new Image(300,300)/*寬高300*/
            new_img.src = `https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/qrcode/zbios-09b6296ee6.png`
            document.body.appendChild(new_img)
        },false)
    </script>

 

主要參考阮老師的文檔：

概述

<img>元素用於插入圖片，主要繼承了 HTMLImageElement 接口。

瀏覽器提供一個原生構造函數Image，用於生成HTMLImageElement實例。

var img = new Image(); img instanceof Image // true img instanceof HTMLImageElement // true 

Image構造函數可以接受兩個整數作為參數，分別表示<img>元素的寬度和長度。

// 語法 Image(width, height) // 用法 var myImage = new Image(100, 200); 

<img>實例的src屬性可以定義圖像的網址。

var img = new Image(); img.src = 'picture.jpg'; 

新生成的<img>實例並不屬於文檔的一部分。如果想讓它顯示在文檔中，必須手動插入文檔。

var img = new Image(); img.src = 'image1.png'; document.body.appendChild(img); 

除了使用Image構造，下面的方法也可以得到HTMLImageElement實例。

• document.images的成員
• 節點選取方法（比如document.getElementById）得到的<img>節點
• document.createElement('img')生成的<img>節點

document.images[0] instanceof HTMLImageElement // true var img = document.getElementById('myImg'); img instanceof HTMLImageElement // true var img = document.createElement('img'); img instanceof HTMLImageElement // true 

HTMLImageElement實例除了具有 Node、Element、HTMLElement 接口以外，還擁有一些獨有的屬性。這個接口沒有定義自己的方法。

特性相關的屬性

（1）HTMLImageElement.src

HTMLImageElement.src屬性返回圖像的完整網址。

// HTML 代碼如下 // <img width="300" height="400" id="myImg" src="http://example.com/pic.jpg"> var img = document.getElementById('img'); img.src // http://example.com/pic.jpg 

（2）HTMLImageElement.currentSrc

HTMLImageElement.currentSrc屬性返回當前正在展示的圖像的網址。JavaScript 和 CSS 的 mediaQuery 都可能改變正在展示的圖像。

（3）HTMLImageElement.alt

HTMLImageElement.alt屬性可以讀寫<img>的 HTML 屬性alt，表示對圖片的文字說明。

（4）HTMLImageElement.isMap，HTMLImageElement.useMap

HTMLImageElement.isMap屬性對應<img>元素的 HTML 屬性ismap，返回一個布爾值，表示圖像是否為服務器端的圖像映射的一部分。

HTMLImageElement.useMap屬性對應<img>元素的 HTML 屬性usemap，表示當前圖像對應的<map>元素。

（5）HTMLImageElement.srcset，HTMLImageElement.sizes

HTMLImageElement.srcset屬性和HTMLImageElement.sizes屬性，分別用於讀寫<img>元素的srcset屬性和sizes屬性。它們用於<img>元素的響應式加載。srcset屬性可以單獨使用，但是sizes屬性必須與srcset屬性同時使用。

// HTML 代碼如下 // <img srcset="example-320w.jpg 320w, // example-480w.jpg 480w, // example-800w.jpg 800w" // sizes="(max-width: 320px) 280px, // (max-width: 480px) 440px, // 800px" // id="myImg" // src="example-800w.jpg"> var img = document.getElementById('myImg'); img.srcset // "example-320w.jpg 320w, // example-480w.jpg 480w, // example-800w.jpg 800w" img.sizes // "(max-width: 320px) 280px, // (max-width: 480px) 440px, // 800px" 

上面代碼中，sizes屬性指定，對於小於320px的屏幕，圖像的寬度為280px；對於小於480px的屏幕，圖像寬度為440px；其他情況下，圖像寬度為800px。然后，瀏覽器會根據當前屏幕下的圖像寬度，到srcset屬性加載寬度最接近的圖像。

HTMLImageElement.width，HTMLImageElement.height

width屬性表示<img>的 HTML 寬度，height屬性表示高度。這兩個屬性返回的都是整數。

// HTML 代碼如下 // <img width="300" height="400" id="myImg" src="pic.jpg"> var img = document.getElementById('img'); img.width // 300 img.height // 400 

如果圖像還沒有加載，這兩個屬性返回的都是0。

如果 HTML 代碼沒有設置width和height屬性，則它們返回的是圖像的實際寬度和高度，即HTMLImageElement.naturalWidth屬性和HTMLImageElement.naturalHeight屬性。

HTMLImageElement.naturalWidth，HTMLImageElement.naturalHeight

HTMLImageElement.naturalWidth屬性表示圖像的實際寬度（單位像素），HTMLImageElement.naturalHeight屬性表示實際高度。這兩個屬性返回的都是整數。

如果圖像還沒有指定或不可得，這兩個屬性都等於0。

var img = document.getElementById('img'); if (img.naturalHeight > img.naturalWidth) { img.classList.add('portrait'); } 

上面代碼中，如果圖片的高度大於寬度，則設為portrait模式。

HTMLImageElement.complete

HTMLImageElement.complete屬性返回一個布爾值，表示圖表是否已經加載完成。如果<img>元素沒有src屬性，也會返回true。

HTMLImageElement.crossOrigin

HTMLImageElement.crossOrigin屬性用於讀寫<img>元素的crossorigin屬性，表示跨域設置。

這個屬性有兩個可能的值。

• anonymous：跨域請求不要求用戶身份（credentials），這是默認值。
• use-credentials：跨域請求要求用戶身份。

// HTML 代碼如下 // <img crossorigin="anonymous" id="myImg" src="pic.jpg"> var img = document.getElementById('img'); img.crossOrigin // "anonymous" 

HTMLImageElement.referrerPolicy

HTMLImageElement.referrerPolicy用來讀寫<img>元素的 HTML 屬性referrerpolicy，表示請求圖像資源時，如何處理 HTTP 請求的referrer字段。

它有五個可能的值。

• no-referrer：不帶有referrer字段。
• no-referrer-when-downgrade：如果請求的地址不是 HTTPS 協議，就不帶有referrer字段，這是默認值。
• origin：referrer字段是當前網頁的地址，包含協議、域名和端口。
• origin-when-cross-origin：如果請求的地址與當前網頁是同源關系，那么referrer字段將帶有完整路徑，否則將只包含協議、域名和端口。
• unsafe-url：referrer字段包含當前網頁的地址，除了協議、域名和端口以外，還包括路徑。這個設置是不安全的，因為會泄漏路徑信息。

HTMLImageElement.x，HTMLImageElement.y

HTMLImageElement.x屬性返回圖像左上角相對於頁面左上角的橫坐標，HTMLImageElement.y屬性返回縱坐標。

事件屬性

圖像加載完成，會觸發onload屬性指定的回調函數。

// HTML 代碼為 <img src="example.jpg" onload="loadImage()"> function loadImage() { console.log('Image is loaded'); } 

圖像加載完成，會觸發onerror屬性指定的回調函數。

// HTML 代碼為 <img src="image.gif" onerror="myFunction()"> function myFunction() { console.log('There is something wrong'); }

 

 

 

 

 

.