Export Images with an Azure DevOps Widget

Question

I am building a widget for Azure DevOps to create custom dashboards and export functionalities. Till now, everything works fine, till I export a multiline text field containing images to a word document. The images are containing urls to azure, who will not be displayed in word, because you are not authenticated there.

The field contains just simple html data:

<div>
    <img src="https://dev.azure.com/xxx/xxx-xxx-xxxx-xxx-xxxxxxxxxxx/_apis/wit/attachments/xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx?fileName=image.png">
</div>

I Tried to use a HTML5 <canvas> with toDataURL() to convert images to base64, but this returned me an Cross-Origin error.

Beside this option I also tried to do a http request to get the image as data, but this returns me unauthenticated messages.

It feels really weird that I can see the Image, but that I can't do anything with it. Does someone have a solution for getting the images and converting it to base64? Or maybe there is some api to download the images? The code for the widget is written in Javascript.

Answer 1

I found a solution in the Azure DevOps REST Client documentation .

You can solve the problem by getting the attachmentId from the image url. Keep in mind that the url structure will be different in API version 4.1 and 5.0!

After you got the Id, you can get the Image as an ArrayBuffer and convert this to an base64 image.

var client = VSS_Service.getCollectionClient(TFS_Wit_WebApi.WorkItemTrackingHttpClient);
client.getAttachmentContent(attachmentId).then(function(imageData) {
    var base64 = btoa(new Uint8Array(imageData).reduce((data, byte) => data + String.fromCharCode(byte), ''));
    var iamge = "data:image/jpg;base64," + base64";
});