How to use image in Adaptive Card w/o direct URL to the image
up vote
0
down vote
favorite
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 at 20:44
Royjad
94
add a comment |
up vote
0
down vote
favorite
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 at 20:44
Royjad
94
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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 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 at 20:44
Royjad
94
asked Nov 11 at 20:44
Royjad
94
edited Nov 12 at 20:20
asked Nov 11 at 20:44
Royjad
94
asked Nov 11 at 20:44
Royjad
94
asked Nov 11 at 20:44
Royjad
94
94
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
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 at 14:38
Jason Johnston
12.4k1826
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 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 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 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',
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
up vote
0
down vote
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 at 14:38
Jason Johnston
12.4k1826
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 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 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 at 18:27
add a comment |
up vote
0
down vote
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 at 14:38
Jason Johnston
12.4k1826
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 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 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 at 18:27
add a comment |
up vote
0
down vote
up vote
0
down vote
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 at 14:38
Jason Johnston
12.4k1826
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 at 14:38
Jason Johnston
12.4k1826
answered Nov 12 at 14:38
Jason Johnston
12.4k1826
answered Nov 12 at 14:38
Jason Johnston
12.4k1826
answered Nov 12 at 14:38
Jason Johnston
12.4k1826
12.4k1826
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 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 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 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 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 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 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 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 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 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 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 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 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
