I am running cropperjs on a static image in the browser(retrieved from a nodejs server in jpeg format), it returns a preview in a different image that is in base64. Im trying to take that data and save the modified image back to the server in the original jpeg format. I've tried a few different things, but this is the latest:
saveCroppedImage(){
var split = this.imageDestination.split(','); // parsing out data:image/png;base64,
var croppedImage = split[1]; // assigning the base64 to a variable
var blob = new Blob([croppedImage],{type: 'image/jpeg'}); //changing the base64->Blob
var file = new File([blob],'cropped.jpeg'); //theoretically changing the blob->jpeg
this.newCroppedImage = file;
}
I then upload the file to the server and it is corrupted.
Ok, so I figured it out with some help of the interweb:
This is the info I had to include with the file creation, and it did have to stay a png to work.
public file = (theBlob: Blob): File =>
{return new File([theBlob],'croppedImage.png',{lastModified:new
Date().getTime(), type:'image/png'})
}
saveCroppedImage() {
var split = this.imageDestination.split(',');
console.log(this.imageDestination)
var croppedImage = split[1]
this.blob = blobUtil.base64StringToBlob(croppedImage);
this.newCroppedImage =this.file(this.blob);
this.onFileChange();
}