如何上传/ POST多个画布元素 [英] How to upload/POST multiple canvas elements

问题描述

我要创建一个图片上传为未来的项目（不闪光，IE10 +，FF7 +等），做图像缩放/转换/裁剪上的客户方，而不是在服务器上。

I have to create an image uploader for a future project (No flash, IE10+, FF7+ etc.) that does image resizing/converting/cropping on the clientside and not on the server.

所以我做了一个JavaScript接口，用户可以上传的文件，并得到调整大小/裁剪直接在浏览器中，无需在服务器曾经接触。的表现还算可以，不是很好，但它的作品。

So I made a javascript interface where the user can 'upload' their files and get resized/cropped in the browser directly, without ever contacting the server. The performance is OK, not that good, but it works.

的endresult是画布元件的阵列。用户可以编辑/裁切图像，他们得到了调整后，所以我让他们如帆布，而不是将它们转换为JPEG的。 （这将恶化的初始性能）

The endresult is an array of canvas elements. The user can edit/crop the images after they got resized, so I keep them as canvas instead of converting them to jpeg. (Which would worsen the initial performance)

现在这工作正常，但我不知道什么是真正上传完成的画布元素，现在服务器的最佳方式。 （使用服务器上的asp.net 4通用处理器）

Now this works fine, but I don't know what's the best way to actually upload the finished canvas elements to the server now. (Using a asp.net 4 generic handler on the server)

我试图从创建包含每个画布dataurl所有元素的JSON对象。

I have tried creating a json object from all elements containing the dataurl of each canvas.

现在的问题是，当我拿到10-40的图片，浏览器启动创建dataurls的时候，特别是对大于2兆字节的图像冻结。

The problem is, when I got 10-40 pictures, the browser starts freezing when creating the dataurls, especially for images that are larger than 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);
            }

也把它们转换成JSON对象（我使用json2.js）通常会崩溃我的浏览器。 （FF7）

Also converting them to a json object (I am using json2.js) usually crashes my browser. (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
            });

什么是送画布元素添加到服务器的最佳方法是什么？

What would be the best way to send the canvas elements to the server?

我应该给他们一次全部或逐个？

Should I send them all at once or one by one?

推荐答案

上传文件逐一比较好。需要更少的内存，并尽快为一个文件准备上传，上传就可以启动，而不是等待，而所有的文件将是prepared。

Uploading files one by one is better. Requires less memory and as soon as one file ready to upload, the upload can be started instead of waiting while all files will be prepared.

使用 FORMDATA 发送文件。允许上传的二进制格式文件，而不是BASE64 EN codeD。

Use FormData to send files. Allows to upload files in binary format instead of base64 encoded.

var formData = new FormData;

而不是canvas.toDataUrl

如果Firefox的使用ca​​nvas.mozGetAsFile（'image.jpg的'），（）。允许以避免的base64为二进制不必要的转换

If Firefox use canvas.mozGetAsFile('image.jpg') instead of canvas.toDataUrl(). Allow to avoid unnecessary conversion from base64 to binary.

var file = canvas.mozGetAsFile('image.jpg');
formData.append(file);

在Chrome浏览器使用BlobBuilder来base64转换成二进制大对象（请参见<α dataURItoBlob 功能href="http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata">this问题）：

In Chrome use BlobBuilder to convert base64 into blob (see dataURItoBlob function from this question):

var blob = dataURItoBlob(canvas.toDataURL('image/jpg'));
formData.append(blob);

然后发送 FORMDATA 对象。我不知道怎么做，jQuery的，但与普通的XHR对象，象这样：

And then send the formData object. I'm not sure how to do it in jQuery, but with plain xhr object it like so:

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

在服务器上，你可以从文件中收集的文件：

On server you can get files from Files collection:

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

这篇关于如何上传/ POST多个画布元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！