Cropper.js hat ein festes Containerverhältnis? ⇐ JavaScript

[Anonymous]

Verwendung eines Croppers mit einem festen Seitenverhältnis und einer spezifischen Anzeigegröße von 150 x 200. Sobald ein Bild auf die Leinwand gezeichnet wird, scheint sich die Leinwand (oder vielmehr ihr Container) zu einem gleichmäßigen Quadrat oder einem Verhältnis von 1:1 auszudehnen. In meinem Fall wird es 200x200. Es gibt einen zusätzlichen Raum in einer Dimension, den ich nicht möchte. (siehe die roten Bereiche im Bildlink). Auch das Zuschneidefeld scheint sich nicht an das eingestellte Seitenverhältnis zu halten. Im ersten Beispiel beträgt das maximale Zuschneidefeld 133 x 200, obwohl es 150 x 200 sein sollte. Im zweiten Beispiel ist es 105 x 158, was dem Verhältnis 2:3 entspricht.
https://imgur.com/B0lwezD
Ich habe versucht, Abmessungen für .cropper-container und .cropper-bg festzulegen, aber das Bild sieht aus, als wäre es mit einem Versatz auf der Leinwand gezeichnet worden, um es innerhalb dieser quadratischen Abmessungen zu zentrieren. Das Festlegen dieser Container ruiniert also nur die Benutzeroberfläche, da das Bild beschnitten wird, das Zuschneidewerkzeug selbst jedoch über das hinausgehen kann, was Sie sehen. Gibt es eine Einstellung, um dies zu steuern?

Code: Select all

$(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.