Question

我想知道是否可以在html5画布中更改剪贴画颜色。我找不到任何有关它的信息，但我看到一个设计师的软件能够实现这个功能。提前谢谢！

Answer 1

是的，您可以使用html画布更改图片上的所选颜色。

enter image description here

以下是：

您可以使用画布的getImageData来读取画布上任何像素的RGBA值：

    // get the pixel at the click position
    var imgData=ctx.getImageData(mouseX,mouseY,1,1);
    var data=imgData.data;

    // the R,G,B of the clicked color are in sequential elements of the data[] array
    var Red=data[0];
    var Green=data[1];
    var Blue=data[2];

然后要替换颜色，您可以遍历画布的整个像素阵列，并使用您选择的新颜色替换所单击的颜色：

    // test
    // replace the clicked color with Gold
    var newR=255;
    var newG=215;
    var newB=0;

    // get the pixel array for the whole canvas
    var imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
    var data=imgData.data;

    // loop through all pixels on the canvas
    for(var i=0;i<data.length;i+=4) {

      // if this pixel matches the old color, replace it
      if(data[i]==oldR && data[i+1]==oldG && data[i+2]==oldB){
          data[i]= newR;
          data[i+1]= newG;
          data[i+2]= newB;
      }

    }

最后，当你替换了所有颜色时，使用ctx.putImageData在画布上绘制修改后的像素。

    // put the recolored image back on the canvas
    ctx.putImageData(imgData,0,0);

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

<!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; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){


var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;

var img=new Image();
img.onload=function(){
    canvas.width=img.width;
    canvas.height=img.height;
    ctx.drawImage(img,0,0);
}
// make sure to use crossOrigin="anonymous" to avoid CORS errors
// the image must be hosted on a CORS enabled site
img.crossOrigin="anonymous";
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png";

// when the user clicks, change the clicked color to Gold

$("#canvas").click(function(e){
    mouseX=parseInt(e.clientX-offsetX);
    mouseY=parseInt(e.clientY-offsetY);

    // get the pixel at the click position
    var imgData=ctx.getImageData(mouseX,mouseY,1,1);
    var data=imgData.data;

    // if the clicked color is transparent, no work to do
    if(data[3]<10){return;}

    // save the R,G,B of the clicked color
    var oldR=data[0];
    var oldG=data[1];
    var oldB=data[2];

    // test
    // replace the clicked color with Gold
    var newR=255;
    var newG=215;
    var newB=0;

    // get the pixel array for the whole canvas
    var imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
    var data=imgData.data;

    // loop through all pixels on the canvas
    for(var i=0;i<data.length;i+=4) {

      // if this pixel matches the old color, replace it
      if(data[i]==oldR && data[i+1]==oldG && data[i+2]==oldB){
          data[i]= newR;
          data[i+1]= newG;
          data[i+2]= newB;
      }

    }

    // put the recolored image back on the canvas
    ctx.putImageData(imgData,0,0);

});

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

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

是否可以通过编程方式更改剪贴画颜色？

1 个答案: