使用Azure DevOps小部件導出圖像

Question

我正在為Azure DevOps構建小部件，以創建自定義儀表板和導出功能。 到現在，一切正常，直到我將包含圖像的多行文本字段導出到Word文檔。 圖片中包含蔚藍的網址，由於您未通過身份驗證，因此不會以文字形式顯示。

該字段僅包含簡單的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，但這返回了我一個跨域錯誤。

除了此選項外，我還嘗試執行http請求以將圖像作為數據獲取，但這會返回未經身份驗證的消息。

我可以看到圖像，但對此卻無能為力，這真是太不可思議了。 有人有解決方案來獲取圖像並將其轉換為base64嗎？ 或者，也許有一些API下載圖像？ 小部件的代碼用Javascript編寫。

Answer 1

我在Azure DevOps REST客戶端文檔中找到了一個解決方案。

您可以通過從圖片網址獲取attachmentId來解決此問題。 請記住，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";
});