javascript - 覆盖 CanvasRenderingContext2D.getImageData()

Question

我正在尝试覆盖内置方法 CanvasRenderingContext2D.getImageData()。我想重写实现，以便修改后的函数使用 Canvas 上下文修改 Canvas ，然后调用原始函数，如果函数未被重写，该函数应返回不同的数据。我这样做的原因是为了防止浏览器指纹识别。

Canvas .js

(function(){
    'use strict';

    var originalGetImageData = CanvasRenderingContext2D.prototype.getImageData;

    // This function just adds 1 to each RGBA component in the array for testing.
    // Will add random values for the real thing.
    function randomiseImageData(image) {        
        var imageData = image.data;

        var imageLength = imageData.length;

        for (var i = 0; i < imageLength; i++) {
            imageData[i] += 1;
        }

        var modifiedImage = new ImageData(image.width, image.height);

        return modifiedImage;
    }

    CanvasRenderingContext2D.prototype.getImageData = function(sx, sy, sw, sh) {
        console.log("[ALERT] " + window.location.hostname + " called CanvasRenderingContext2D.getImageData()");

        const origin = window.location.hostname;

        Math.seedrandom(origin);

        var image = originalGetImageData.call(this, sx, sy, sw, sh);

        return randomiseImageData(image);
    };
})();

Answer 1

您正在返回一个新的空 ImageData 对象。

我猜你想要的是返回填充的那个。
由于您已经修改了 data 数组，您只需返回原始 ImageData，您的修改就会完成。

// shortened version
(function(){
 const ori = CanvasRenderingContext2D.prototype.getImageData;
 CanvasRenderingContext2D.prototype.getImageData = function(){
  let imageData = ori.apply(this, arguments);
  // modify the Uint8Array
  imageData.data.forEach((v, i, a) => a[i]+=1);
  // return the now modified ImageData
  return imageData;
  };
 })()
 
var ctx = document.createElement('canvas').getContext('2d');
console.log(ctx.getImageData(0,0,1,1));

如果你真的想创建一个新的ImageData，那就是

new ImageData(imageData, image.width, image.height);
//             ^^
//           pass the data to fill the new ImageData object

但请注意，浏览器支持不是很好，这样做您不会有任何收获。