0

我正在寻找一种方法来杀死 KineticJs 中渐变上的条带。在低对比度的黑白渐变上看起来很糟糕。感谢您的任何建议。 在此处输入图像描述

4

1 回答 1

1

您可以通过向图像添加 Perlin Noise 来扩散渐变条带

顺便说一句，这也是您在 Photoshop 中进行反条纹的一种方法。

完成带有渐变的画布后，使用低 alpha 添加一层 Perlin Noise，这样它就不会淹没原始图像。

    // generate noise 
    var noise=perlinNoise();

    // reduce the alpha
    context.globalAlpha=.35;

    // draw the noise layer over the original canvas
    context.drawImage(noise,0,0,canvas.width,canvas.height);

这是随机 Perlin 噪声层的样子：

在此处输入图像描述

这是应用了噪声层的原始图像：

在此处输入图像描述

几点注意事项：

  • 您可以根据自己的喜好调整 context.globalAlpha 和 RandomNoise(alpha) 中的 alpha。
  • 您可以创建和重复使用 1 个噪波层或每次创建一个新的噪波层。
  • 添加噪声将“软化”原始渐变。
  • 或者，您可以应用轻微的动力学模糊滤镜。
  • 如果您需要有针对性的噪声，您可以使用剪切区域 (clipFunc) 应用噪声。

这是代码和小提琴：http: //jsfiddle.net/m1erickson/p4Vaf/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Noise</title>
    <style>
    #canvas{border:1px solid red;}
    body(background-color:blue;}
    </style>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas><br>
    <canvas id="noisecanvas" width=300 height=300></canvas>
<script>

   var canvas = document.getElementById("canvas");
   var ctx = canvas.getContext('2d');
   var noiseCanvas=document.getElementById("noisecanvas");


    var img=new Image();
    img.onload=function(){
        canvas.width=img.width;
        canvas.height=img.height;
        noiseCanvas.width=img.width;
        noiseCanvas.height=img.height;
        ctx.drawImage(this,0,0,canvas.width,canvas.height);
        var noise=perlinNoise();
        ctx.globalAlpha=.35;
        ctx.drawImage(noise,0,0,canvas.width,canvas.height);
    }
    img.src="gradient.png";


    function randomNoise(alpha) {
        var x = 0;
        var y = 0;
        var width = canvas.width;
        var height = canvas.height;
        var g = noiseCanvas.getContext("2d");
        var imageData = g.getImageData(x, y, width, height);
        var random = Math.random;
        var pixels = imageData.data;
        var n = pixels.length;
        var i = 0;

        while (i < n) {
            pixels[i++] = pixels[i++] = pixels[i++] = (random() * 256) | 0;
            pixels[i++] = alpha;
        }
        g.putImageData(imageData, x, y);
        return noiseCanvas;
    }

    function perlinNoise() {
        var noise = randomNoise(45);
        var g = noiseCanvas.getContext("2d");
        g.save();

        /* Scale random iterations onto the canvas to generate Perlin noise. */
        for (var size = 4; size <= noise.width; size *= 2) {
            var x = (Math.random() * (noise.width - size)) | 0,
                y = (Math.random() * (noise.height - size)) | 0;
            g.globalAlpha = 4 / size;
            g.drawImage(noise, x, y, size, size, 0, 0, noiseCanvas.width, noiseCanvas.height);
        }

        g.restore();
        return noiseCanvas;
    }

</script>
</body>
</html>
于 2013-06-27T01:39:12.870 回答