Save cropped image from ng-src

Question

I have been fooling around with a ngImgCrop and Accept a File POST

The image cropper uses ng-src to display an example of the cropped image:

ng-src="data:image/png;base64,...

I want to save that cropped image. My problem is in the front-end, I have no idea where to and how to go from here.

Is there a way to save that cropped image?

Answer 1

Assuming you know how to upload a file: Convert the base64 string to a blob. A file using a file uploader is a blob with extra properties, so uploading a blob works the same.

var file = dataURItoBlob(dataURI, 'image/png');


function dataURItoBlob(dataURI, type) {
    // convert base64 to raw binary data held in a string
    var byteString = atob(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

    // write the bytes of the string to an ArrayBuffer
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    // write the ArrayBuffer to a blob, and you're done
    var bb = new Blob([ab], { type: type });
    return bb;
}