Cropper.js, filling a div with a centered image

Question

I modified the example from the cropper.js library website ( https://fengyuanchen.github.io/cropperjs/ ).

Original version of this example: https://fengyuanchen.github.io/cropperjs/examples/fixed-crop-box.html

My version: https://codepen.io/reti/pen/ExmyyaX

 var image1 var cropper1 var image2 var cropper2 function cropperInstances() { image1 = document.querySelector('#image1'); cropper1 = new Cropper(image1, { dragMode: 'move', aspectRatio: 1 / 1, restore: false, guides: false, center: true, highlight: false, cropBoxMovable: false, cropBoxResizable: false, toggleDragModeOnDblclick: false, minCropBoxWidth: 300, minCropBoxHeight: 300, }); image2 = document.querySelector('#image2'); cropper2 = new Cropper(image2, { dragMode: 'move', aspectRatio: 1 / 1, restore: false, guides: false, center: true, highlight: false, cropBoxMovable: false, cropBoxResizable: false, toggleDragModeOnDblclick: false, minCropBoxWidth: 300, minCropBoxHeight: 300, }); } window.addEventListener('DOMContentLoaded', cropperInstances);

 .container { margin: 100px auto; width: 300px; height: 300px; } img { max-width: 100%; }

 <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Cropper.js</title> <link rel="stylesheet" href="https://srv19859.microhost.com.pl/cropper/css/cropper.css"> </head> <body> <div class="container"> <img id="image1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Lion_waiting_in_Namibia.jpg/1200px-Lion_waiting_in_Namibia.jpg"> </div> <div class="container"> <img id="image2" src="https://upload.wikimedia.org/wikipedia/de/9/93/Burj_Khalifa.jpg"> </div> <script src="https://srv19859.microhost.com.pl/cropper/js/cropper.js"></script> </body> </html>

I would like these images, when uploaded, to fill their divs, but so that they are centered vertically and horizontally, but:

if the image has a horizontal orientation, its height cannot be higher than the div
if the image has vertical orinetation, then its width cannot be greater than the div.

Exactly like here: https://ibb.co/Twqxy2h

How to do it? I'm trying different ways and I'm already running out of ideas.

The problem is exactly the same as in this post: Panzoom library and filling a div with a centered image

Answer 1

I think I've solved the problem:

function fillCropContainer() {
  var instanceArray = [cropper1, cropper2]
  var ratio
  instanceArray.forEach((el) => {
    var imgNatHeight = el.imageData.naturalHeight
    var imgNatWidth = el.imageData.naturalWidth
    if (imgNatHeight < imgNatWidth) {
      ratio = 300 / imgNatHeight
      el.zoomTo(ratio)
    } else {
      ratio = 300 / imgNatWidth
      el.zoomTo(ratio)
    }
  })
}

Cropper.js, filling a div with a centered image

Question

1 answers

solution1
0 2021-07-09 09:16:49

Cropper.js, filling a div with a centered image

Question

1 answers

solution1 0 2021-07-09 09:16:49

solution1
0 2021-07-09 09:16:49