Estoy ejecutando cropperjs en una imagen estática en el navegador (recuperada de un servidor nodejs en formato jpeg), devuelve una vista previa en una imagen diferente que está en base64. Estoy tratando de tomar esos datos y guardar la imagen modificada en el servidor en el formato jpeg original. He probado algunas cosas diferentes, pero esta es la última:
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; }Luego subo el archivo al servidor y está dañado.
Ok, lo descubrí con un poco de ayuda de la interweb:
Esta es la información que tuve que incluir con la creación del archivo, y tenía que permanecer como png para funcionar.
public file = (theBlob: Blob): File => {return new File([theBlob],'croppedImage.png',{lastModified:new Date().getTime(), type:'image/png'}) }guardarImagenRecortada() {
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();}