Загрузить холст HTML5 в виде капли

У меня есть холст, который я могу рисовать в DOM без проблем, а также для локального использования для пользователя:

storCanvas.toBlob(function(blob) { saveAs(blob, name + ".png");});

(примечание: я включил canvas-toBlob.js для поддержки кросс-платформы, от http://eligrey.com/blog/post/saving-generated-files-on-the-client-side)

Теперь я хотел бы отправить тот же элемент canvas на сервер. Я думал, что смогу сделать что-то вроде:

storCanvas.toBlob(function(blob) {upload(blob);});

где upload (blob); является:

function upload(blobOrFile)
{
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'upload_file.php', true);
    xhr.onload = function(e) { /*uploaded*/ };

    // Listen to the upload progress.
    var progressBar = document.querySelector('progress');
    xhr.upload.onprogress = function(e) {
        if (e.lengthComputable)
        {
          progressBar.value = (e.loaded / e.total) * 100;
          progressBar.textContent = progressBar.value;
        }
    };
    xhr.send(blobOrFile);

}

(cribbed from: http://www.html5rocks.com/en/tutorials/file/xhr2/)

Теперь я подумал, что это сработает, но моя страница PHP (которую я могу сделать POST для успешного использования стандартной HTML-формы) сообщает (через firebug), что у нее есть недопустимый файл 0kB. Я предполагаю, что проблема заключается в моем преобразовании в blob, но я не уверен, как правильно это сделать...

Ответы

Ответ 1

Я столкнулся с той же проблемой, когда узнал о блобах. Я считаю, что проблема заключается в представлении blob себя через XMLHttpRequest вместо того, чтобы помещать его внутри FormData следующим образом:

canvas.toBlob(function(blob) {
  var formData = new FormData(); //this will submit as a "multipart/form-data" request
  formData.append("image_name", blob); //"image_name" is what the server will call the blob
  upload(formData); //upload the "formData", not the "blob"
});

Надеюсь, что это поможет.

Ответ 2

Не уверен, хотите ли этого. Но как насчет преобразования элемента canvas в url данных изображения, а затем отправки его на сервер, а затем записи его на сервере. Что-то вроде

function canvas2DataUrl(canvasElementId){
  var canvasElement = document.getElementById("canvasElementId");
  var imgData = canvasElement.toDataURL("image/png");
  return imgData;
}

Ответ 3

Вы можете использовать этот модуль для загрузки blob.

blobtools.js(https://github.com/extremeFE/blobtools.js)

//include blobtools.js
blobtools.uploadBlob({ // upload blob
  blob: blob,
  url: uploadUrl, // upload url
  fileName : 'paste_image.png' // upload file name
  callback: callback // callback after upload
});