CODEWITHSUNDEEP
c#imagebotframeworkattachmentchatbot
Ceal Clem
Ceal Clem

Reputation: 224

How to avoid automatic resclaling of image MS Bot builder framework

Hello I am coding a chatbot and I need to be able to send images in the chat. They are only small icons. I have tried adapting the code in the "handling attachtments" sample (https://github.com/microsoft/BotBuilder-Samples/blob/master/samples/csharp_dotnetcore/15.handling-attachments/Bots/AttachmentsBot.cs)

and also this page of the documentation: (https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-howto-add-media-attachments?view=azure-bot-service-4.0&tabs=csharp)

But it automatically resizes the small icons to fit a bigger frame. I'm not sure why...

See this screenshot that explains the problem: enter image description here

This is the actual image : enter image description here !!

Here is the code I have used:

var reply = MessageFactory.Text("This is an inline attachment.");
reply.Attachments = new List<Attachment>() { GetInlineAttachment() };
await stepContext.Context.SendActivityAsync(reply, cancellationToken);

       private static Attachment GetInlineAttachment()
        {
            var imagePath = Path.Combine(Environment.CurrentDirectory, @"Resources\uc2icon.png");
            var imageData = Convert.ToBase64String(File.ReadAllBytes(imagePath));

            return new Attachment
            {
                Name = @"Resources\architecture-resize.png",
                ContentType = "image/png",
                ContentUrl = $"data:image/png;base64,{imageData}",
            };
        }

I am fairly new to c# and also coding in general, I appreciate any help!! Thanks

Upvotes: 4

Views: 376

Answers (1)

Stanley Gong
Stanley Gong

Reputation: 12153

You can use Adaptive Card Attachment to solve this issue, try the code below : 

protected override async Task OnMessageActivityAsync(ITurnContext<IMessageActivity> turnContext, CancellationToken cancellationToken)
{

    var imagePath = Path.Combine(Environment.CurrentDirectory, @"Resources\uc2icon.png");
    var imageData = Convert.ToBase64String(File.ReadAllBytes(imagePath));
    var url = $"data:image/png;base64,{imageData}";

    var adaptiveJsonString = "{\"$schema\":\"http://adaptivecards.io/schemas/adaptive-card.json\",\"type\":\"AdaptiveCard\",\"version\":\"1.0\",\"body\":[{\"type\":\"ImageSet\",\"imageSize\":\"auto\",\"images\":[{\"type\":\"Image\",\"url\":\""+ url + "\"}]}]}";

    var adaptiveCardAttachment = new Attachment()
    {
        ContentType = "application/vnd.microsoft.card.adaptive",
        Content = JsonConvert.DeserializeObject(adaptiveJsonString),
    };


    await turnContext.SendActivityAsync(MessageFactory.Attachment(adaptiveCardAttachment), cancellationToken);
}

Result : enter image description here

For more samples about Adaptive Card for bot , see here . Hope it helps and have a nice day .

Upvotes: 1

Related Questions