Preciso criar um carregador de imagens para um projeto futuro (sem flash, IE10 +, FF7 + etc.) que redimensione / converta / recorte imagens no lado do cliente e não no servido

ntão criei uma interface javascript em que o usuário pode 'enviar' seus arquivos e redimensionar / cortar diretamente no navegador, sem nunca entrar em contato com o servidor. O desempenho está bom, não é tão bom, mas funciona.

O resultado final é uma matriz de elementos da tela. O usuário pode editar / cortar as imagens depois que elas são redimensionadas, então eu as mantenho como tela em vez de convertê-las em jpeg. (O que pioraria o desempenho inicial)

Agora, isso funciona bem, mas não sei qual é a melhor maneira de realmente fazer upload dos elementos de tela finalizados no servidor agora. (Usando um manipulador genérico do asp.net 4 no servidor)

Tentei criar um objeto json a partir de todos os elementos que contêm o dataurl de cada tel

O problema é que, quando eu tenho 10 a 40 fotos, o navegador começa a congelar ao criar os dados, especialmente para imagens maiores que 2 megabyte

            //images = array of UploadImage
            for (var i = 0; i < images.length; i++) {
                var data = document.getElementById('cv_' + i).toDataURL('image/jpg');
                images[i].data = data.substr(data.indexOf('base64') + 7);
            }

Também convertê-los em um objeto json (estou usando json2.js) geralmente trava meu navegador. (FF7)

My object

    var UploadImage = function (pFileName, pName, pDescription) {
        this.FileName = pFileName;
        this.Name = pName;
        this.Description = pDescription;
        this.data = null;
    }

A rotina de upload

            //images = array of UploadImage
            for (var i = 0; i < 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
            });

ual seria a melhor maneira de enviar os elementos da tela para o servido

Devo enviar todos de uma vez ou um por um?