asked on

How to re-construct email with embedded image from gmail api php

{
 "id": "169535ddb258a889",
 "threadId": "1695350fe63f9f3a",
 "labelIds": [
  "IMPORTANT",
  "CATEGORY_PERSONAL",
  "INBOX"
 ],
 "snippet": "this is a test On Wed, 6 Mar 2019 at 14:03, &lt;alextestemail21@gmail.com&gt; wrote: Hello ( user ) Thank you for filling in our form, if you have any questions please feel free to contact me on this",
 "historyId": "20762",
 "internalDate": "1551881841000",
 "payload": {
  "partId": "",
  "mimeType": "multipart/related",
  "filename": "",
  "headers": [
   {
    "name": "Delivered-To",
    "value": "alextestemail21@gmail.com"
   },
   {
    "name": "Received",
    "value": "by 2002:ab0:7509:0:0:0:0:0 with SMTP id m9csp5885537uap;        Wed, 6 Mar 2019 06:17:34 -0800 (PST)"
   },
   {
    "name": "X-Received",
    "value": "by 2002:a2e:12da:: with SMTP id 87mr2575789ljs.181.1551881853887;        Wed, 06 Mar 2019 06:17:33 -0800 (PST)"
   },
   {
    "name": "ARC-Seal",
    "value": "i=1; a=rsa-sha256; t=1551881853; cv=none;        d=google.com; s=arc-20160816;        b=q7Ps0TS3Z/E88kwwhmJyMzyi6CXgW8iAgOFF68UPoBHDBW13fcl4G83CvLXyxteSG3         k4Js2xpLxF5tw4XIZQIODYNfvzx1wjs3vk8J9XYE58jzjujQRiM9rOZGSGB9Cn3n8ifP         CfLRPwHsv6KjReJ6b6bCABD14DkbX8VzQ7MZ9YWjj0x1YtLW2iAjCxfcBSwR8CHeJ3V7         VUfF8dPsMBGG5Wrwbp3lyDak6zZS7JbysKtmSIhgBoVbUvSU6UFlB3bo/Rfffex+zQFQ         HkGjnp0OxBsEKRb4MGlTYI2QIrS/BFbpMsHLyBizAz4Sgt4ZW88MTlc57st8WBcjmvPF         avsg=="
   },
   {
    "name": "ARC-Message-Signature",
    "value": "i=1; a=rsa-sha256; c=relaxed/relaxed; d=google.com; s=arc-20160816;        h=to:subject:message-id:date:from:in-reply-to:references:mime-version         :dkim-signature;        bh=hAxWFmSCoYhc0Jx33Hpql7CUiO1MMvBo6G8kn2xj93s=;        b=QftxbiQItUTZTvNKYQuR8JIc9NpxLU2vXhU509TCPmV8Ev/z6Eks0/Faz83epX9t+Y         FRf/yxG9ZxJdikPrGbC/S2iuz/H7dA/Ey7ILSvTMOjpv3VsEoYv6D9CjKyPn3RgB9+j2         5lzDTGZUK9k0DAiBNLxgiGFwNHvJ4WV0wCpS+SAu6SRBhjjf7bs5HJ8VHcWVHo0NFYFf         r40CujHd5TPWMHQ/EdOtlRRW4RLSTmjoikpAe0rvTf2FxOYPAleHybzGt6dDBnBwKTvN         qZ+uoELoSUSNSeEsfwTQ4f1E9+YtGmfKd27XwPbGRq4En5FXGYyt19bTo1nFiQtWlIEe         5tDQ=="
   },
   {
    "name": "ARC-Authentication-Results",
    "value": "i=1; mx.google.com;       dkim=pass header.i=@zymplify.com header.s=google header.b=\"TFkt0Sz/\";       spf=pass (google.com: domain of alex@zymplify.com designates 209.85.220.41 as permitted sender) smtp.mailfrom=alex@zymplify.com;       dmarc=pass (p=NONE sp=NONE dis=NONE) header.from=zymplify.com"
   },
   {
    "name": "Return-Path",
    "value": "\u003calex@zymplify.com\u003e"
   },
   {
    "name": "Received",
    "value": "from mail-sor-f41.google.com (mail-sor-f41.google.com. [209.85.220.41])        by mx.google.com with SMTPS id f13sor566844lfh.22.2019.03.06.06.17.33        for \u003calextestemail21@gmail.com\u003e        (Google Transport Security);        Wed, 06 Mar 2019 06:17:33 -0800 (PST)"
   },
   {
    "name": "Received-SPF",
    "value": "pass (google.com: domain of alex@zymplify.com designates 209.85.220.41 as permitted sender) client-ip=209.85.220.41;"
   },
   {
    "name": "Authentication-Results",
    "value": "mx.google.com;       dkim=pass header.i=@zymplify.com header.s=google header.b=\"TFkt0Sz/\";       spf=pass (google.com: domain of alex@zymplify.com designates 209.85.220.41 as permitted sender) smtp.mailfrom=alex@zymplify.com;       dmarc=pass (p=NONE sp=NONE dis=NONE) header.from=zymplify.com"
   },
   {
    "name": "DKIM-Signature",
    "value": "v=1; a=rsa-sha256; c=relaxed/relaxed;        d=zymplify.com; s=google;        h=mime-version:references:in-reply-to:from:date:message-id:subject:to;        bh=hAxWFmSCoYhc0Jx33Hpql7CUiO1MMvBo6G8kn2xj93s=;        b=TFkt0Sz/OAPMU3a4/4UU3Cj8EaBXQoH67zuwVkGwE38ZqWDsz+Ajza3OrSNaUc9aXa         ANI38Sh5Ipu+DNvSCrPolg6BA86R7ktHzsB9fnAQ/4ko+kfD34mWzn4JVX/OoTIwLqwQ         4/UkB25evbde81u8OxtBI6CTcom7ST4nE9peE="
   },
   {
    "name": "X-Google-DKIM-Signature",
    "value": "v=1; a=rsa-sha256; c=relaxed/relaxed;        d=1e100.net; s=20161025;        h=x-gm-message-state:mime-version:references:in-reply-to:from:date         :message-id:subject:to;        bh=hAxWFmSCoYhc0Jx33Hpql7CUiO1MMvBo6G8kn2xj93s=;        b=VCXNlBApMG3Z+dkSOUhhznZ/riCzkDVSemwqchUwmrxlMrUnwIzjo6QLBjHqJ6r5q7         yIQdyUqmHqS81zk6Z6rGiP0YmznoVrl1Sw8mT7EqPu8/5xcUcw1BQzgzNheqZtrYn7kA         BcknsqGF1Yad20ap/FrPlv8UIQpK/nbVhqRCtVjmFY9+AUI1LuF7tdptO764oedsGUUc         wYXPPseyAKLyYfO9d/5v7RGyXUIxxn/aVOL/j7dSr7cj1yv0jBPOD4K9Nhnkop0tygn0         lBYLVKhKGleoh3Vgh68MH8GsCgNBo5v31Q5xzuQgP/i6Trwk24EOmPPXDieYnzK47Ec3         +3FQ=="
   },
   {
    "name": "X-Gm-Message-State",
    "value": "APjAAAUoRpBiR9JiQhIF1XH7vNKdMBwwcOUxLn7c/iaqq9hQtm2VzKNK mPlFF0qJhl8jF2VNs2CpFpyBingalRaVvVtMu6uu3+W/"
   },
   {
    "name": "X-Google-Smtp-Source",
    "value": "APXvYqxufl7nhViq9eHYgETABFepZVVkxTgmMjrCCemQ4pJ4GAb5bFpEOf0GLRoXbo0wtV95qQmOZSHtm4xcsLowkh0="
   },
   {
    "name": "X-Received",
    "value": "by 2002:ac2:5607:: with SMTP id v7mr3941717lfd.50.1551881852736; Wed, 06 Mar 2019 06:17:32 -0800 (PST)"
   },
   {
    "name": "MIME-Version",
    "value": "1.0"
   },
   {
    "name": "References",
    "value": "\u003cCAKg3f8xepKNeKda9fZ4h1s==7tTvbemGWbhdK8U6m=Hf6Dn5=w@mail.gmail.com\u003e"
   },
   {
    "name": "In-Reply-To",
    "value": "\u003cCAKg3f8xepKNeKda9fZ4h1s==7tTvbemGWbhdK8U6m=Hf6Dn5=w@mail.gmail.com\u003e"
   },
   {
    "name": "From",
    "value": "Alex Lord \u003calex@zymplify.com\u003e"
   },
   {
    "name": "Date",
    "value": "Wed, 6 Mar 2019 14:17:21 +0000"
   },
   {
    "name": "Message-ID",
    "value": "\u003cCADTLcExuOfiKEJ-B1U2+vhpiO30PwX1CerVv7M=5SKOTw=Vt0A@mail.gmail.com\u003e"
   },
   {
    "name": "Subject",
    "value": "Re: test"
   },
   {
    "name": "To",
    "value": "alex lord \u003calextestemail21@gmail.com\u003e"
   },
   {
    "name": "Content-Type",
    "value": "multipart/related; boundary=\"00000000000091106b05836da6ef\""
   }
  ],
  "body": {
   "size": 0
  },
  "parts": [
   {
    "partId": "0",
    "mimeType": "multipart/alternative",
    "filename": "",
    "headers": [
     {
      "name": "Content-Type",
      "value": "multipart/alternative; boundary=\"00000000000091106905836da6ee\""
     }
    ],
    "body": {
     "size": 0
    },
    "parts": [
     {
      "partId": "0.0",
      "mimeType": "text/plain",
      "filename": "",
      "headers": [
       {
        "name": "Content-Type",
        "value": "text/plain; charset=\"UTF-8\""
       }
      ],
      "body": {
       "size": 344,
       "data": "dGhpcyBpcyBhIHRlc3QNCg0KW2ltYWdlOiBTY3JlZW4gU2hvdCAyMDE5LTAzLTA0IGF0IDExLjM2LjQwLnBuZ10NCg0KT24gV2VkLCA2IE1hciAyMDE5IGF0IDE0OjAzLCA8YWxleHRlc3RlbWFpbDIxQGdtYWlsLmNvbT4gd3JvdGU6DQoNCj4gSGVsbG8gKCB1c2VyICkNCj4NCj4gVGhhbmsgeW91IGZvciBmaWxsaW5nIGluIG91ciBmb3JtLCBpZiB5b3UgaGF2ZSBhbnkgcXVlc3Rpb25zIHBsZWFzZSBmZWVsDQo-IGZyZWUgdG8gY29udGFjdCBtZSBvbiB0aGlzIGVtYWlsLg0KPg0KPiBiZXN0IHJlZ2FyZHMNCj4NCj4gYWxleA0KPg0KPiBbaW1hZ2U6IEltYWdlIHJlc3VsdCBmb3IgenltcGxpZnldDQo-DQo="
      }
     },
     {
      "partId": "0.1",
      "mimeType": "text/html",
      "filename": "",
      "headers": [
       {
        "name": "Content-Type",
        "value": "text/html; charset=\"UTF-8\""
       },
       {
        "name": "Content-Transfer-Encoding",
        "value": "quoted-printable"
       }
      ],
      "body": {
       "size": 786,
       "data": "PGRpdiBkaXI9Imx0ciI-dGhpcyBpcyBhIHRlc3Q8ZGl2Pjxicj48L2Rpdj48ZGl2PjxkaXY-PGltZyBzcmM9ImNpZDppaV9qc3hhZGlnZjAiIGFsdD0iU2NyZWVuIFNob3QgMjAxOS0wMy0wNCBhdCAxMS4zNi40MC5wbmciIHdpZHRoPSIyMjQiIGhlaWdodD0iMTQ5IiBzdHlsZT0ibWFyZ2luLXJpZ2h0OiAwcHg7Ij48YnI-PC9kaXY-PC9kaXY-PC9kaXY-PGJyPjxkaXYgY2xhc3M9ImdtYWlsX3F1b3RlIj48ZGl2IGRpcj0ibHRyIiBjbGFzcz0iZ21haWxfYXR0ciI-T24gV2VkLCA2IE1hciAyMDE5IGF0IDE0OjAzLCAmbHQ7PGEgaHJlZj0ibWFpbHRvOmFsZXh0ZXN0ZW1haWwyMUBnbWFpbC5jb20iPmFsZXh0ZXN0ZW1haWwyMUBnbWFpbC5jb208L2E-Jmd0OyB3cm90ZTo8YnI-PC9kaXY-PGJsb2NrcXVvdGUgY2xhc3M9ImdtYWlsX3F1b3RlIiBzdHlsZT0ibWFyZ2luOjBweCAwcHggMHB4IDAuOGV4O2JvcmRlci1sZWZ0OjFweCBzb2xpZCByZ2IoMjA0LDIwNCwyMDQpO3BhZGRpbmctbGVmdDoxZXgiPjxwPkhlbGxvICggdXNlciApPC9wPg0KDQoNCg0KDQo8cD5UaGFuayB5b3UgZm9yIGZpbGxpbmcgaW4gb3VyIGZvcm0sIGlmIHlvdSBoYXZlIGFueSBxdWVzdGlvbnMgcGxlYXNlIGZlZWwgZnJlZSB0byBjb250YWN0IG1lIG9uIHRoaXMgZW1haWwuPC9wPg0KDQoNCg0KDQo8cD5iZXN0IHJlZ2FyZHPCoDwvcD4NCg0KDQoNCg0KPHA-YWxleDwvcD4NCg0KDQoNCg0KPHA-PGltZyBhbHQ9IkltYWdlIHJlc3VsdCBmb3IgenltcGxpZnkiPjwvcD4NCg0KPC9ibG9ja3F1b3RlPjwvZGl2Pg0K"
      }
     }
    ]
   },
   {
    "partId": "1",
    "mimeType": "image/png",
    "filename": "Screen Shot 2019-03-04 at 11.36.40.png",
    "headers": [
     {
      "name": "Content-Type",
      "value": "image/png; name=\"Screen Shot 2019-03-04 at 11.36.40.png\""
     },
     {
      "name": "Content-Disposition",
      "value": "inline; filename=\"Screen Shot 2019-03-04 at 11.36.40.png\""
     },
     {
      "name": "Content-Transfer-Encoding",
      "value": "base64"
     },
     {
      "name": "Content-ID",
      "value": "\u003cii_jsxadigf0\u003e"
     },
     {
      "name": "X-Attachment-Id",
      "value": "ii_jsxadigf0"
     }
    ],
    "body": {
     "attachmentId": "ANGjdJ8SdyOXE6WPKVcSUHjE71aUD-IYXvkRSUfM9-PWhyupggBUInRxKMmy2AAPyaQ6vfrOiAhHo1EjhYc0ZHN4fU9HSbDXueoVZSasU_bGOfFvtNoyYmMNcWvE5DoOZj_mImrh_gRWpKA0Dbh-h3BkaiqmNQZ_vRSMPDDwfgMahkSZBF1ryFZ8RANAdnuZeh2aF9hLfjTyw1hEMNV6sTieeGjaPVpj4vVjsTfN4gjRBec4upquUcx35Fgs_E1a--J_GqT3AHXTBczT5twBoMdcLvKEh-1G5LFkEYGj1ILUsZCVCb0Mzw6vD8MF1U7H0HLAikvcGMoKEamHaZr_zEvfUQ9R_PF7BX626uqvvjCvLbT7bA53Tp3SwCGvAC7o89H7IRAY0C0gFqII-xKI",
     "size": 75401
    }
   }
  ]
 },
 "sizeEstimate": 109544
}

