4

In one of my application i am cropping the image using http://fengyuanchen.github.io/cropper/

The resultant cropped image am getting in the base64 dataURL format, but i required that to be in file object format.

How to convert the dataURL to file either in client side or server side.

0

3 Answers 3

4

Use Blob instead of the deprecated BlobBuilder. The code is very clean and simple. (Manuel Di Iorio's code is deprecated.)

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}
//test:
//var blob = dataURLtoBlob('data:text/plain;base64,YWFhYWFhYQ==');

Data URI scheme

Sign up to request clarification or add additional context in comments.

2 Comments

and from that one? How can I save it to a file (saved in local)? @cuixiping
you can use eligrey/FileSaver.js to save a file to local disk. @gumuruh
0

How to convert dataURL to file object in javascript?

function dataURItoBlob(dataURI) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
    var byteString = atob(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to an ArrayBuffer
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    // write the ArrayBuffer to a blob, and you're done
    var bb = new BlobBuilder();
    bb.append(ab);
    return bb.getBlob(mimeString);
}

Then just append the blob to a new FormData object and post it to your server using ajax:

var blob = dataURItoBlob(someDataUrl);
var fd = new FormData(document.forms[0]);
var xhr = new XMLHttpRequest();

fd.append("myFile", blob);
xhr.open('POST', '/', true);
xhr.send(fd);

Comments

-1

Thats my validation for input.

$data = $_POST['thumb'];
$uriPhp = 'data://' . substr($data, 5);

if ( base64_encode(base64_decode($uriPhp))){
    $_POST['thumb'] = $uriPhp;
} 

for saving I am using : http://www.verot.net/php_class_upload.htm

$foo = new Upload($_POST['thumb']);
    if ($foo->uploaded) {
      // save uploaded image with a new name
      $foo->file_new_name_body = $name;
      $foo->image_convert = 'png';
      $foo->Process("uploads/");
    }

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.