After using the result() method as shown below, I'm getting a really inconsistent image size. Sometimes the output gives me a 155x155 image, and other times it's over 700x700. Either this is a bug, or I'm using it wrong.
Here's how I'm initializing croppie:
var preview = document.getElementById('ProfilePicturePreview');
$(preview).html("");
croppie = new Croppie(preview, {
viewport: {
width: 150,
height: 150
},
boundary: {
width: 500,
height: 500
}
});
croppie.bind({
url: data.fileName + "?v=" + Date.now()
});
And here's how I'm calling result():
croppie
.result('base64', 'viewport')
.then(function(base64) {
$("#SaveCroppedProfilePicture").addClass("disabled");
$("#SaveCroppedProfilePicture .saving-indicator").show();
$.ajax({
type: "POST",
url: "/User/SaveCroppedProfilePicture",
traditional: true,
data: {
base64Picture: base64
}
})
.done(function (data) {
if (data.success === true)
{
$("#imgProfilePicture").attr("src", data.profilePictureFileLocation + "?v=" + Date.now());
$("#SaveCroppedProfilePicture .saving-indicator").hide();
$("#SaveCroppedProfilePicture").removeClass("disabled");
$("#ProfilePicturePreviewDialog").modal("hide");
}
else
{
alert(data.errorMessage)
}
})
.fail(function (e) {
alert('Cannot upload profile image at this time.');
$("#SaveCroppedProfilePicture .saving-indicator").hide();
$("#SaveCroppedProfilePicture").removeClass("disabled");
$("#ProfilePicturePreviewDialog").modal("hide");
});
});
Try calling result with {type: 'base64', size: 'viewport'}. Then you should always get the right size.
Most helpful comment
Try calling result with
{type: 'base64', size: 'viewport'}. Then you should always get the right size.