320

I've been trying to re-implement an HTML5 image uploader like the one on the Mozilla Hacks site, but that works with WebKit browsers. Part of the task is to extract an image file from the canvas object and append it to a FormData object for upload.

The issue is that while canvas has the toDataURL function to return a representation of the image file, the FormData object only accepts File or Blob objects from the File API.

The Mozilla solution used the following Firefox-only function on canvas:

var file = canvas.mozGetAsFile("foo.png");

...which isn't available on WebKit browsers. The best solution I could think of is to find some way to convert a Data URI into a File object, which I thought might be part of the File API, but I can't for the life of me find something to do that.

Is it possible? If not, any alternatives?

1

14 Answers 14

523

After playing around with a few things, I managed to figure this out myself.

First of all, this will convert a dataURI to a Blob:

function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

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

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

    return new Blob([ia], {type:mimeString});
}

From there, appending the data to a form such that it will be uploaded as a file is easy:

var dataURL = canvas.toDataURL('image/jpeg', 0.5);
var blob = dataURItoBlob(dataURL);
var fd = new FormData(document.forms[0]);
fd.append("canvasImage", blob);
18
  • 37
    Why does this always happen... You try to solve a problem for hours upon hours with SO searches here and there. Then you post a question. Within an hour you get the answer from another question. Not that I'm complaining... stackoverflow.com/questions/9388412/…
    – syaz
    Feb 22, 2012 at 5:36
  • @stoive I am able to contruct Blob but can you please explain how do you construct the POST or PUT to S3 ? Dec 22, 2012 at 1:00
  • 1
    @mimo - It points to the underlying ArrayBuffer, which is then written to the BlobBuilder instance.
    – Stoive
    Feb 18, 2013 at 0:58
  • 2
    @stoive In that case why it's not bb.append(ia)?
    – Mimo
    Feb 18, 2013 at 4:13
  • 6
    Thanks! This solved my problem with a small correction var file = new File( [blob], 'canvasImage.jpg', { type: 'image/jpeg' } ); fd.append("canvasImage", file); Jan 20, 2016 at 8:57
151

BlobBuilder and ArrayBuffer are now deprecated, here is the top comment's code updated with Blob constructor:

function dataURItoBlob(dataURI) {
    var binary = atob(dataURI.split(',')[1]);
    var array = [];
    for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
}
7
  • 4
    Just an idea: array=[]; array.length=binary.length; ... array[i]=bina... etc. So the array is pre-allocated. It saves a push() having to extend the array each iteration, and we're processing possibly millions of items (=bytes) here, so it matters.
    – DDS
    Mar 14, 2013 at 20:28
  • 2
    Also fails for me on Safari. @WilliamT. 's answer works for Firefox/Safari/Chrome, though. Apr 10, 2013 at 22:29
  • "binary" is a slightly misleading name, as it is not an array of bits, but an array of bytes. Jun 16, 2014 at 8:42
  • 2
    "type: 'image/jpeg'" - what if it is a png image OR if you do not know the image extension in advance?
    – Jasper
    Aug 18, 2014 at 10:17
  • 1
    Create Uint8Array at first is better than create a Array and then convert to Uint8Array.
    – cuixiping
    May 26, 2015 at 22:21
55

This one works in iOS and Safari.

You need to use Stoive's ArrayBuffer solution but you can't use BlobBuilder, as vava720 indicates, so here's the mashup of both.

function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], { type: 'image/jpeg' });
}
2
  • 11
    Great! But you could still keep the mime string dynamic, like in Stoive's solution, I suppose? // separate out the mime component var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0] Sep 23, 2013 at 11:09
  • What is with the fallback for iOS6 with webkit prefix? How do you handle this?
    – Michael
    Mar 20, 2014 at 22:52
35

Firefox has canvas.toBlob() and canvas.mozGetAsFile() methods.

But other browsers do not.

We can get dataurl from canvas and then convert dataurl to blob object.

Here is my dataURLtoBlob() function. It's very short.

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

Use this function with FormData to handle your canvas or dataurl.

For example:

var dataurl = canvas.toDataURL('image/jpeg',0.8);
var blob = dataURLtoBlob(dataurl);
var fd = new FormData();
fd.append("myFile", blob, "thumb.jpg");

