Экспорт изображений с помощью виджета Azure DevOps

Question

Я создаю виджет для DevOps Azure для создания пользовательских панелей мониторинга и функций экспорта.До сих пор все работает нормально, пока я не экспортирую многострочное текстовое поле с изображениями в текстовый документ.Изображения содержат URL-адреса для лазури, которые не будут отображаться в слове, потому что вы там не аутентифицированы.

Поле содержит только простые html-данные:

<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>

Я пытался использоватьHTML5 <canvas> с toDataURL() для преобразования изображений в base64, но это вернуло мне ошибку Cross-Origin.

Помимо этой опции я также попытался выполнить http-запрос, чтобы получить изображение в виде данных, ноэто возвращает мне неаутентифицированные сообщения.

Мне действительно странно, что я вижу изображение, но ничего не могу с ним поделать.У кого-нибудь есть решение для получения изображений и преобразования его в base64?Или, может быть, есть некоторые API для загрузки изображений?Код для виджета написан на Javascript.

Answer 1

Я нашел решение в документации REST клиента Azure DevOps .

Вы можете решить проблему, получив attachmentId из URL-адреса изображения.Имейте в виду, что структура URL будет отличаться в API версии 4.1 и 5.0!

После того, как вы получили Id, вы можете получить изображение как ArrayBuffer и преобразовать его в изображение base64.

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";
});