将灰度转换为Pastel-Java 学习之路

我有许多不同的灰色（从黑到白），我想将其转换为随机的柔和色彩，其中每种粉彩都具有与灰色相同的亮度 . 因此，深灰色应该转换为任何随机的深色柔和色 .

我发现了一种生成随机柔和色彩的方法（Algorithm to randomly generate an aesthetically-pleasing color palette），但我不知道如何将灰色转换为具有相同亮度的柔和色彩 .

有人知道如何解决这个问题吗？

非常感谢！

1 回答

您可以在两种颜色之间进行线性插入，对应于灰度值为零的“黑色”颜色和对应于灰度值255的“白色”颜色 .

您描述的效果会将您的粉笔用作“黑色”，白色用作“白色” . 当涉及不同的色调时，RGB空间中的颜色插值是棘手的，但在您的情况下，两种颜色具有相同或相似的色调，应该没有问题 . （通过在白色和随机颜色之间进行插值，您获得柔和色彩的原始代码可能会使用相同的机制 . ）

这是一个根据数据的红色值将灰度图像数据转换为柔和颜色方案的示例 . （灰色有三个相同的颜色组件，但没有努力确保 . ）

function pastel(idata, black, white) {
    var data = idata.data;
    var n = 0;

    for (var y = 0; y < idata.height; y++) {
        for (var x = 0; x < idata.width; x++) {
            var grey = data[n] / 255.0;
            var yerg = 1.0 - grey;

            data[n++] = (yerg * black.r + grey * white.r) | 0;
            data[n++] = (yerg * black.g + grey * white.g) | 0;
            data[n++] = (yerg * black.b + grey * white.b) | 0;
            n++;
        }
    }        
}

Edit ：这是一个完整的网页，用于复制和粘贴的乐趣 . 您必须在同一目录中具有图像文件 "pic.png" . 颜色是具有 r ， g 和 b 字段的Javascript对象 .

图像数据来自画布，图像被绘制到画布上 . 图像数据包含 rgba 格式的像素;它可以被操纵，然后放回到画布上 . （循环中的额外 n++ 跳过alpha值并保持不变 . ）

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8" />
<title>Colour Interpolation</title>
<script type="text/javascript">

    function pastel(idata, black, white) {
        var data = idata.data;
        var n = 0;

        for (var y = 0; y < idata.height; y++) {
            for (var x = 0; x < idata.width; x++) {
                var grey = data[n] / 255.0;
                var yerg = 1.0 - grey;

                data[n++] = (yerg * black.r + grey * white.r) | 0;
                data[n++] = (yerg * black.g + grey * white.g) | 0;
                data[n++] = (yerg * black.b + grey * white.b) | 0;
                n++;
            }
        }        
    }

    window.onload = function() {
        var cv = document.getElementById("map");
        var cx = cv.getContext("2d");

        var img = document.createElement('img');

        img.src = "pic.png";
        img.onload = function(e) {
            var img = this;
            img.width = img.naturalWidth;
            img.height = img.naturalHeight;

            cv.width = img.width ;
            cv.height = img.height;

            cx.drawImage(img, 0, 0);

            var idata = cx.getImageData(0, 0, img.width, img.height);

            pastel(idata,
                {r: 102, g: 51, b: 0},
                {r: 255, g: 255, b: 204});
            cx.putImageData(idata, 0, 0);
        };

    }

</script>
</head>

<body>
<canvas id="map" width="96" height="96">Kann nix.</canvas>
</body>

</html>

回复于 2024-04-26T23:11:22+08:00

将灰度转换为Pastel

1 回答

相关问题