Сохранить соотношение изображений при загрузке - PullRequest
Новая
       7

Сохранить соотношение изображений при загрузке

0 голосов
/ 28 ноября 2018

Есть ли способ сохранить пропорцию изображения, когда я загружаю изображение в konva.js.В основном я использую конву с расширением Vue, и мне нужен такой метод, как загрузка фонового изображения.Я установил размер холста на основе пользовательского устройства, и я могу сделать размер загружаемого изображения в соответствии с размерами этого холста, но это не сохранит его пропорции.

Один способ, я думаю, я могу сделать это, написав функцию, чтобы определить максимальную высоту или ширину (выберите, что больше подходит в конкретном случае), которого может достигнуть изображение, и затем пропорционально изменить его размер, но я несчитаю этот ответ элегантным и свободным от ошибок, поэтому я подумал, что спрошу, прежде чем делать это.

1 Ответ

0 голосов
/ 02 декабря 2018

Вам нужно будет самостоятельно масштабировать изображение, но это не сложно.

Как вы определили, вам нужна функция, чтобы установить масштаб изображения, чтобы покрыть область просмотра, сохраняя при этом соотношение сторон.

Необходима математика, чтобы вычислить отношение ширины области просмотра кширина изображения и то же самое для высоты.Затем сравните эти два соотношения и используйте большее.

Если видовой экран и изображение не имеют одинаковых форматных соотношений, вы увидите, что некоторые изображения обрезаны, как это видно из фрагмента при выборе кнопки 300x500.

Фрагмент ниже показывает розовый прямоугольник, представляющий область просмотра.Кнопки размеров изменяют пропорции области просмотра, а кнопки ширины x высоты вызывают в разных изображениях.Используя кнопки в сочетании, вы можете увидеть, как работает функция подгонки.

Эксперимент 1: при запуске несколько раз нажмите кнопку «шире» и посмотрите, как части верха и низа изображения обрезаются вне области просмотра.

Эксперимент 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>
...