时间戳

首页 > 解决方案 > Cropper.js，用居中的图像填充 div

javascript - Cropper.js，用居中的图像填充 div

问题描述

我修改了cropper.js 库网站（https://fengyuanchen.github.io/cropperjs/）中的示例。

本示例原版：https ://fengyuanchen.github.io/cropperjs/examples/fixed-crop-box.html

我的版本：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>

我希望这些图像在上传时能够填充它们的 div，但要使它们垂直和水平居中，但是：

就像这里一样：https ://ibb.co/Twqxy2h

怎么做？我正在尝试不同的方法，但我已经没有想法了。

问题与这篇文章完全相同：Panzoom library and fill a div with a centered image

标签： javascriptcsscropperjs

解决方案

我想我已经解决了这个问题：

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

推荐阅读