使用 Azure DevOps 小部件导出图像

Question

我正在为 Azure DevOps 构建一个小部件，以创建自定义仪表板和导出功能。到目前为止，一切正常，直到我将包含图像的多行文本字段导出到 word 文档。这些图像包含 azure 的 url，who 不会在 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 请求以将图像作为数据获取，但这 returns 我未经身份验证的消息。

感觉很奇怪，我能看到图像，但我不能用它做任何事情。有人有获取图像并将其转换为 base64 的解决方案吗？或者也许有一些 api 可以下载图像？小部件的代码写在Javascript.

Answer 1

我在 Azure DevOps REST Client documentation 中找到了解决方案。

您可以通过从图像 url 中获取 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";
});

使用 Azure DevOps 小部件导出图像

Export Images with an Azure DevOps Widget

javascript

azure-devops

azure-devops-rest-api