将画布颜色限制为特定数组

Question

将画布颜色限制为特定数组

Dav*_*ing 2 javascript rgb canvas colors

如何将画布图像的RGB色彩空间限制为特定的颜色数组？F.ex:

var colors = ['#aaffee','#cc44cc','#00cc55','#0000aa'];
var rgb = [230,111,90];

// match rgb with the colors and return the closest match

Run Code Online (Sandbox Code Playgroud)

当我遍历画布图像数据中的像素时,我需要从该数组获得最接近的匹配.是否有一个聪明的功能可以做到这一点？

Answer 1

mar*_*rkE 9

如何将颜色限制为特定的调色板

您必须将每个原始像素映射到最近的调色板颜色.

为此,您实际上计算了色轮上原始颜色和调色板颜色之间的距离.

这是一个例子.原始像素(橙色)在指定的调色板中有每种颜色的箭头(假设我们的调色板有3种指定颜色:红色,绿色,蓝色).

具有最短箭头长度的调色板颜色代替原始像素.

由于橙红色箭头最短,调色板红色将代替原始橙色.

在此输入图像描述

这是将原始颜色映射到调色板颜色的重要功能:

    // use Euclidian distance to find closest color
    // send in the rgb of the pixel to be substituted
    function mapColorToPalette(red,green,blue){
        var color,diffR,diffG,diffB,diffDistance,mappedColor;
        var distance=25000;
        for(var i=0;i<palette.length;i++){
            color=palette[i];
            diffR=( color.r - red );
            diffG=( color.g - green );
            diffB=( color.b - blue );
            diffDistance = diffR*diffR + diffG*diffG + diffB*diffB;
            if( diffDistance < distance  ){ 
                distance=diffDistance; 
                mappedColor=palette[i]; 
            };
        }
        return(mappedColor);
    }

Run Code Online (Sandbox Code Playgroud)

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

注意:您可以使用哈希表,树搜索等来改进此代码.

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:15px; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvasOriginal=document.getElementById("OriginalCanvas");
    var ctx=canvasOriginal.getContext("2d");
    var canvasMapped=document.getElementById("MappedCanvas");
    var ctxMapped=canvasMapped.getContext("2d");

    // draw some off-colored rectangles
    ctx.beginPath();
    ctx.fillStyle="rgb(140,70,60)"; //red-ish
    ctx.rect(10,10,20,20);
    ctx.fill();
    ctx.beginPath();
    ctx.fillStyle="rgb(70,140,60)";  //green-ish
    ctx.rect(10,40,20,20);
    ctx.fill();
    ctx.beginPath();
    ctx.fillStyle="rgb(70,60,140)";  //blue-ish
    ctx.rect(10,70,20,20);
    ctx.fill();

    // create an array of palette colors
    var palette=[{r:255,g:0,b:0},{r:0,g:255,b:0},{r:0,g:0,b:255}];

    // load all pixels into an array
    var imageData=ctx.getImageData(0,0,canvasOriginal.width,canvasOriginal.height);
    var data=imageData.data;

    // rewrite all pixels using only the mapped colors
    var mappedColor;
    for(var i=0; i<data.length; i+=4) {
      mappedColor = mapColorToPalette(data[i], data[i+1], data[i+2]);
      if(data[i+3]>10){
          data[i]   = mappedColor.r;
          data[i+1] = mappedColor.g;
          data[i+2] = mappedColor.b;
      }
    }    
    ctxMapped.putImageData(imageData,0,0);

    // use Euclidian distance to find closest color
    function mapColorToPalette(red,green,blue){
        var color,diffR,diffG,diffB,diffDistance,mappedColor;
        var distance=25000;
        for(var i=0;i<palette.length;i++){
            color=palette[i];
            diffR=( color.r - red );
            diffG=( color.g - green );
            diffB=( color.b - blue );
            diffDistance = diffR*diffR + diffG*diffG + diffB*diffB;
            if( diffDistance < distance  ){ 
                distance=diffDistance; 
                mappedColor=palette[i]; 
            };
        }
        return(mappedColor);
    }


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="OriginalCanvas" width=60 height=100></canvas>
    <canvas id="MappedCanvas" width=60 height=100></canvas>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，9 月前
查看次数：	1561 次
最近记录：	12 年，9 月前