Я должен создать загрузчик изображений для будущего проекта (без флэш-памяти, IE10 +, FF7 + и т. Д.), Который выполняет изменение размера / преобразование / обрезку изображения на стороне клиента, а не на сервере.

Поэтому я создал интерфейс javascript, в котором пользователь может «выгружать» свои файлы и получать размеры / обрезки в браузере напрямую, даже не обращаясь к серверу. Производительность в порядке, не так хорошо, но это работает.

Конечный результат - это массив элементов canvas. Пользователь может редактировать / обрезать изображения после их изменения размера, поэтому я сохраняю их как холст вместо преобразования их в формат JPEG. (Что ухудшило бы начальную производительность)

Теперь это работает нормально, но я не знаю, как лучше всего загрузить готовые элементы canvas на сервер. (Использование универсального обработчика asp.net 4 на сервере)

Я попытался создать объект json из всех элементов, содержащих dataurl каждого холста.

Проблема в том, что когда я получаю 10-40 изображений, браузер начинает зависать при создании dataurls, особенно для изображений размером более 2 мегабайт.

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

Также преобразование их в объект json (я использую json2.js) обычно приводит к сбою в работе моего браузера. (FF7)

Мой объект

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

Процедура загрузки

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

Как лучше всего отправить элементы canvas на сервер?

Должен ли я отправить их все сразу или по одному?