Also, you can create a HTMLCanvasElement.prototype.toBlob method for non gecko engine browser.

if(!HTMLCanvasElement.prototype.toBlob){
    HTMLCanvasElement.prototype.toBlob = function(callback, type, encoderOptions){
        var dataurl = this.toDataURL(type, encoderOptions);
        var bstr = atob(dataurl.split(',')[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        var blob = new Blob([u8arr], {type: type});
        callback.call(this, blob);
    };
}

Now canvas.toBlob() works for all modern browsers not only Firefox. For example:

canvas.toBlob(
    function(blob){
        var fd = new FormData();
        fd.append("myFile", blob, "thumb.jpg");
        //continue do something...
    },
    'image/jpeg',
    0.8
);
2
  • 1
    The polyfill for canvas.toBlob mentioned here is the correct way to handle this issue IMHO. Jun 10, 2015 at 12:37
  • 2
    I would like to emphasize the last thing in this post: "Now canvas.toBlob() works for all modern browsers." Oct 13, 2017 at 13:11
34

My preferred way is canvas.toBlob()

But anyhow here is yet another way to convert base64 to a blob using fetch.

const url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

fetch(url)
.then(res => res.blob())
.then(blob => {
  const fd = new FormData()
  fd.append('image', blob, 'filename')
  
  console.log(blob)

  // Upload
  // fetch('upload', { method: 'POST', body: fd })
})

5
  • 1
    what is fetch and how is it relevant? Nov 28, 2016 at 17:33
  • Fetch is a modern ajax method that you can use instead of XMLHttpRequest since data url is just a url, You can use ajax to fetch that resource and you got yourself an option to decide if you want it as blob, arraybuffer or text
    – Endless
    Nov 28, 2016 at 17:49
  • 1
    @Endless 'fetch()' a local base64 string... a really clever hack! Mar 6, 2017 at 21:18
  • 1
    Keep in mind that blob: and data: are not universally supported by all fetch implementations. We use this approach, since we know we will only deal with mobile browsers (WebKit), but Edge for instance, do no support itt: developer.mozilla.org/en-US/docs/Web/API/…
    – oligofren
    Apr 11, 2019 at 6:39
20

Thanks to @Stoive and @vava720 I combined the two in this way, avoiding to use the deprecated BlobBuilder and ArrayBuffer

function dataURItoBlob(dataURI) {
    'use strict'
    var byteString, 
        mimestring 

    if(dataURI.split(',')[0].indexOf('base64') !== -1 ) {
        byteString = atob(dataURI.split(',')[1])
    } else {
        byteString = decodeURI(dataURI.split(',')[1])
    }

    mimestring = dataURI.split(',')[0].split(':')[1].split(';')[0]

    var content = new Array();
    for (var i = 0; i < byteString.length; i++) {
        content[i] = byteString.charCodeAt(i)
    }

    return new Blob([new Uint8Array(content)], {type: mimestring});
}
0
12

The evolving standard looks to be canvas.toBlob() not canvas.getAsFile() as Mozilla hazarded to guess.

I don't see any browser yet supporting it :(

Thanks for this great thread!

Also, anyone trying the accepted answer should be careful with BlobBuilder as I'm finding support to be limited (and namespaced):

    var bb;
    try {
        bb = new BlobBuilder();
    } catch(e) {
        try {
            bb = new WebKitBlobBuilder();
        } catch(e) {
            bb = new MozBlobBuilder();
        }
    }

Were you using another library's polyfill for BlobBuilder?

4
  • I was using Chrome with no polyfills, and don't recall coming across namespacing. I eagerly anticipate canvas.toBlob() - it seems much more appropriate than getAsFile.
    – Stoive
    Jun 28, 2011 at 0:45
  • 1
    BlobBuilder seem to be deprecated in favor of Blob
    – sandstrom
    Oct 10, 2012 at 12:57
  • BlobBuilder is deprecated and this pattern is awful. Better would be : window.BlobBuilder = (window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder); the nested try catches are really ugly and what happens if none of the builders are available? Sep 12, 2013 at 18:05
  • How is this awful? If an exception is thrown and 1) BlobBuilder doesn't exist then nothing happens and the next block is executed. 2) If it does exist, but an exception is thrown then it is deprecated and shouldn't be used anyway, so it continues into the next try block. Ideally you would check if Blob is supported first, and even before this check for toBlob support
    – TaylorMac
    Feb 14, 2014 at 19:33
6
var BlobBuilder = (window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder);

can be used without the try catch.

Thankx to check_ca. Great work.

1
  • 1
    This will still throw an error if the browser supports the deprecated BlobBuilder. The browser will use the old method if it supports it, even if it supports the new method. This is not desired, see Chris Bosco's approach below
    – TaylorMac
    Feb 14, 2014 at 19:30
6

Here is an ES6 version of Stoive's answer:

export class ImageDataConverter {
  constructor(dataURI) {
    this.dataURI = dataURI;
  }

  getByteString() {
    let byteString;
    if (this.dataURI.split(',')[0].indexOf('base64') >= 0) {
      byteString = atob(this.dataURI.split(',')[1]);
    } else {
      byteString = decodeURI(this.dataURI.split(',')[1]);
    }
    return byteString;
  }

  getMimeString() {
    return this.dataURI.split(',')[0].split(':')[1].split(';')[0];
  }

  convertToTypedArray() {
    let byteString = this.getByteString();
    let ia = new Uint8Array(byteString.length);
    for (let i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    return ia;
  }

  dataURItoBlob() {
    let mimeString = this.getMimeString();
    let intArray = this.convertToTypedArray();
    return new Blob([intArray], {type: mimeString});
  }
}

Usage:

const dataURL = canvas.toDataURL('image/jpeg', 0.5);
const blob = new ImageDataConverter(dataURL).dataURItoBlob();
let fd = new FormData(document.forms[0]);
fd.append("canvasImage", blob);
5

The original answer by Stoive is easily fixable by changing the last line to accommodate Blob:

function dataURItoBlob (dataURI) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(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
    return new Blob([ab],{type: mimeString});
}
5

Thanks! @steovi for this solution.

I have added support to ES6 version and changed from unescape to dataURI(unescape is deprecated).

converterDataURItoBlob(dataURI) {
    let byteString;
    let mimeString;
    let ia;

    if (dataURI.split(',')[0].indexOf('base64') >= 0) {
      byteString = atob(dataURI.split(',')[1]);
    } else {
      byteString = encodeURI(dataURI.split(',')[1]);
    }
    // separate out the mime component
    mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], {type:mimeString});
}
1
  • For anyone getting the deprecation warning on atob() - It's deprecated on node.js, you can use Buffer.from() now. Not deprecated in-browser, to hide the warning just use window.atob() Aug 23, 2022 at 14:38
