Search code examples
jqueryimagekineticjslenses

Jquery Image Lens - Kinetic JS image id

I am trying to use jquery image lens on Kinetic JS canvas http://jsfiddle.net/user373721/7f8qM/15/. The challenge I have is how to find the id of the image in the canvas, I tried:

  myImage.onload = function () {
            var yoda = new Kinetic.Image({
                x: 0,
                y: 0,
                image: myImage,
                width: 400,
                height: 400,
                id: 'thumb'
            });
            layer.add(yoda);
            layer.draw();
        };
        myImage.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
        $('#thumb').imageLens({ lensSize: 200 });

Had no luck, I would appreciate your suggestions, thanks in advance.

Solution

  • It is not posible to use kineticjs and imageLens as you are trying. Very different techniques.

    So you have such ways:

    1. Don't use kineticjs. Work only with DOM images.
    2. Convert kineticjs objects to image http://www.html5canvastutorials.com/kineticjs/html5-canvas-shape-caching-with-kineticjs/ then insert the image to DOM and then use imageLens.