Javascript 如何上载/发布多个画布元素

我必须为将来的项目（无flash、IE10+、FF7+等）创建一个图像上传程序，该项目在客户端而不是服务器上进行图像大小调整/转换/裁剪

因此，我制作了一个javascript界面，用户可以直接“上传”他们的文件并在浏览器中进行大小调整/裁剪，而无需联系服务器。性能还可以，不是很好，但是很有效

最终结果是画布元素的数组。用户可以在图像调整大小后编辑/裁剪图像，因此我将它们保留为画布，而不是将其转换为jpeg。（这将恶化初始性能）

现在这很好，但我不知道现在将完成的画布元素上传到服务器的最佳方式是什么。（在服务器上使用asp.net 4通用处理程序）

我尝试从包含每个画布的dataurl的所有元素创建json对象

问题是，当我得到10-40张图片时，浏览器在创建数据URL时开始冻结，特别是对于大于2MB的图片

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

上载例程

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

//images=上传图像的数组
对于（var i=0；i
var file = canvas.mozGetAsFile('image.jpg');
formData.append(file);

在Chrome中，使用BlobBuilder将base64转换为blob（请参见
dataURItoBlob
函数

接受
在玩弄了一些东西之后，我自己设法弄明白了这一点

首先，这将把dataURI转换为Blob：

//added for quick reference
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});
}

然后发送
formData
对象。我不确定如何在jQuery中执行此操作，但对于普通xhr对象，它是这样的：

var xhr = new XMLHttpRequest;
xhr.open('POST', 'upload.ashx', false);
xhr.send(formData);

在服务器上，您可以从文件集合中获取文件：

context.Request.Files[0].SaveAs(...);

这是一个非常有趣的问题。不确定为什么2次没有任何评论的投票被否决，+1为什么这个问题在世界上被否决？生成数据url并一次发送一个。这将减少内存使用。它还允许您显示进度（不支持xhr2）。另一个好处是，服务器逻辑将稍微容易一些，服务器上的内存使用将更少。
var xhr = new XMLHttpRequest;
xhr.open('POST', 'upload.ashx', false);
xhr.send(formData);

context.Request.Files[0].SaveAs(...);