[英]Cropper.js, filling a div with a centered image
I modified the example from the cropper.js library website ( https://fengyuanchen.github.io/cropperjs/ ).我修改了cropper.js 库网站( https://fengyuanchen.github.io/cropperjs/ ) 中的示例。
Original version of this example: https://fengyuanchen.github.io/cropperjs/examples/fixed-crop-box.html本示例的原始版本: https : //fengyuanchen.github.io/cropperjs/examples/fixed-crop-box.html
My version: https://codepen.io/reti/pen/ExmyyaX我的版本: 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:我希望这些图像在上传时填充它们的 div,但使它们垂直和水平居中,但是:
Exactly like here: https://ibb.co/Twqxy2h完全像这里: 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问题与这篇文章中的完全相同: Panzoom 库并用居中的图像填充 div
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)
}
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.