时间戳

首页 > 解决方案 > 更改图像原型

javascript - 更改图像原型

问题描述

一张图片如何增强setAttribute？我确实尝试了几件事，但很快就遇到了问题。

  var originalSetAttribute = Image.prototype.setAttribute;

  Image.prototype.setAttribute = function (key, value) {
    console.log('set attribute', key, ' -> ', value);

    var val = (key === 'src') ? getCorrectSrc(value) : value;

    // first attempt
    originalSetAttribute(key, val);
    // second attempt
    Image.prototype.__proto__.setAttribute(key, val);
  };

我得到Uncaught TypeError: Illegal invocation。

JSFiddle

请不要发表“这是不好的做法”的评论，有时在生活中，您别无选择，只能在最糟糕的情况下破解自己的道路，因为您工作的特定 IT 领域一团糟并且充满了奇怪的标准.

另外，我会把这个逻辑放到 iframe 中，这样就不会弄乱顶部窗口的 Image。

目标：

第三方库使用以下 API 添加图像：

var img = new Image; 
img.src = '..'; 
img.setAttribute('src', '..');

src值被内联到他们的代码中，但我需要使用其他src值。与解析他们的 JS 文件并进行昂贵而复杂的字符串搜索和替换相比，破解 Image 要容易得多。

如果您也可以帮助我使用图像src设置器，则加分。谢谢！

标签： javascript

解决方案

您需要使用您的修补程序调用.call的原始setAttribute函数：thissetAttribute

return originalSetAttribute.call(this, key, val);

要修补 setter（和 getter）：

const { get, set } = Object.getOwnPropertyDescriptor(Image.prototype, 'src');
Object.defineProperty(Image.prototype, 'src', {
  set(newVal) {
    return set.call(this, getCorrectSrc(newVal));
  },
  get() {
    return get.call(this);
  }
});

推荐阅读