blob url

[mshqlaih]

hi
after i upload my image the src of image is like this :
blob:http://academicprogs.iugaza.edu/e6475d62-18dc-419d-adec-7719c10de1d3
i can get this src, but how can i save it to then server or getbase64 of this src.

any help please.

thanks
maher

[mshqlaih]

@fengyuanchen any help please.

[fengyuanchen]

This project is a photo editing application based on Cropper.js, so I will suggest using the Cropper.js directly.

[mshqlaih]

but this project help alot and it is very helpful , and I want only an answer for above question if you can help me.

[fengyuanchen]

You can load the URL by XMLHttpRequest with the responseType set to "blob".

[mshqlaih]

@fengyuanchen many thanks for your help.
i used this code to solve my problem:
var iframe = document.getElementById("ifphoto");
var base64 = (iframe.contentWindow.document.getElementsByTagName("a")[0]).toString();
apex.message.clearErrors();
if (base64.toString().indexOf('http') > 0 ) {

const createImageFromBase64 = function(event) {
//const img = document.createElement('img');
console.log(this.result);
base64 = this.result;
base64 = base64.toString().replace("data:", "").replace(/^.+,/, "");
apex.item('P27_BASE64').setValue(base64);
}

const onLoadReadBlobAsBase64 = function(event) {
const blob = this.response;
const reader = new FileReader();
reader.onloadend = createImageFromBase64;
reader.readAsDataURL(blob);
}

var xhr = new XMLHttpRequest();
xhr.open("GET",base64);
xhr.responseType = "blob";
xhr.onload = onLoadReadBlobAsBase64;
xhr.send();
}
else {
base64 = base64.toString().replace("data:", "").replace(/^.+,/, "");
apex.item('P27_BASE64').setValue(base64);
}

[mshqlaih]

@fengyuanchen may I ask another question :
How can I show image directly on photo-editor without upload it , and then make any process to it.