Croppie: Inconsistent image size from result

Created on 25 Mar 2017  路  1Comment  路  Source: Foliotek/Croppie

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");
                    });
                });

Most helpful comment

Try calling result with {type: 'base64', size: 'viewport'}. Then you should always get the right size.

>All comments

Try calling result with {type: 'base64', size: 'viewport'}. Then you should always get the right size.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Terumi picture Terumi  路  3Comments

oystehei picture oystehei  路  6Comments

nueverest picture nueverest  路  8Comments

VADS picture VADS  路  5Comments

tpilitis picture tpilitis  路  5Comments