javascript - 拦截Javascript HTMLImageElement构造函数

我尝试拦截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，则结果相同。

我想念什么？

最佳答案

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

关于javascript - 拦截Javascript HTMLImageElement构造函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40962263/