インターセプトJavascriptをHTMLImageElementは、コンストラクタ

Question

私はHTMLImageElementの画像（）コンストラクタを傍受してみてください。

私は何が間違っていますか？

Answer 1

ImageとHTMLImageElementのコンストラクタは同じ関数ではありません。後者のブラウザ間を確実にオーバーライドすることはできません。

序文：はImageのオーバーライドは、HTMLパーサまたはdocument.createElement呼び出しによってimg要素の作成をインターセプトしません。私が知っている限り、それは不可能なクロスブラウザです。あなたはになります doは、ドキュメントにmutation observerで追加されたすべての画像をキャッチします。しかし、それは追加された時点で捕捉され、作成されたものではありません。

しかし：あなたは具体的には、あなたがオーバーライドするので、それを交換する前にImageの元の値を取り、それを使用したい、それはImageだと述べました。

例：ES2015では

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

、あなたのためのオプションだ場合：

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