Open in new window

this is the information i have i am using gmail api

this is a test email with a embedded image,

how do i display this on the user side in php, i have tried by decoding the 64bit encode but it comes up unreadable with no image

and i am stuck on how to re-construct the email with the image on the user side.

Chris Stanyon

From the look of your data, the image is an attachment, so you'd need to retrieve the attachment with a separate call to Users.messages.attachments, passing in the attachmentId. This would return the data that you'd need to Base64 decode to get at the image itself

Alex Lord

ASKER

I assumed that but the attachment Data is widely vast so that cannot be it

David Favor

You can also simply enable IMAP in Gmail + fetch the exact message, rather than attempting to reconstruct the message using the API.

Alex Lord

ASKER

Hey David

can you explain further ?

Chris Stanyon

I assumed that but the attachment Data is widely vast so that cannot be it

What makes you say that? The attachmentId is what it is, so that's what you need to use.

Alex Lord

ASKER

i took pass the attachmentid in and the data returned is over 100k plus chars .
this is a simple small embedded image send from gmail, all i am doing is using the api to get that email and display it in html

Chris Stanyon

According to the data you posted, the image size is about 75k

"body": {
"attachmentId": "...",
"size": 75401

So yeah - the retrieved data could be around the 100k mark.

As you're decoding it in PHP, you will need to perform a string replacment once you've received the attachement data (assuming you're storing the retreived info in $data)

$imageData = strtr($data, array('-' => '+', '_' => '/'));

Now Base64 decode $imageData and you'll have your image.

Alex Lord

ASKER

function gmailBodyDecode($data) {
  $data = base64_decode(str_replace(array('-', '_'), array('+', '/'), $data)); 


  //$data = imap_qprint($data);
  return($data);
}

Open in new window

like this ?

Alex Lord

ASKER

reduced it to 30k char but that still a lot for a small image

Chris Stanyon

Yep - that's it :)

Chris Stanyon

The size of the image has nothing to do with the Gmail API. That's the size the image was when it was attached to the original email. If you want it smaller, then you can potentially optimise the image before it's attached to the email (jpg compression / png optimisation etc). With JPG, the hight the compression, the lower the quality. PNG is lossless so can potentially reduce the size without losing quality. It all depends on the type of image (icons / photos etc).

Alex Lord

ASKER

Ok that is diffcuilt consdering it a drag and drop image into the gmail

how ever progress,

<img src="cid:ii_jsxerahp0" alt="Screen Shot 2019-02-26 at 11.31.08.png" width="272" height="134" style="margin-right: 0px;">

Open in new window

i got the html in now the image is broken as the src = some kind of content_id

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Alex Lord

ASKER

so back to this one

when i decode the attachment data it times out lol it like 20k long, so not sure what to do to get the inline image data