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

我在尝试使用Firefox时遇到了一些问题。我希望能够做到这一点：

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

但我知道这不会发生

现在我意识到我可以用基于SVG的过滤器做一些有趣的事情，但是我需要能够流畅地控制灰度过滤器的百分比。具体来说，当你向下滚动时，我的页面背景会变得更加饱和

这通常很简单，因为我可以嵌入一个SVG，或者在上面覆盖一个灰度副本，但我实际使用的是a作为背景。现在，我可以在画布上应用一个自定义过滤器，但它将使用每秒更新多次

目前，我最接近的是：

$(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")');

css（'filter'，'url（“数据：image/svg+xml；utf8，#grayscale”）； 但这段代码使我的画布在滚动时不断刷新，使我甚至看不到我的背景

---

那么，我到底怎样才能让灰度与Firefox协同工作呢？我对任何事情都持开放态度，不管它有多黑。

你为什么要在

上应用它？只需使用带有背景图像的容器，并在其中的画布上应用rainyday.js

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

编辑 也许在这种情况下，你必须全力以赴地使用js。在上，您可以找到一个简单的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);
}

var imgObj=document.getElementById（'background'）；
灰色函数（imgObj）{
var canvas=document.createElement（'canvas'）；
var canvasContext=canvas.getContext（'2d'）；
var imgW=imgObj.宽度；
var imgH=imgObj.高度；
canvas.width=imgW；
canvas.height=imgH；
drawImage（imgObj，0,0）；
var imgPixels=canvasContext.getImageData（0,0，imgW，imgH）；
对于（变量y=0；y

---

只是假设，我还没有测试它。

那么我该如何制作那个容器的灰度？好吧，好像我什么都没说……它不起作用，因为rainyday.js克服了它下面的任何问题。