基于百分比的灰度画布（在 FireFox 中）

Question

我在尝试让灰度与 Firefox 一起工作时遇到了一些麻烦。我希望能够做到这一点：

$(element).css('filter', 'grayscale(' + val + '%)');

但我知道这不会发生

现在我知道我可以使用基于 SVG 的滤镜做一些花哨的事情，但我需要能够流畅地控制灰度滤镜的百分比。具体来说，当您向下滚动时，我将让页面的背景变得更加饱和。

现在这通常很简单，因为我可以嵌入 SVG 或在顶部覆盖图像的灰度副本，但我实际上使用 作为背景。现在从那里我可以将自定义过滤器应用到画布上，但它每秒会使用rainyday.js 更新多次。

目前，我最接近的是：

$(element).css('filter', 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'' + (100 - val) + '\'/></filter></svg>#grayscale")');

但是该代码使我的画布在滚动时不断刷新，使我什至看不到我的背景。

那么我到底怎样才能让灰度与 Firefox 一起工作呢？我对任何事情都持开放态度，无论它多么老套。

Answer 1

你为什么要在<canvas> 上应用它？只需使用带有背景图像的容器，然后在其中的画布上应用 rainyday.js。

这样你就不会再关心画布的更新了。

编辑

也许这就是你必须完全使用 js 的情况。在this link 上，您可以找到一种简单的 js 方法来使用 js（第二点）对图像进行灰度化。

我建议您将该输出保存到一个变量中，并将其作为 src 放在 rainyday.js run() 函数中。

类似

var imgObj = document.getElementById('background');

function gray(imgObj) {
    var canvas = document.createElement('canvas');
    var canvasContext = canvas.getContext('2d');

    var imgW = imgObj.width;
    var imgH = imgObj.height;
    canvas.width = imgW;
    canvas.height = imgH;

    canvasContext.drawImage(imgObj, 0, 0);
    var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);

    for(var y = 0; y < imgPixels.height; y++){
        for(var x = 0; x < imgPixels.width; x++){
            var i = (y * 4) * imgPixels.width + x * 4;
            var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
            imgPixels.data[i] = avg; 
            imgPixels.data[i + 1] = avg; 
            imgPixels.data[i + 2] = avg;
        }
    }
    canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
    return canvas.toDataURL();
}
imgObj.src = gray(imgObj);


function run() {
    var image = document.getElementById('background');
    image.onload = function() {
        var engine = new RainyDay({
            image: this
        });
        engine.rain([ [1, 2, 8000] ]);
        engine.rain([ [3, 3, 0.88], [5, 5, 0.9], [6, 2, 1] ], 100);
    };
    image.crossOrigin = 'anonymous';
    image.src = gray(imgObj);
}

只是假设，我没有测试过。