javascript - 上传时保持图像比例

Question

当我将图像上传到konva.js时，有没有办法保持图像比例。基本上，我使用的是 konva 和 Vue 扩展，我需要有一个上传背景图片的方法。我已经根据用户设备设置了 Canvas 大小，我可以将上传图像大小设置为该 Canvas 尺寸，但它不会保存其比例。

我认为，我可以通过编写函数来确定图像可以达到的最大高度或宽度(在特定情况下选择更合适的选项)，然后按比例调整其大小，但我没有看到这个答案因为优雅且没有错误，所以我想在做之前先询问一下。

Answer 1

您需要自己处理图像缩放，但这并不困难。

正如您所确定的，您需要一个函数来设置图像的比例以覆盖视口(viewport)，同时保留纵横比。

所需的数学运算是计算视口(viewport)宽度与图像宽度的比率，高度也相同。然后比较两个比率并使用较大的。

除非视口(viewport)和图像的宽高比完全相同，否则您会发现某些图像被剪切，如选择 300x500 按钮时的代码片段中所示。

下面的代码片段显示了代表视口(viewport)的粉红色矩形。尺寸按钮更改视口(viewport)比例，宽度 x 高度按钮调用不同的图像。组合使用按钮，您可以看到拟合功能的工作原理。

实验 1:开始时，反复单击“加宽”按钮，看看图像顶部和底部的部分如何被裁剪到视口(viewport)之外。

实验2:开始时，反复单击“缩小”并观察类似的效果。

/*
function to caluclate and return appropriate scale to fill one rect with another whilst preserving aspect ratio
*/
var autoScale = function(container, imgEle){

var rW = container.width() / imgEle.width;
var rH = container.height() / imgEle.height;

var scale = (rW < rH ? rH : rW);
return {x: scale, y: scale};
}

// from here on the code is about making the demo.

var sz = '600x600';
var miniMag = 0.3333

// Set up the canvas / stage
var div = $('#container');

var stage = new Konva.Stage({container: 'container', width: div.width(), height: div.height()});
var layer = new Konva.Layer({draggable: false});
stage.add(layer)
stage.scale({x: miniMag, y: miniMag});
var pic = new Konva.Image({ x: 300, y: 300});
layer.add(pic);
var rect = new Konva.Rect({x: 300, y: 300, width : div.width(), height: div.height(), stroke: 'magenta'})
layer.add(rect)
stage.draw()

// load an image
var imageObj = new Image();
imageObj.onload = function(){

  pic.image(imageObj);  
  pic.scale(autoScale(rect, imageObj));
  pic.x(rect.x() + ((rect.width() -  (pic.width() * pic.scaleX()) )/2)) 
  pic.y(rect.y() + ((rect.height() -  (pic.height() * pic.scaleY()) )/2)) 
  layer.draw();

}

// if we click a change-size button then change the viewport indicator
$('#narrower').data('change', {x:-10, y:   0});
$('#wider').data('change',  {x: 10, y:   0});
$('#shorter').data('change', {x:  0, y: -10});
$('#taller').data('change',  {x:  0, y:  10});
$('.btn').on('click', function(e){

  var diff = $(this).data('change');  
  rect.width(rect.width() + diff.x)
  rect.height(rect.height() + diff.y)
  pic.scale(autoScale(rect, imageObj));
  pic.x(rect.x() + ((rect.width() -  (pic.width() * pic.scaleX()) )/2)) 
  pic.y(rect.y() + ((rect.height() -  (pic.height() * pic.scaleY()) )/2)) 
  layer.draw();

})

// If we click an image selection button change the image
$('.imgsel').on('click', function(e){

imageObj.src = "https://via.placeholder.com/" + $(this).attr('sz');

})

// Kick off with a 600 x 600 image
$('.imgsel600').trigger('click');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.min.js"></script>
<div>
<button id='narrower' class='btn'>Narrower</button>
<button id='wider' class='btn'>Wider</button>
<button id='shorter' class='btn'>Shorter</button>
<button id='taller' class='btn'>Taller</button>
<button class='imgsel' sz='300x300'>300 x 300</button>
<button class='imgsel' sz='300x500'>300 x 500</button>
<button class='imgsel' sz='500x300'>500 x 300</button>
<button class='imgsel imgsel600' sz='600x600'>600 x 600</button>
</div>
<div id='container' style="position: absolute; z-index: -1; display: inline-block; left: 0px; top: 0px; width: 300px; height: 300px; background-color: silver;"></div>