Question

我在尝试让Grayscale使用Firefox时遇到了一些麻烦。我很想能够做到这一点：

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

但我知道这不会发生

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

现在这通常很简单，因为我可以在顶部嵌入SVG或覆盖我的图像的灰度副本，但我实际上正在使用＆lt; canvas＆gt;作为背景。现在，我可以在画布上应用自定义过滤器，但使用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")');

但是这段代码使我的画布在滚动时不断刷新，因此我甚至无法看到我的背景。

那么我怎样才能让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);
}

假设，我还没有测试过。

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

1 个答案:

修改