Библиотека Croppie не обрезает то же изображение, что и в окне просмотра ⇐ CSS

[Anonymous]

Я использовал библиотеку Croppie, чтобы обрезать изображение с размером окна просмотра 225 x 225 пикселей. Ниже приведен код, который я написал для этой функции:

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

$(document).ready(function() {
var $imageCrop;
var backgroundColor = 'rgb(232, 226, 230)'; // Default background color

function initializeCroppie(container) {
$imageCrop = $(container).croppie({
viewport: {
width: 225,
height: 225,
type: 'circle'  // Set the viewport type to 'circle'
},
boundary: {
width: 300,
height: 300
},
showZoomer: true,
enableOrientation: true,  // Allow image rotation
enforceBoundary: false,   // Allow the image to be moved beyond the boundary
enableResize: false,      // Allow resizing of the viewport
zoom: 1
});

// Set the background color of the extra space outside the image
$(container).find('.cr-boundary').css('background-color', backgroundColor);
}

$('#upload').on('change', function() {
if (this.files &&  this.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
Swal.fire({
title: 'Crop Image',
html: '',
showCancelButton: true,
confirmButtonText: 'Crop Image',
didOpen: function() {
initializeCroppie('#image');

// Bind the resized image
$imageCrop.croppie('bind', {
url: e.target.result
}).then(function() {
console.log('Image uploaded and binding complete.');

// Extract the background color from 1px from the right edge of the resized image
var img = new Image();
img.src = e.target.result;
img.onload = function() {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;

// Draw the image onto the canvas
ctx.drawImage(img, 0, 0);

// Get the pixel data for 1px from the right edge (top edge of the image)
var pixelColor = ctx.getImageData(img.width - 1, 0, 1, 1).data;

// Compute color from the pixel
var r = pixelColor[0];
var g = pixelColor[1];
var b = pixelColor[2];
backgroundColor = `rgb(${r}, ${g}, ${b})`;

// Update Croppie boundary background color
$('#cropContainer .cr-boundary').css('background-color', backgroundColor);
console.log('Extracted Background Color:', backgroundColor);
};
});
},
preConfirm: function() {
return new Promise(function(resolve) {
$imageCrop.croppie('result', {
type: 'canvas',
size: { width: 225, height: 225 }
}).then(function(response) {
resolve(response);
});
});
}
}).then(function(result) {
if (result.isConfirmed) {
// Set the result image
$('#imgSrc').attr('src', result.value);
}
});
};
reader.readAsDataURL(this.files[0]);

// Reset the file input to allow re-uploading the same file
$(this).val('');
}
});
});

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

.swal2-modal {
width: 90%;
max-width: none;
}
.croppie-container {
height: 300px;
}
/* Set the background color of the extra space outside the image */
#cropContainer .cr-boundary {
background-color: rgb(232, 226, 230);  /* Default color */
}

Может ли кто-нибудь помочь мне определить причину и предложить решение этой проблемы?


Подробнее здесь: https://stackoverflow.com/questions/787 ... e-viewport