挂钩 canvas 的 toDataURL

Question

[编辑] 我应该更具体一些（感谢雷达下的回复！）。我希望 console.log 的触发器在对象调用 toDataURL 时捕获返回的 URI。在链接的jsfiddle中，调用toDataURL的对象是canvas。这可能是症结所在，因为我可能还需要捕获调用对象？我可以通过简单地将 canvas.toDataURL() 封装在 console.log 语句中来完成我想要的，但我希望它比那个更动态——这让我想到在 [= 上添加一个钩子11=]

jsFiddle，更新：https://jsfiddle.net/spe4q1d8/170/

我正在尝试创建一个挂钩，我可以将其放在 JavaScript 文件的顶部或底部，它会在每次调用特定函数时触发 console.log。我想要挂钩的特定函数是 toDataURL() HTMLCanvasElement.toDataURL()。

我已经能够在 alert 或 console.log 本身上设置一个挂钩，但不知道如何挂钩 toDataURL。

jsFiddle，挂钩 alert 并挂钩 document.createElement()

https://jsfiddle.net/spe4q1d8/142/

参考资料

Hooking document.createElement using function prototype
Need to hook into a javascript function call, any way to do this?
https://blog.pengoworks.com/index.cfm/2012/1/12/Adding-custom-callbacks-to-existing-JavaScript-functions

Answer 1

您可以扩展原型函数，例如：

var toDataURL = HTMLCanvasElement.prototype.toDataURL;
HTMLCanvasElement.prototype.toDataURL = function(type, encoderOptions) {
  var uri = toDataURL.call(this, type, encoderOptions);
  console.log(uri);
  return uri;
}

var canvas = document.createElement('canvas');
canvas.toDataURL()

挂钩 canvas 的 toDataURL

Hook canvas's toDataURL

javascript

hook

canvas

todataurl