kineticjs add re-size anchors to uploaded image

Question

I am working on a kinetic canvas and need to add resize anchors (on mouseover or click). I know there are many examples on how to add resize anchors but they are all for pre-loaded images and as I am new to kinetic js I am looking for an example of how to add them to a user uploaded image...

Here is the js for the uploader

//image loader
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);

function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
        var img = new Image();
        img.onload = function () {
            layer.add(new Kinetic.Image({
                x: 100,
                y: 50,
                image: img,
                width: 200,
                height: 130,
                draggable: true
            }));
            text.moveToTop();
            stage.draw();
        };
        console.log(event);
        img.src = event.target.result;
    };
    reader.readAsDataURL(e.target.files[0]);
}

here is the Fiddle

thanks in advance :)

Answer 1

Add image with in a group and then you need to add anchors for resize the image.

I have modified your code

You need to add addanchor and update functions. I hope this link will help you http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

    function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
    var imageGroup = new Kinetic.Group({
    x: 100,
    y: 50,
    draggable: true
    });
    layer.add(imageGroup);
    var img = new Image();
                img.onload = function () {
                    imageGroup.add(new Kinetic.Image({
                        x: 0,
                        y: 0,
                        image: img,
                        width: 200,
                        height: 130,
                        draggable: true
                    }));

                addAnchor(imageGroup, 100, 50, 'topLeft');
                addAnchor(imageGroup, 300, 50, 'topRight');
                addAnchor(imageGroup, 300, 180, 'bottomRight');
                addAnchor(imageGroup, 100, 180, 'bottomLeft');
                    text.moveToTop();
                    stage.draw();
                };
                console.log(event);
                img.src = event.target.result;
            };
            reader.readAsDataURL(e.target.files[0]);
        }