POSTing base64 data JavaScript/jQuery

Question

I am working on a website that allows users to edit photos (in-browser) and then upload them. To edit the images in-browser, I use some JavaScript libraries that work with images in base64. As a result, to POST the image to my server, a simple form with a file input cannot be used. The value of a hidden input is set to a base64 string of the edited image, and that is POSTed. Please see the following, short example.

http://pastebin.com/PrfWaS3D

Obviously, this is very much stripped down, but it does contain the problem I'm running into. In POSTing a 3MB animated GIF, it took 6.5 minutes. During which, my computer was almost completely frozen/unresponsive. (Note: This works perfectly for small images, though)

It might be an OS/browser issue, (latest Google Chrome on Ubuntu) but I doubt it. If I put that file input inside the form, and remove base64-ing of data, (ie - a standard POSTing of a file) it goes in about one second.

Compare 6.5 minutes to 1 second. I have to be doing something wrong. What am I doing wrong here? What should I be doing instead? I'm fairly new to web development, so I'm a little bit in the dark. I am aware that base64 does incur something like a 1.3x size increase, but obviously the upload time here is not scaling with 1.3x. I have done a little bit of console.logging, and

var base64 = reader.result;

takes about a second. So I do not think that the bottleneck is there. The bottleneck has to be in the uploading. But why? Why is a form file input so much faster than a form hidden input with base64?

I apologize for my long winded post, but again, I am new to web development, and don't really understand my problem, so it's hard to be concise while getting all the information across.

Thanks

Answer 1

Since you're using somewhat modern JS API anyway, it might be better to use:

• URL.createObjectURL() to create a URL from a Blob (much faster and inspectable than Data URLs)
• btoa() to base64 encode a string (not necessary anymore)
• FormData to create a POST request
• XHR2 to send it to the server (includes progress even!)

So something like this:

1. Get file:
   file = input.files[0]
2. Convert to typed array, do magic, convert back to Blob:
   blob = <magic here>
3. Create POST:
   fd = new FormData; fd.append('file', blob, 'image.png');
4. Upload:
   xhr = new XMLHttpRequest; ... xhr.send(fd);

Answer 2

 <form action="1.php" method="post">
     <input type="text" id="txt" name="txt">
     <input type="submit" value="submit" >
 </form>


function convertToDataURLviaCanvas(url, callback, outputFormat){
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
        var canvas = document.createElement('CANVAS');
        var ctx = canvas.getContext('2d');
        var dataURL;
        canvas.height = this.height;
        canvas.width = this.width;
        ctx.drawImage(this, 0, 0);
        dataURL = canvas.toDataURL(outputFormat);
        callback(dataURL);
        canvas = null; 
    };
    img.src = url;
}
convertToDataURLviaCanvas('1.jpg', function(base64Img){
    console.log(base64Img);
    document.getElementById('txt').value= base64Img;
});

1.php

echo '<img src="'.$_POST['txt'].'" />';