拦截 Javascript HTMLImageElement 构造函数

Question

我尝试拦截 HTMLImageElement 的 Image() 构造函数：

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(…)

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

我错过了什么？

Answer 1

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

前言： 覆盖 Image 不会拦截 HTML 解析器或 document.createElement 调用创建的 img 元素。据我所知，这是不可能的跨浏览器。您可以做的是在通过 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);

拦截 Javascript HTMLImageElement 构造函数

Intercept Javascript HTMLImageElement constructor

html

javascript

dom

image

intercept