0

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

4

1 回答 1

1

是的，您可以使用 html canvas 更改图像上的选定颜色。

在此处输入图像描述在此处输入图像描述

就是这样：

您可以使用画布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>
于 2013-10-18T16:16:40.730 回答