色を変更する画像が、キャンバス

Question

で後ろに画像を変更しないでください、私はこのようなキャンバスで2イメージがあります。

をあなたは、これはそれのよう表示されますキャンバスに2画像透明 で見ることができますこの

私は「カー」だけでそれを行うために.How色を変更したいですか？

私は色を変更するdataImageを使用していたが、それはあまりにも

私のコードビハインドの画像を変更します。

context.drawImage(imageObj,this.top,this.left,this.width,this.height); 

var imgData=context.getImageData(this.top, this.left, this.width, this.height); 
    dataImg=imgData.data; 
    for (var i=0;i<dataImg.length;i+=4) 
    { 
     dataImg[i]= hexToRgb(this.color).r |dataImg[i+2]; 
     dataImg[i+1]=hexToRgb(this.color).g |dataImg[i+2]; 
     dataImg[i+2]=hexToRgb(this.color).b|dataImg[i+2]; 
     dataImg[i+3]= 255; 
    } 
    context.putImageData(imgData,this.top, this.left); 

私にいくつかの解決策を提示してください。 TY

Answer 1

は、次の2枚の画像

context.drawImage(imageObj,this.top,this.left,this.width,this.height); 

ない後

を構成する前に、画像の色を変更する必要があります。ような何か：

//背景

context.drawImage(img1, 0, 0); 

//、あなたが希望の色の塗りつぶしを作成し、あなたの画像をマスクとして使用し、バックグラウンドに

context.clearRect(this.top,this.left,this.width,this.height)); 
context.fillStyle = "#FF0000"; 
context.fillRect(this.top,this.left,this.width,this.height)); 
context.globalCompositeOperation = 'destination-atop'; 
context.drawImage(img2, 0, 0);