javascript - 加载未知尺寸的图像并将其居中，保持纵横比和填充

Question

我正在尝试直接将通过 KonvasJS 动态添加到 Canvas 的图像居中。

这是 fiddle :

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

我已经弄清楚了代码，但它没有使用 Konva，它是在没有库的情况下执行此操作的尝试，并且它运行得很好。

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

我只是不确定如何将其转换为此处:

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

我该怎么做？

Answer 1

该技术与普通 JS 相同。使用 JS 图像的 onload 事件来决定要显示的内容和大小等。完成所有这些后，居中工作就是一个非常标准的矩形逻辑。请参阅下面的 centerRectShape() 函数。

编辑:添加更多动态图像大小以丰富代码片段。

编辑:更改图像源，因为之前已移动。

// 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>