攔截的Javascript HTMLImageElement構造

Question

我試圖攔截HTMLImageElement的圖像（）構造函數：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image

var origImgConstr = HTMLImageElement.prototype.constructor;             
Image = function(width, height) {                    
    console.log('image constructor!');                   
    return new origImgConstr(arguments);                   
}; 

，但我得到

Uncaught TypeError: Illegal constructor(…) 

同樣的結果，如果我有HTMLImageElement取代Image。

我錯過了什麼？

Answer 1

Image和HTMLImageElement的構造函數功能不一樣。您無法跨越可靠的跨瀏覽器的後者。

前言：重寫Image不會攔截由HTML解析器img元素或document.createElement調用的創建。據我所知，這是不可能的跨瀏覽器。你可以做的是捕獲所有圖像，因爲它們通過mutation observer添加到文檔中。但是這只是在被添加而不是創建的時候捕捉到它們。

但是：你說這是Image，具體而言，要覆蓋，因此替換它之前採取的Image原始值，並使用它。

例子：

var originalImage = Image; 
 
Image = function(width, height) { 
 
    var result; 
 
    console.log("Intercepted"); 
 
    switch (arguments.length) { 
 
     case 0: 
 
     result = new originalImage(); 
 
     break; 
 
     case 1: 
 
     result = new originalImage(width); 
 
     break; 
 
     default: 
 
     result = new originalImage(width, height); 
 
     break; 
 
    } 
 
    return result; 
 
}; 
 

 
var img = new Image(); 
 
img.src = "https://i.stack.imgur.com/rQIK0.jpg?s=64&g=1"; 
 
document.body.appendChild(img); 
 
img = new Image(32, 20); 
 
img.src = "https://i.stack.imgur.com/rQIK0.jpg?s=64&g=1"; 
 
document.body.appendChild(img);

在ES2015，如果這是一個選擇：

const originalImage = Image; 
 
Image = function(...args) { 
 
    console.log("Intercepted"); 
 
    return new originalImage(...args); 
 
}; 
 

 
let img = new Image(); 
 
img.src = "https://i.stack.imgur.com/rQIK0.jpg?s=64&g=1"; 
 
document.body.appendChild(img); 
 
img = new Image(32, 20); 
 
img.src = "https://i.stack.imgur.com/rQIK0.jpg?s=64&g=1"; 
 
document.body.appendChild(img);