HTML5 Canvas Drag, Drop, and Resize Images Demo

The demo shows how to manually implement resizing of a shape with Konva shapes primitives.

But also we have a built-it methods for such cases with special Konva.Transformer node. Take a look into Select and Transform demo.

Konva Drag, Drop, and Resize Images Demoview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Image Resize Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;

function update(activeAnchor) {
var group = activeAnchor.getParent();

var topLeft = group.findOne('.topLeft');
var topRight = group.findOne('.topRight');
var bottomRight = group.findOne('.bottomRight');
var bottomLeft = group.findOne('.bottomLeft');
var image = group.findOne('Image');

var anchorX = activeAnchor.x();
var anchorY = activeAnchor.y();

// update anchor positions
switch (activeAnchor.getName()) {
case 'topLeft':
topRight.y(anchorY);
bottomLeft.x(anchorX);
break;
case 'topRight':
topLeft.y(anchorY);
bottomRight.x(anchorX);
break;
case 'bottomRight':
bottomLeft.y(anchorY);
topRight.x(anchorX);
break;
case 'bottomLeft':
bottomRight.y(anchorY);
topLeft.x(anchorX);
break;
}

image.position(topLeft.position());

var width = topRight.x() - topLeft.x();
var height = bottomLeft.y() - topLeft.y();
if (width && height) {
image.width(width);
image.height(height);
}
}
function addAnchor(group, x, y, name) {
var stage = group.getStage();
var layer = group.getLayer();

var anchor = new Konva.Circle({
x: x,
y: y,
stroke: '#666',
fill: '#ddd',
strokeWidth: 2,
radius: 8,
name: name,
draggable: true,
dragOnTop: false,
});

anchor.on('dragmove', function () {
update(this);
});
anchor.on('mousedown touchstart', function () {
group.draggable(false);
this.moveToTop();
});
anchor.on('dragend', function () {
group.draggable(true);
});
// add hover styling
anchor.on('mouseover', function () {
var layer = this.getLayer();
document.body.style.cursor = 'pointer';
this.strokeWidth(4);
});
anchor.on('mouseout', function () {
var layer = this.getLayer();
document.body.style.cursor = 'default';
this.strokeWidth(2);
});

group.add(anchor);
}

var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});

var layer = new Konva.Layer();
stage.add(layer);

// darth vader
var darthVaderImg = new Konva.Image({
width: 200,
height: 137,
});

// yoda
var yodaImg = new Konva.Image({
width: 93,
height: 104,
});

var darthVaderGroup = new Konva.Group({
x: 180,
y: 50,
draggable: true,
});
layer.add(darthVaderGroup);
darthVaderGroup.add(darthVaderImg);
addAnchor(darthVaderGroup, 0, 0, 'topLeft');
addAnchor(darthVaderGroup, 200, 0, 'topRight');
addAnchor(darthVaderGroup, 200, 138, 'bottomRight');
addAnchor(darthVaderGroup, 0, 138, 'bottomLeft');

var yodaGroup = new Konva.Group({
x: 20,
y: 110,
draggable: true,
});
layer.add(yodaGroup);
yodaGroup.add(yodaImg);
addAnchor(yodaGroup, 0, 0, 'topLeft');
addAnchor(yodaGroup, 93, 0, 'topRight');
addAnchor(yodaGroup, 93, 104, 'bottomRight');
addAnchor(yodaGroup, 0, 104, 'bottomLeft');

var imageObj1 = new Image();
imageObj1.onload = function () {
darthVaderImg.image(imageObj1);
};
imageObj1.src = '/assets/darth-vader.jpg';

var imageObj2 = new Image();
imageObj2.onload = function () {
yodaImg.image(imageObj2);
};
imageObj2.src = '/assets/yoda.jpg';
</script>
</body>
</html>
Enjoying Konva? Please consider to support the project.