14

問題なく DOM にペイントでき、ユーザーがローカルで使用できるように保存できるキャンバスがあります。

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

(注: http://eligrey.com/blog/post/ Saving-generated-files-on-the-client-side から、クロスプラットフォームのサポートのために canvas-toBlob.js を含めました)

今、私がやりたいのは、同じキャンバス要素をサーバーに送信することです。私は次のようなことができると思いました：

storCanvas.toBlob(function(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);

}

(引用: http://www.html5rocks.com/en/tutorials/file/xhr2/ )

今、私はこれがうまくいくと思っていましたが、私の PHP ページ (標準の HTML フォームを使用して POST を正常に実行できます) は、0kB の無効なファイルを取得したことを (firebug を介して) 報告します。問題はブロブへの変換にあると思いますが、正しい方法がわかりません...

4

3 に答える 3

10

ブロブについて自分で学習したときに、同じ問題に遭遇しました。問題は、次のように の中に入れるのではなく、 をblob介してそれ自体を送信することにあると思います。XMLHttpRequestFormData

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

お役に立てれば。

于 2012-12-15T04:02:53.740 に答える
-1

このモジュールは、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
});
于 2013-06-21T14:04:42.607 に答える
-2

これが欲しいかどうかわからない。しかし、canvas 要素を画像データの url に変換してからサーバーに送信してから、サーバーに書き込むのはどうでしょうか。何かのようなもの

function canvas2DataUrl(canvasElementId){
  var canvasElement = document.getElementById("canvasElementId");
  var imgData = canvasElement.toDataURL("image/png");
  return imgData;
}
于 2012-04-28T10:50:27.193 に答える