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.

标签： javascript image-processing canvas kineticjs camanjs

1条回答

我欲成王，谁敢阻挡

2楼-- · 2020-03-31 04:47

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>

0人赞添加讨论(0) 举报

KineticJS canvas modified by CamanJS

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间