web-dev-qa-db-ja.com

クロッパーjsを使用してキャンバスをblobに変換する

cropper.jsを使用して画像をトリミングするアプリケーションを作成しました。アプリケーションは動作しており、画像はトリミングされています。その後、トリミングされた画像をブロブとしてサーバー側に送信して保存しようとしています。

cropper.jsのドキュメントに従って、canvas.toDataURLを使用してデータURLを取得するか、canvas.toBlobを使用してblobを取得し、FormDataを使用してサーバーにアップロードします。 canvas.toDataURL（）を試したところ、base64文字列を取得していますが、実際にはファイルをblobとして送信する必要があるため、canvas.toBlob（）しかし、FirefoxでUncaught TypeError: canvas.toBlob is not a functionをchromeおよびTypeError: Not enough arguments to HTMLCanvasElement.toBlob.で取得しています

誰かがこれに対するいくつかの解決策を教えてもらえますか

私のコードはこんな感じです

var canvas = $image.cropper("getCroppedCanvas", undefined);
var formData = new FormData();
formData.append('mainImage', $("#inputImage")[0].files[0]);
formData.append('croppedImage', canvas.toBlob());
javascriptjqueryhtmlimagecanvas
8
Alex Man

メソッドtoBlobは非同期であり、コールバック関数と画像タイプの2つの引数が必要です（品質にはオプションの3番目のパラメーターがあります）。

void canvas.toBlob（callback、type、encoderOptions）;

例

if (typeof canvas.toBlob !== "undefined") {
  canvas.toBlob(function(blob) {
      // send the blob to server etc.
      ...
  }, "image/jpeg", 0.75);
}
else if (typeof canvas.msToBlob !== "undefined") {
  var blob = canvas.msToBlob()
  // send blob
}
else {
  // manually convert Data-URI to Blob (if no polyfill)
}

すべてのブラウザがそれをサポートしているわけではなく（IEにはプレフィックスmsToBlobが必要であり、標準とは動作が異なります）、Chromeにはpolyfill が必要です。

Update（OPの編集、現在は削除）トリミングされた画像が大きくなる主な理由は、元の画像がJPEGであり、新しい画像がPNGであるためです。これは、toDataURLを使用して変更できます。

var uri = canvas.toDataURL("image/jpeg", 0.7);  // last=quality

手動データに渡す前に-URIをBlobに。ブラウザがtoBlob（）をサポートしているかのようにポリフィルを使用することをお勧めします。これは、data-uriをエンコードするよりも何倍も高速で、使用するメモリオーバーヘッドが少なくなります。

9
user1693593

適切な使用法： https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob

コールバックを渡し、コールバック内でblobオブジェクトを使用する必要があります。 toBlob()はblobを返しませんが、blobをパラメーターとして提供するコールバックを受け入れます。

var canvas = document.getElementById("canvas");

canvas.toBlob(function(blob) {
  var newImg = document.createElement("img"),
      url = URL.createObjectURL(blob);

  newImg.onload = function() {
    // no longer need to read the blob so it's revoked
    URL.revokeObjectURL(url);
  };

  newImg.src = url;
  document.body.appendChild(newImg);
});
5
Vijay