拦截Javascript HTMLImageElement构造函数

Question

我尝试拦截HTMLImageElement的Image（）构造函数：

https://developer.mozilla.org/zh-CN/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(…)

如果将Image替换为HTMLImageElement则结果相同。

我想念什么？

Answer 1

Image和HTMLImageElement的构造函数不是同一函数。 您不能可靠地覆盖后者的跨浏览器。

前言：覆盖Image将不会拦截HTML解析器或document.createElement调用创建的img元素。 据我所知，这是不可能的跨浏览器。 您可以做的是捕获所有通过变异观察器添加到文档中的图像。 但这只是在添加而不是创建它们时才抓住它们。

但是：您已经说过它是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);