KineticJS canvas modified by CamanJS

问题

I'm trying to apply CamanJS filter to a canvas created with KineticJS. It works:

Caman("#creator canvas", function()
{
    this.lomo().render();
});

After applying a CamanJS filter I'm trying to do sth with canvas (eg. drag and move layer or just click on it), but then the canvas reverts to its original state (before applying CamanJS filter). So the question is: how to "tell" KineticJS to update cache(?) or do sth like stage.draw() to keep new canvas data?

Here is jsfiddle (click on "apply filter", when processing will be done, try to drag the star).

BTW: why is the processing so slow?

Thanks in advance.

回答1:

As you've discovered, Kinetic will redraw the original image when it internally redraws.

Your Caman modified content is not used or saved.

To keep your Caman effect, you can create an offscreen canvas and instruct your Kinetic.Image to get its image from that offscreen canvas.

Then you can use Caman to filter that canvas.

The result is that Kinetic will do its internal redraws with your Caman modified canvas image.

Demo: http://jsfiddle.net/m1erickson/L3ACd/

Code Example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/camanjs/3.3.0/caman.full.min.js"></script>
<style>
    body{padding:20px;}
    #container{
      border:solid 1px #ccc;
      margin-top: 10px;
      width:350px;
      height:350px;
    }
</style>        
<script>
$(function(){

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

    // create an offscreen canvas
    var canvas=document.createElement("canvas");
    var ctx=canvas.getContext("2d");

    // load the star.png
    var img=new Image();
    img.onload=start;
    img.crossOrigin="anonymous";
    img.src="https://dl.dropboxusercontent.com/u/139992952/stack1/star.png";
    // when star.png is loaded...
    function start(){

        // draw the star image to the offscreen canvas
        canvas.width=img.width;
        canvas.height=img.height;
        ctx.drawImage(img,0,0);

        // create a new Kinetic.Image
        // The image source is the offscreen canvas 
        var image1 = new Kinetic.Image({
            x:10,
            y:10,
            image:canvas,
            draggable: true
        });
        layer.add(image1);
        layer.draw();

    }

    // lomo the canvas
    // then redraw the kinetic.layer to display the lomo'ed canvas 
    $("#myButton").click(function(){
        Caman(canvas, function () {
            this.lomo().render(function(){
                layer.draw();
            });
        });
    });


}); // end $(function(){});

</script>       
</head>

<body>
    <button id="myButton">Lomo the draggable Star</button>
    <div id="container"></div>
</body>
</html>

来源：https://stackoverflow.com/questions/21549832/kineticjs-canvas-modified-by-camanjs

标签

javascript

image-processing

canvas

kineticjs

camanjs