钩子画布的toDataURL

Question

编辑i应该更具体(感谢雷达下面的响应！)我希望console.log的触发器在对象调用toDataURL时捕获返回的URI。在链接的jsfiddle中，调用toDataURL的对象是canvas。这可能是一个症结所在，因为我可能也需要捕获调用对象？我可以通过简单地将canvas.toDataURL()封装在console.log语句中来实现我想要的结果，但是我希望这比它更动态--这让我想到在toDataURL上添加一个钩子。

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

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

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

jsFiddle，hook on alert，hook on document.createElement()

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

参考资料

• 用函数原型连接document.createElement
• 需要连接到javascript函数调用，有什么方法可以做到吗？
• 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()