使用 Azure DevOps 小组件导出图像答案

【问题标题】：Export Images with an Azure DevOps Widget使用 Azure DevOps 小组件导出图像
【发布时间】：2019-05-12 04:59:02
【问题描述】：

我正在为 Azure DevOps 构建一个小部件，以创建自定义仪表板和导出功能。到目前为止，一切正常，直到我将包含图像的多行文本字段导出到 Word 文档。图片包含 azure 的 url，不会在 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 编写的。

【问题讨论】：

标签： javascript azure-devops azure-devops-rest-api

【解决方案1】：

我在Azure DevOps REST Client documentation找到了解决办法。

您可以通过从图片网址获取attachmentId 来解决问题。请记住，API 版本 4.1 和 5.0 中的 url 结构会有所不同！

获得 Id 后，您可以将 Image 获取为 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";
});

【讨论】：