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.