Kineticjs Add Re-size Anchors To Uploaded Image

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

Solution 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]);
        }