Search code examples
javascriptcanvasgoogle-photosgoogle-photos-api

Sending html canvas binary data to Google Photos API

I'm trying to upload an image from canvas to Google Photos:

Step 1: Upload binary image data

POST https://photoslibrary.googleapis.com/v1/uploads
Content-type: application/octet-stream
Authorization: Bearer OAuth2_TOKEN
X-Goog-Upload-File-Name: FILENAME
MEDIA_BINARY_DATA

My MEDIA_BINARY_DATA is

function get_binary_data_from_canvas(){
  var canvas = document.getElementById("canvas-upload");
  return canvas.toDataURL(); // <- my binary data
}

I get an uploadToken

Step 2: Create Media Item

I send a valid request with the uploadToken I obtained in the previous step.

In the response I get:

 "NOT_IMAGE: There was an error while trying to create this media item"

So what is the right way to generate the binary data from a HTML canvas?

Solution

  • canvas.toBlob will probably help you.

    https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob