keditor convert blob generated image URL to base64

Question

I'm using keditor for my document. My problem here is that the images are generated as blob and I have no way of knowing where they are being stored thus when converting the file to another format the images are lost.

Sample image tag with blob:

<img src="blob:http://localhost/7b0e82ab-445b-4866-b8b5-09b4881a0544" width="100%" height="" style="display: inline-block;">

I was hoping I can find a way to convert this to blob either using PHP or JS.

I also found this post but no solution was provided:

JS convert blob url to Base64 file

score 1 · Answer 1 · answered Feb 06 '18 at 11:56

Using AJAX:

$.ajax({
      method: "GET",
      url: "blob:http://127.0.0.1:8000/e89c5d87-a634-4540-974c-30dc476825cc",
      dataType: "binary",
    }).done(function( data ) {
        var reader = new FileReader();
        reader.readAsDataURL(data); 
        reader.onloadend = function() {
             var base64data = reader.result;
             console.log(base64data)
        }
    });

Have not tested this, but should point you in the right direction though.

score 1 · Accepted Answer · answered Feb 06 '18 at 18:20

Somewhere in your code you have a reference to the blob that you had to get your blob url, take it an pass it to the FileReader like so:

// Just an example file
var blob = new Blob(['abc'], {type: 'text/plain'})

var reader = new FileReader()
reader.onload = function() {
  var base64data = reader.result
  console.log(base64data)
}
reader.readAsDataURL(blob)

keditor convert blob generated image URL to base64

2 Answers2