javascript - Load and center an image of unknown dimensions keeping aspect ratio and padding - Stack Overflow

admin管理员组

文章数量:1415466

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

Here's the fiddle:

/

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?

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

Here's the fiddle:

http://jsfiddle/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?

• javascript
• jquery
• html
• canvas
• konvajs

Share Improve this question Follow edited Oct 12, 2018 at 17:22 Vanquished Wombat 9,56577 gold badges3737 silver badges8080 bronze badges asked Oct 12, 2018 at 15:36 kinxkinx 49355 gold badges1515 silver badges3333 bronze badges 4

• I recognise that image - is this the konvajs version of the drag-image-over-image with transform? Wele back ! – Vanquished Wombat Commented Oct 12, 2018 at 15:46
• Yes Vanquished, thanks for suggesting it, it's much easier to understand then Fabric, though I'm still a bit lost! Ha – kinx Commented Oct 12, 2018 at 15:47
• You create a standard js image and assign its src. Then in the onload event you create the Konva.Image. Example here konvajs.github.io/docs/shapes/Image.html - so it will be pretty much like what you have in your plain JS code sample above, but replacing the ctx.drawImage() with the create of the Konva.Image. And don't forget to layer.draw(). – Vanquished Wombat Commented Oct 12, 2018 at 15:54
• @VanquishedWombat mind doing an example fiddle? I'm totally lost. – kinx Commented Oct 12, 2018 at 16:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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);

  // pute the ratios of image dimensions to aperture dimensions 
  var widthFit =  targetW / w;
  var heightFit = targetH / h;
  
  // pute 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./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./ajax/libs/konva/2.4.1/konva.min.js"></script>

<div id="canvas-container"></div>

本文标签： javascriptLoad and center an image of unknown dimensions keeping aspect ratio and paddingStack Overflow