javascript - How to upload/POST multiple canvas elements -

i have create image uploader future project (no flash, ie10+, ff7+ etc.) image resizing/converting/cropping on clientside , not on server.

so made javascript interface user can 'upload' files , resized/cropped in browser directly, without ever contacting server. performance ok, not good, works.

the endresult array of canvas elements. user can edit/crop images after got resized, keep them canvas instead of converting them jpeg. (which worsen initial performance)

now works fine, don't know what's best way upload finished canvas elements server now. (using asp.net 4 generic handler on server)

i have tried creating json object elements containing dataurl of each canvas.

the problem is, when got 10-40 pictures, browser starts freezing when creating dataurls, images larger 2 megabyte.

            //images = array of uploadimage             (var = 0; < images.length; i++) {                 var data = document.getelementbyid('cv_' + i).todataurl('image/jpg');                 images[i].data = data.substr(data.indexof('base64') + 7);             } 

also converting them json object (i using json2.js) crashes browser. (ff7)

my object

    var uploadimage = function (pfilename, pname, pdescription) {         this.filename = pfilename;         this.name = pname;         this.description = pdescription;         this.data = null;     } 

the upload routine

            //images = array of uploadimage             (var = 0; < images.length; i++) {                 var data = document.getelementbyid('cv_' + i).todataurl('image/jpg');                 images[i].data = data.substr(data.indexof('base64') + 7);             }              var xhr, provider;             xhr = jquery.ajaxsettings.xhr();             if (xhr.upload) {                 xhr.upload.addeventlistener('progress', function (e) {                     console.log(math.round((e.loaded * 100) / e.total) + '% done');                 }, false);             }             provider = function () {                 return xhr;             };             var ddd = json.stringify(images); //usually crash here             $.ajax({                 type: 'post',                 url: 'upload.ashx',                 xhr: provider,                 datatype: 'json',                 success: function (data) {                     alert('ajax success: data = ' + data);                 },                 error: function () {                     alert('ajax error');                 },                 data: ddd             }); 

what best way send canvas elements server?

should send them @ once or 1 one?

uploading files 1 one better. requires less memory , 1 file ready upload, upload can started instead of waiting while files prepared.

use formdata send files. allows upload files in binary format instead of base64 encoded.

var formdata = new formdata; 

if firefox use canvas.mozgetasfile('image.jpg') instead of canvas.todataurl(). allow avoid unnecessary conversion base64 binary.

var file = canvas.mozgetasfile('image.jpg'); formdata.append(file); 

in chrome use blobbuilder convert base64 blob (see datauritoblob function

accepted after playing around few things, managed figure out myself.

first of all, convert datauri blob:

//added quick reference function datauritoblob(datauri) {     // convert base64/urlencoded data component raw binary data held in string     var bytestring;     if (datauri.split(',')[0].indexof('base64') >= 0)         bytestring = atob(datauri.split(',')[1]);     else         bytestring = unescape(datauri.split(',')[1]);      // separate out mime component     var mimestring = datauri.split(',')[0].split(':')[1].split(';')[0];      // write bytes of string typed array     var ia = new uint8array(bytestring.length);     (var = 0; < bytestring.length; i++) {         ia[i] = bytestring.charcodeat(i);     }      return new blob([ia], {type:mimestring}); } 

from this question):

var blob = datauritoblob(canvas.todataurl('image/jpg')); formdata.append(blob); 

and send formdata object. i'm not sure how in jquery, plain xhr object so:

var xhr = new xmlhttprequest; xhr.open('post', 'upload.ashx', false); xhr.send(formdata); 

on server can files files collection:

context.request.files[0].saveas(...);