CODEWITHSUNDEEP
javascriptimagepngcropcropperjs
user3673849
user3673849

Reputation: 33

Cannot crop PNG images using cropper js

I am using cropperjs to crop images and upload them. I can crop JPEG images but not PNG images currently. For both JPEG and PNG images, the img tag shows the base64 string in the console after I crop.

For JPEG images after I crop and hover over the image, I can see the image.

However, when I hover over the base64 string for the PNG cropped image, there is no image shown. What I see is this:

PNG cropped image base64 string

This is how I crop the image:

 var image = document.getElementById('blah');
    var cropper = new Cropper(image, {
        aspectRatio : 1 / 1,
        crop : function(e) {
            console.log(e.detail.x);
            console.log(e.detail.y);
    }
});

var imgurl = cropper.getCroppedCanvas().toDataURL('image/png');
var img = document.createElement("img");
img.src = imgurl;
img.setAttribute("id", "blah");

I have tried

var imgurl = cropper.getCroppedCanvas().toDataURL('image/jpeg');

and

var imgurl = cropper.getCroppedCanvas().toDataURL('image/*');

too. My input type is:

<input type="file" name="image" accept="image/*"/>

I have tried

var imgurl = cropper.getCroppedCanvas().toDataURL('image/png');

and

var imgurl = cropper.getCroppedCanvas().toDataURL();

too.

Upvotes: 2

Views: 1716

Answers (0)

Related Questions