1

make it simple :D

function dataURItoBlob(dataURI,mime) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs

    var byteString = window.atob(dataURI);

    // separate out the mime component


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

    // write the ArrayBuffer to a blob, and you're done
    var blob = new Blob([ia], { type: mime });

    return blob;
}
-2

toDataURL gives you a string and you can put that string to a hidden input.

2
  • 1
    Could you please give an example? I don't wan't to upload a base64 string (which is what doing <input type=hidden value="data:..." /> would do), I want to upload the file data (like what <input type="file" /> does, except you're not allowed to set the value property on these).
    – Stoive
    Feb 24, 2011 at 3:11
  • This should be a comment rather than an answer. Please elaborate the answer with proper explanation. @Cat Chen
    – Lucky
    Mar 30, 2015 at 8:31
-8

I had exactly the same problem as Ravinder Payal, and I've found the answer. Try this:

var dataURL = canvas.toDataURL("image/jpeg");

var name = "image.jpg";
var parseFile = new Parse.File(name, {base64: dataURL.substring(23)});
2
  • 3
    Are you really suggesting to use Parse.com ? You should mention that your answer require dependencies ! Jul 7, 2016 at 14:44
  • 3
    WTF ? Why any one will upload base64 code of image to PARSE server and then download?When we can directly upload base64 on our servers and main thing is that it takes same data to upload base64 string or image file. And if you just want to alow user to download the image , you can use this window.open(canvas.toDataURL("image/jpeg")) Jul 19, 2016 at 18:52

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.