使用kineticjs改变图像对象的颜色

Question

我正在尝试使用kineticjs将图像转换为另一种颜色，实际上我的图像将位于图层上，而png只能更改图像对象的颜色？任何帮助都会非常好的

Answer 1

您可以使用合成将新颜色替换为非透明像素。

特别是source-atop合成将用您绘制的任何颜色替换所有现有的非透明像素。

KineticJS目前不提供开箱即用的合成，但您可以轻松使用html5 Canvas元素进行合成，然后将该元素用作Kinetic.Image元素的图像源。

这是示例代码和演示：

var stage = new Kinetic.Stage({
  container: 'container',
  width: 350,
  height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);

var canvas=document.createElement('canvas');
var ctx=canvas.getContext('2d');
var kImage;

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/flower.png";
function start(){

  cw=canvas.width=img.width;
  ch=canvas.height=img.height;
  ctx.drawImage(img,0,0);

  kImage=new Kinetic.Image({
    image:canvas,
    width:img.width,
    height:img.height,
    draggable:true,
  });
  layer.add(kImage);
  layer.draw();

  document.getElementById('makeGreen').onclick=function(){
    ctx.globalCompositeOperation='source-atop';
    ctx.fillStyle='lightgreen';
    ctx.fillRect(0,0,cw,ch);
    layer.draw();
  };

  document.getElementById('makeOriginal').onclick=function(){
    ctx.globalCompositeOperation='source-over';
    ctx.drawImage(img,0,0);
    layer.draw();
  };

}

body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>
<button id=makeGreen>Green</button>
<button id=makeOriginal>Original</button>
<div id="container"></div>