How to use image in Adaptive Card w/o direct URL to the image
I would like to use user's profile image from MS graph in adaptive card. I have determined the API call I need to make is as follows
https://developer.microsoft.com/en-us/graph/docs/api-reference/beta/api/profilephoto_get
In this case I would be getting image as a binary data for a profile photo, that needs to converted into a base-64 string.
But, based on adaptive cards schema document looks like we should use URL property where value should be direct URL to the image
'url string Yes The URL to the image'
How should I approach this ? If there any way to use an IMAGE in Adaptive Card w/o direct URL to the image ??
microsoft-graph adaptive-cards
asked Nov 11 '18 at 20:44
Royjad
94
add a comment |
I would like to use user's profile image from MS graph in adaptive card. I have determined the API call I need to make is as follows
https://developer.microsoft.com/en-us/graph/docs/api-reference/beta/api/profilephoto_get
In this case I would be getting image as a binary data for a profile photo, that needs to converted into a base-64 string.
But, based on adaptive cards schema document looks like we should use URL property where value should be direct URL to the image
'url string Yes The URL to the image'
How should I approach this ? If there any way to use an IMAGE in Adaptive Card w/o direct URL to the image ??
microsoft-graph adaptive-cards
asked Nov 11 '18 at 20:44
Royjad
94
add a comment |
I would like to use user's profile image from MS graph in adaptive card. I have determined the API call I need to make is as follows
https://developer.microsoft.com/en-us/graph/docs/api-reference/beta/api/profilephoto_get
In this case I would be getting image as a binary data for a profile photo, that needs to converted into a base-64 string.
But, based on adaptive cards schema document looks like we should use URL property where value should be direct URL to the image
'url string Yes The URL to the image'
How should I approach this ? If there any way to use an IMAGE in Adaptive Card w/o direct URL to the image ??
microsoft-graph adaptive-cards
asked Nov 11 '18 at 20:44
Royjad
94
I would like to use user's profile image from MS graph in adaptive card. I have determined the API call I need to make is as follows
https://developer.microsoft.com/en-us/graph/docs/api-reference/beta/api/profilephoto_get
In this case I would be getting image as a binary data for a profile photo, that needs to converted into a base-64 string.
But, based on adaptive cards schema document looks like we should use URL property where value should be direct URL to the image
'url string Yes The URL to the image'
How should I approach this ? If there any way to use an IMAGE in Adaptive Card w/o direct URL to the image ??
microsoft-graph adaptive-cards
microsoft-graph adaptive-cards
asked Nov 11 '18 at 20:44
Royjad
94
asked Nov 11 '18 at 20:44
Royjad
94
edited Nov 12 '18 at 20:20
asked Nov 11 '18 at 20:44
Royjad
94
asked Nov 11 '18 at 20:44
Royjad
94
asked Nov 11 '18 at 20:44
Royjad
94
94
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You can use a data URI to encode the bytes directly into the payload. Something like this sample:
var photo = await client.Me.Photos[size].Content.Request().GetAsync();
var photoStream = new MemoryStream();
photo.CopyTo(photoStream);
var photoBytes = photoStream.ToArray();
return string.Format("data:image/png;base64,0",
Convert.ToBase64String(photoBytes));
answered Nov 12 '18 at 14:38
Jason Johnston
12.4k1927
I think my Question was misunderstood. How to use image in Adaptive Card w/o direct URL to the image ?? I am not trying to find how to parse image bytes. My question is more on Adaptive Card current capabilities.
– Royjad
Nov 12 '18 at 18:01
If I've misunderstood then I still misunderstand. I thought you were asking how to embed the image into the card payload. That sample I linked does this. It gets the profile photo from Graph, encodes the binary as base 64, then adds it as a Data URI to the adaptive card.
– Jason Johnston
Nov 13 '18 at 14:25
I think we both are on same page :) I am using nodejs with following code. Where body is actual response from MS graph. Here is the code. Lookscodevar buffer = require('buffer') var buf = Buffer.from(body); var base64String = buf.toString('base64') "url": "data:image/png;base64,.concat(base64String)codeLooks like base64 conversation isn't correct. Card is not able to render am image. I uploade an image here :-dailycoding.com/Utils/Converter/ImageToBase64.aspx to test. I copied base64 string in URI formate in my card & it worked.
– Royjad
Nov 13 '18 at 18:27
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253057%2fhow-to-use-image-in-adaptive-card-w-o-direct-url-to-the-image%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can use a data URI to encode the bytes directly into the payload. Something like this sample:
var photo = await client.Me.Photos[size].Content.Request().GetAsync();
var photoStream = new MemoryStream();
photo.CopyTo(photoStream);
var photoBytes = photoStream.ToArray();
return string.Format("data:image/png;base64,0",
Convert.ToBase64String(photoBytes));
answered Nov 12 '18 at 14:38
Jason Johnston
12.4k1927
I think my Question was misunderstood. How to use image in Adaptive Card w/o direct URL to the image ?? I am not trying to find how to parse image bytes. My question is more on Adaptive Card current capabilities.
– Royjad
Nov 12 '18 at 18:01
If I've misunderstood then I still misunderstand. I thought you were asking how to embed the image into the card payload. That sample I linked does this. It gets the profile photo from Graph, encodes the binary as base 64, then adds it as a Data URI to the adaptive card.
– Jason Johnston
Nov 13 '18 at 14:25
I think we both are on same page :) I am using nodejs with following code. Where body is actual response from MS graph. Here is the code. Lookscodevar buffer = require('buffer') var buf = Buffer.from(body); var base64String = buf.toString('base64') "url": "data:image/png;base64,.concat(base64String)codeLooks like base64 conversation isn't correct. Card is not able to render am image. I uploade an image here :-dailycoding.com/Utils/Converter/ImageToBase64.aspx to test. I copied base64 string in URI formate in my card & it worked.
– Royjad
Nov 13 '18 at 18:27
add a comment |
You can use a data URI to encode the bytes directly into the payload. Something like this sample:
var photo = await client.Me.Photos[size].Content.Request().GetAsync();
var photoStream = new MemoryStream();
photo.CopyTo(photoStream);
var photoBytes = photoStream.ToArray();
return string.Format("data:image/png;base64,0",
Convert.ToBase64String(photoBytes));
answered Nov 12 '18 at 14:38
Jason Johnston
12.4k1927
I think my Question was misunderstood. How to use image in Adaptive Card w/o direct URL to the image ?? I am not trying to find how to parse image bytes. My question is more on Adaptive Card current capabilities.
– Royjad
Nov 12 '18 at 18:01
If I've misunderstood then I still misunderstand. I thought you were asking how to embed the image into the card payload. That sample I linked does this. It gets the profile photo from Graph, encodes the binary as base 64, then adds it as a Data URI to the adaptive card.
– Jason Johnston
Nov 13 '18 at 14:25
I think we both are on same page :) I am using nodejs with following code. Where body is actual response from MS graph. Here is the code. Lookscodevar buffer = require('buffer') var buf = Buffer.from(body); var base64String = buf.toString('base64') "url": "data:image/png;base64,.concat(base64String)codeLooks like base64 conversation isn't correct. Card is not able to render am image. I uploade an image here :-dailycoding.com/Utils/Converter/ImageToBase64.aspx to test. I copied base64 string in URI formate in my card & it worked.
– Royjad
Nov 13 '18 at 18:27
add a comment |
You can use a data URI to encode the bytes directly into the payload. Something like this sample:
var photo = await client.Me.Photos[size].Content.Request().GetAsync();
var photoStream = new MemoryStream();
photo.CopyTo(photoStream);
var photoBytes = photoStream.ToArray();
return string.Format("data:image/png;base64,0",
Convert.ToBase64String(photoBytes));
answered Nov 12 '18 at 14:38
Jason Johnston
12.4k1927
You can use a data URI to encode the bytes directly into the payload. Something like this sample:
var photo = await client.Me.Photos[size].Content.Request().GetAsync();
var photoStream = new MemoryStream();
photo.CopyTo(photoStream);
var photoBytes = photoStream.ToArray();
return string.Format("data:image/png;base64,0",
Convert.ToBase64String(photoBytes));
answered Nov 12 '18 at 14:38
Jason Johnston
12.4k1927
answered Nov 12 '18 at 14:38
Jason Johnston
12.4k1927
answered Nov 12 '18 at 14:38
Jason Johnston
12.4k1927
answered Nov 12 '18 at 14:38
Jason Johnston
12.4k1927
12.4k1927
I think my Question was misunderstood. How to use image in Adaptive Card w/o direct URL to the image ?? I am not trying to find how to parse image bytes. My question is more on Adaptive Card current capabilities.
– Royjad
Nov 12 '18 at 18:01
If I've misunderstood then I still misunderstand. I thought you were asking how to embed the image into the card payload. That sample I linked does this. It gets the profile photo from Graph, encodes the binary as base 64, then adds it as a Data URI to the adaptive card.
– Jason Johnston
Nov 13 '18 at 14:25
I think we both are on same page :) I am using nodejs with following code. Where body is actual response from MS graph. Here is the code. Lookscodevar buffer = require('buffer') var buf = Buffer.from(body); var base64String = buf.toString('base64') "url": "data:image/png;base64,.concat(base64String)codeLooks like base64 conversation isn't correct. Card is not able to render am image. I uploade an image here :-dailycoding.com/Utils/Converter/ImageToBase64.aspx to test. I copied base64 string in URI formate in my card & it worked.
– Royjad
Nov 13 '18 at 18:27
add a comment |
I think my Question was misunderstood. How to use image in Adaptive Card w/o direct URL to the image ?? I am not trying to find how to parse image bytes. My question is more on Adaptive Card current capabilities.
– Royjad
Nov 12 '18 at 18:01
If I've misunderstood then I still misunderstand. I thought you were asking how to embed the image into the card payload. That sample I linked does this. It gets the profile photo from Graph, encodes the binary as base 64, then adds it as a Data URI to the adaptive card.
– Jason Johnston
Nov 13 '18 at 14:25
I think we both are on same page :) I am using nodejs with following code. Where body is actual response from MS graph. Here is the code. Lookscodevar buffer = require('buffer') var buf = Buffer.from(body); var base64String = buf.toString('base64') "url": "data:image/png;base64,.concat(base64String)codeLooks like base64 conversation isn't correct. Card is not able to render am image. I uploade an image here :-dailycoding.com/Utils/Converter/ImageToBase64.aspx to test. I copied base64 string in URI formate in my card & it worked.
– Royjad
Nov 13 '18 at 18:27
I think my Question was misunderstood. How to use image in Adaptive Card w/o direct URL to the image ?? I am not trying to find how to parse image bytes. My question is more on Adaptive Card current capabilities.
– Royjad
Nov 12 '18 at 18:01
I think my Question was misunderstood. How to use image in Adaptive Card w/o direct URL to the image ?? I am not trying to find how to parse image bytes. My question is more on Adaptive Card current capabilities.
– Royjad
Nov 12 '18 at 18:01
If I've misunderstood then I still misunderstand. I thought you were asking how to embed the image into the card payload. That sample I linked does this. It gets the profile photo from Graph, encodes the binary as base 64, then adds it as a Data URI to the adaptive card.
– Jason Johnston
Nov 13 '18 at 14:25
If I've misunderstood then I still misunderstand. I thought you were asking how to embed the image into the card payload. That sample I linked does this. It gets the profile photo from Graph, encodes the binary as base 64, then adds it as a Data URI to the adaptive card.
– Jason Johnston
Nov 13 '18 at 14:25
I think we both are on same page :) I am using nodejs with following code. Where body is actual response from MS graph. Here is the code. Looks
code var buffer = require('buffer') var buf = Buffer.from(body); var base64String = buf.toString('base64') "url": "data:image/png;base64,.concat(base64String) code Looks like base64 conversation isn't correct. Card is not able to render am image. I uploade an image here :-dailycoding.com/Utils/Converter/ImageToBase64.aspx to test. I copied base64 string in URI formate in my card & it worked.– Royjad
Nov 13 '18 at 18:27
I think we both are on same page :) I am using nodejs with following code. Where body is actual response from MS graph. Here is the code. Looks
code var buffer = require('buffer') var buf = Buffer.from(body); var base64String = buf.toString('base64') "url": "data:image/png;base64,.concat(base64String) code Looks like base64 conversation isn't correct. Card is not able to render am image. I uploade an image here :-dailycoding.com/Utils/Converter/ImageToBase64.aspx to test. I copied base64 string in URI formate in my card & it worked.– Royjad
Nov 13 '18 at 18:27
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253057%2fhow-to-use-image-in-adaptive-card-w-o-direct-url-to-the-image%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
