Load and center an image of unknown dimensions keeping aspect ratio and padding

Question

I'm trying to directly center an image that's dynamically added to the canvas via KonvasJS.

Here's the fiddle:

http://jsfiddle.net/71Lw0bk8/7/

I already have the code figured out, but it's not using Konva, it's an attempt of doing this without the library, and it works perfectly.

function addImage(imgUrl) {

    const img = new Image();

    img.onload = function () {
        var padding = 20;
        while (img.width + padding > canvas.width || img.height + padding > canvas.height) {
            if (img.width + padding > canvas.width) {
                let newWidth = canvas.width - (padding * 2);
                img.height = Math.round((img.height / img.width) * newWidth);
                img.width = newWidth;
            }
            else if (img.height + padding > canvas.height) {
                let newHeight = canvas.height - (padding * 2);
                img.width = Math.round((img.width / img.height) * newHeight);
                img.height = newHeight;
            }
        }
        ctx.drawImage(img, canvas.width / 2 - img.width / 2, canvas.height / 2 - img.height / 2, img.width, img.height);
    };
    img.src = imgUrl;
}

I'm just not sure how to convert that to here:

var uploadedImage = new Konva.Image({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    width: 200,
    height: 200,
    ...

How do I do this?

Answer 1

The technique is same as with plain JS. Use the onload event for a JS image to decide what you want to display and what size etc. Once all that is done the job of centering is a very standard piece of rectangle logic. See the centreRectShape() function below.

EDIT: added more dynamic image sizing to enrich the snippet.

EDIT: Changed image source as prior was moved.

 // the x,y position of a rect shape is in fact the top left corner, so to // correcty centre we should consider width and height in the mix. // Konva.Rect and Konva.Image shapes both have x, y being topleft. function centreRectShape(shape){ shape.x( ( stage.getWidth() - shape.getWidth() ) / 2); shape.y( ( stage.getHeight() - shape.getHeight() ) / 2); } // Set up the stage var stage = new Konva.Stage({ container: 'canvas-container', width: 650, height: 300 }); // We draw on layers so create one var layer = new Konva.Layer(); stage.add(layer); var bgRect = new Konva.Rect({width: stage.getWidth(), height: stage.getHeight(), fill: 'gold', opacity: 0.1}); layer.add(bgRect); // we will be uploading an image so make somewhere for it to be displayed later var uploadedImage = new Konva.Image({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, width: 200, height: 200, stroke: 'red', strokeWidth: 10, draggable: false }); // Always have to add shapes to a layer. layer.add(uploadedImage); // use a standard plain old JS image to do the pull of the image from src imgObj = new Image(); // we harness the onload event to know when to update the canvas image imgObj.onload = function() { uploadedImage.image(imgObj); // give the image to the cannvas image object. // since this is a dynamic image upload we want to resize the canvas image object to get // a pleasing effect. var padding = 20; var w = imgObj.width; var h = imgObj.height; // get the aperture we need to fit by taking padding off the stage size. var targetW = stage.getWidth() - (2 * padding); var targetH = stage.getHeight() - (2 * padding); // compute the ratios of image dimensions to aperture dimensions var widthFit = targetW / w; var heightFit = targetH / h; // compute a scale for best fit and apply it var scale = (widthFit > heightFit) ? heightFit : widthFit ; w = parseInt(w * scale, 10); h = parseInt(h * scale, 10); uploadedImage.size({ width: w, height: h }); // Finally position the canvas image object centered. centreRectShape(uploadedImage); layer.draw(); // My favourite thing to forget. } // to start the image load give the object a new src. imgObj.src = 'https://via.placeholder.com/600x280/0000FF/FFFFFF.png?text=Wombats are awsome';

 html, * { margin: 0; padding: 0; } body { background: #eee; } #canvas-container { background: #fff; border-radius: 3px; border: 1px solid #d8d8d8; width: 650px; margin: 0 auto; margin-top: 20px; box-shadow: 0 3px 5px rgba(0, 0, 0, .2); } .stickers { padding: 10px 5px; } .stickers > img { margin-right: 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.4.1/konva.min.js"></script> <div id="canvas-container"></div>