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