convert dataURL to file using javascript

Question

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.

cuixiping · Answer 1 · 2015-05-26T23:02:34.663

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

edited May 26 '15 at 23:02

answered May 23 '15 at 01:07

cuixiping

24,167
8
82
93

and from that one? How can I save it to a file (saved in local)? @cuixiping – gumuruh Jul 29 '16 at 07:17
1

you can use [eligrey/FileSaver.js](https://github.com/eligrey/FileSaver.js) to save a file to local disk. @gumuruh – cuixiping Jul 30 '16 at 05:15

score 0 · Answer 2 · edited May 23 '17 at 10:28

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);

score -1 · Answer 3 · answered Jan 20 '15 at 09:50

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/");
    }

convert dataURL to file using javascript

3 Answers3