We Keep Coding

React-easy-crop just returns a blob url

I am using react-easy-crop to allow users to modify their profile pictures after uploading. The problem I am experiencing is that after cropping, the image is returned in the form of a blob url like this: blob:http://localhost:3000/5e44190e-a087-4683-b3a4-dfce4a57ee62 which is unhelpful since it can only be viewed on my local machine.
I have tried converting it to a data url (which I understand can then be shared and viewed across browsers), using FileReader and the readAsDataURL() method like this:
let blob = await fetch(imageToCrop).then((r) => r.blob());
let reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function () {
let base64data = reader.result;
console.log(base64data);
};
The base64data variable does return what I think I need, however all my attempts to then store this result in my state only return a null value.
Does anyone know what is the best way to handle this?

If you have this line in your code, delete it because it revoke your URL.
window.URL.revokeObjectURL(this.fileUrl);

If you need the base64 output of the cropped image, you can get it after using the canvas to crop it with canvas.toDataURL('image/jpeg'). This base64 string can then be shared to anyone or uploaded to a remote server.
This is basically the commented line in the getCroppedImg() function of this demo: https://codesandbox.io/s/q8q1mnr01w?file=/src/cropImage.js:2362-2562
BTW I guess you could also upload the blob to a remote server and store the image somewhere like AWS S3.

javascript convert image path to file(list) object

I have a file upload that saves images as .png on the server and the link in a mysql database. To show thumbnails of the image before uploading I have a function that convertes the file list object to a preview pic. Now I want the user to edit the file selection later. For that I need to load the images from the server back as thumbnails. I think the best way to do this is to convert the file path stored in the database to a file object and apply this object to the function that creates the thumbnails that I don't need to rewrite this function.
So my question is how can I convert my stored image links to a file list object?
Edit:
upload:
user selection -> file object -> base 64 -> blob -> display blob -> (maybe) edit -> upload selection as base 64 to server -> base 64 to .png -> save pic -> save link
later edit selection by user(how to do?):
saved link -> file object -> base 64 -> blob -> display blob -> (maybe) edit -> ...
saved link -> file object How to do? Possible? Better way?
I hope it's now clearer to understand.
If someone has an idea how to do this or a better way please answer.
(I know that you should show Code when asking a question but I don't think that it is necesarry to upload the whole upload function here)

You process is all frowned, so I may not answer correctly your question, but I'm pretty sure this is an X-Y problem.
Javascript File objects inherit from the Blob object.
From MDN :
A File object is a specific kind of a Blob, and can be used in any context that a Blob can.
Never convert a File to a base64 dataURL, if it's to convert it back to a Blob ; this makes no sense and only pollute the browser's memory.
To display a Blob (or a File) in the browser, from media elements, or iframes, use the URL.createObjectURL(blob) method. This will return a blobURI, that will be available only for the life time of the initiating page, and only for the user's browsers. In case of user uploaded Files, the file is not even copied to memory, and the uri returned is just a direct pointer to the file on the user's system.
inp.onchange = function(){
var url = URL.createObjectURL(this.files[0]);
var img = new Image();
img.onload = function(){
document.body.appendChild(this);
}
img.onerror = function(){
console.log('probably not a supported image file');
}
img.src = url;
}
<input id="inp" type="file" accept="image/*">
If you need to modify the image, you can do so by drawing the resulting image on a canvas.
Then, instead of exporting your canvas to a dataURI, directly use the toBlob method, which can be polyfilled.
To send you File/Blob on your server, send the File/Blob directly instead of its 30% heavier base64 string representation.
This can be done really easily thanks to the FormData API.
var xhr = new XMLHttpRequest();
xhr.onload = done;
var formData = new FormData();
formData.append('file', theFile, fileName);
xhr.open('POST', yourServer);
xhr.send(formData);
Then you can retrieve it server side just like any File uploaded through the basic Multipart/Form method.

How to convert a captured media file into base64 using javascript?

I am developing an application using phone gap. I capture image/audio/video and store its path in local storage. I need to fetch base64 of captured file and store it in the database and then sync it with server. Is that possible using javascript ?
I tried using FileReader API that phone gap provides but the function reader.onloadend() does not get executed.
Could manage to get base64 of image using a canvas but is it possible to get base64 for audio and video using canvas?
Thanks.

Yes It's possible to get the base64 of a media file
reader.onloadend() is not being called because you might have missed this line reader.readAsDataURL(file).
// here i have a file input and i am using the FileReader Api to read the content on it's change event ( i have no idea what is the event for capturing a media in phonegap
$("#file").change(function(e){
var file = e.currentTarget.files[0];
var FR = new FileReader();
FR.onload = function (encodedFile) {
//alert("onload is called.");
}
FR.onloadend = function (encodedFile) {
var src = encodedFile.target.result;
src = src.split("base64,");
// This is the base64 encoded string of that media file which you will be interested to store in the database(post to the server
var contentAsBase64EncodedString = src[1];
}
reader.readAsDataURL(file);
}

Unit8Array to base64 conversion and then displaying image in browser issue

I have a Unit8Array in a mongodb that represents a png image. I pull the array out and convert it to base64 using javascript (in meteor client side) so that I can display it in the browser. The code is as follows
var blob = new Uint8Array(Tester.findOne().image);
var base64String = btoa(String.fromCharCode.apply(null, blob));
var src = 'data:image/png;base64,' + base64String + '';
console.log(src);
Where Tester.findOne().image is my mongodb collection containing the Uint8Array.
I take the src once it is logged and I paste it into the browser. The generic broken image icon appears (see below). However when I click the broken image in the browser and say save to desktop, it downloads the file and when I open it the png image appears as expected.
After I Download the Image:
When I directly try to assign it to <img src = 'data'>:
Adding data as img source or by using document.findElementbyId("img") then changing img.src:

image shown rotated on iPad and not on laptop

I've created a small test site in which you can upload a picture. And without a round-trip to the backend, the selected picture is shown. So far nothing very interesting
$('input').on('change', function () {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function (event) {
var base64 = event.target.result;
$('<img>').attr('src', base64).appendTo('body');
};
reader.readAsDataURL(file);
});
However, I noticed that on my iPad3 some pictures are shown up-side-down. I found on google about EXIF metadata which is stored in the image (base64) which defines the orientation of the picture. But another thing is, that on my laptop the image are shown normal (with the same pictures of course). Is there any way to prevent/fix this behaviour from happening ? (I want them to show the picture the same way, and if possible I also want them to be shown normal (not up-side-down))

This is not a CSS issue. It's actually an issue with the image. Some browsers interpret the orientation of the image through meta data. Simply open the image in any image editing software and export it. Upload it to your server and let me know if that worked!
EDIT - Reference this URL for a possible solution:
Accessing JPEG EXIF rotation data in JavaScript on the client side