Cropper.js имеет фиксированное соотношение контейнеров? ⇐ Javascript

[Anonymous]

Использование обрезки с фиксированным соотношением сторон и определенным размером экрана 150x200. Как только изображение нарисовано на холсте, кажется, что холст (или, скорее, его контейнер) расширяется до ровного квадрата или соотношения 1:1. В моем случае это становится 200х200. В одном измерении есть дополнительное пространство, которое мне не нужно. (см. красные области на ссылке на картинку). Поле обрезки также не соответствует установленному соотношению сторон. В первом примере максимальный размер рамки кадрирования — 133x200, тогда как должен быть 150x200. Во втором примере это 105x158, что соответствует соотношению 2:3.
https://imgur.com/B0lwezD
Я пробовал устанавливать размеры для .cropper-container и .cropper-bg, но изображение выглядит так, будто оно нарисовано со смещением на холсте, чтобы центрировать его в пределах этих квадратных размеров. Таким образом, установка этих контейнеров на самом деле просто разрушает пользовательский интерфейс, поскольку изображение становится обрезанным, но сам инструмент обрезки может расширяться за пределы того, что вы видите. Есть ли настройка для управления этим?

Код: Выделить всё

$(function() {
var canvas  = $("#canvas"),
context = canvas.get(0).getContext("2d"),
$result = $('#result');

$('#fileInput').on( 'change', function(){
if (this.files && this.files[0]) {
if ( this.files[0].type.match(/^image\//) ) {
var reader = new FileReader();
reader.onload = function(evt) {
var img = new Image();
img.onload = function() {
context.canvas.height = img.height;
context.canvas.width  = img.width;
context.drawImage(img, 0, 0);
var cropper = canvas.cropper({
aspectRatio: 2/3,
viewMode: 2,
dragMode: 'move',
autoCropArea:1,
responsive: true,

});
$('#btnCrop').click(function() {
// Get a string base 64 data url
var croppedImageDataURL = canvas.cropper('getCroppedCanvas').toDataURL("image/png");
$result.append( $('
[img]https://code.jquery.com/jquery-3.7.1.min.js[/img]














Your browser does not support the HTML5 canvas element.

Подробнее здесь: https://stackoverflow.com/questions/798 ... iner-ratio