是否可以通過編程方式更改剪貼畫顏色？

我想知道是否可以在html5畫布中更改剪貼畫顏色。我找不到任何有關它的信息，但我看到了一個能夠實現此功能的設計人員的軟件。先謝謝你！是否可以通過編程方式更改剪貼畫顏色？

2013-10-18 Elvira

是的，您可以使用html畫布更改圖像上的選定顏色。

enter image description here

方法如下：

您可以使用畫布getImageData閱讀畫布上的任何像素（S）的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-18 16:16:40 markE

謝謝您的幫助！這正是我所期待的。 – Elvira

是否可以通過編程方式更改剪貼畫顏色？

回答

相關問題