9

i' m working on a javascript client able to read a CSV which contains an image url list.

I m able to read the csv by the means of jquery-csv and to draw each image in a html5 canvas.

The next step is to apply to each image a text layer and to send the image by email using gmail api.

So my diffifulty is to find an example showing me how to take a canvas and to attach it to an email using only javascript.

Do have i to build a json according to the multipart gmail guidelines and to send it as POST body as specified?

Can you send me some example?

Alex
  • 1,515
  • 2
  • 22
  • 44

1 Answers1

13
// Get the canvas from the DOM and turn it into base64-encoded png data.
var canvas = document.getElementById("canvas");
var dataUrl = canvas.toDataURL();

// The relevant data is after 'base64,'.
var pngData = dataUrl.split('base64,')[1];

// Put the data in a regular multipart message with some text.
var mail = [
  'Content-Type: multipart/mixed; boundary="foo_bar_baz"\r\n',
  'MIME-Version: 1.0\r\n',
  'From: sender@gmail.com\r\n',
  'To: receiver@gmail.com\r\n',
  'Subject: Subject Text\r\n\r\n',

  '--foo_bar_baz\r\n',
  'Content-Type: text/plain; charset="UTF-8"\r\n',
  'MIME-Version: 1.0\r\n',
  'Content-Transfer-Encoding: 7bit\r\n\r\n',

  'The actual message text goes here\r\n\r\n',

  '--foo_bar_baz\r\n',
  'Content-Type: image/png\r\n',
  'MIME-Version: 1.0\r\n',
  'Content-Transfer-Encoding: base64\r\n',
  'Content-Disposition: attachment; filename="example.png"\r\n\r\n',

   pngData, '\r\n\r\n',

   '--foo_bar_baz--'
].join('');

// Send the mail!
$.ajax({
  type: "POST",
  url: "https://www.googleapis.com/upload/gmail/v1/users/me/messages/send?uploadType=multipart",
  contentType: "message/rfc822",
  beforeSend: function(xhr, settings) {
    xhr.setRequestHeader('Authorization','Bearer {ACCESS_TOKEN}');
  },
  data: mail
});
Tholle
  • 108,070
  • 19
  • 198
  • 189
  • it gives me this error: { "error": { "errors": [ { "domain": "global", "reason": "authError", "message": "Invalid Credentials", "locationType": "header", "location": "Authorization" } ], "code": 401, "message": "Invalid Credentials" } } on google developer console i create new client id with web application specifingn javascript location origin: http://localhost:8080 ... my project is a javascript page on a tomcat instance. The strange thing is that access token changes each time i make a request from the same app. – Alex Aug 04 '15 at 22:58
  • @Alex Authorize with the Gmail v1 scopes [here](https://developers.google.com/oauthplayground/), and try the token you get from that. That should work as a test. – Tholle Aug 05 '15 at 06:28
  • i created the test access token and sent the request from the page you suggested me. From there all works fine. If i use the same token in the javascript application it rises me the same error like in my previous comment. 401 unauthorized, invalid credentials . Is there something dealing with my Client ID creation? – Alex Aug 05 '15 at 10:13
  • 1
    Sorry... i catch it!!!... it was my stupid stupid error... too tired yesterday night to notice it. Thanks it seems to work! – Alex Aug 05 '15 at 10:31
  • Hi, what is pngData? – erdomester Sep 17 '16 at 09:47
  • @erdomester If you look at the beginning of the code snippet, you will see that it is the png image encoded to a base64 string. `var pngData = dataUrl.split('base64,')[1];` – Tholle Sep 17 '16 at 10:23
  • 1
    Oh, and 'Bearer {YOUR_API_KEY}' might be wrong as I receive Invalid Credentials error for having `xhr.setRequestHeader('Authorization', 'Bearer ' + apiKey);`. I read somewhere that here I should use the access token (which I have no idea how to get). Btw, my credentials are fine as I get do pretty much everything that's allowed by the Gmail API. – erdomester Sep 17 '16 at 10:30
  • I made it work by using `xhr.setRequestHeader('Authorization', 'Bearer ' + accesstoken);`. I'm wondering if it's possible to send an email with an attachment by using only the api key and ignoring the accesstoken? – erdomester Sep 20 '16 at 06:50
  • @erdomester from where exaclty did you get the accesstoken – sumit chauhan Feb 16 '18 at 19:46
  • It helped me a lot! I am extremely grateful! It worked perfectly, I was trying to send an email using the GMAIL API in Golang. – Eduardo Mior May 14 '21 at 17:40