GMAIL API for sending email with the application

Question

i is working on a javascript client that can read a CSV containing a list of image urls.

I can read csv using jquery-csv and draw each image in html5 canvas.

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

So my difficulty is to find an example showing how to grab a canvas and attach it to an email using only javascript.

Do I have to create json in accordance with the principles of multi-page gmail and send it as a POST body, as indicated?

Can you send me an example?

Answer 1

// 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: [e-mail] \r\n', 'To: [e-mail] \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 });