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 Client documentation中找到了解决方案。

您可以通过从图片网址获取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小部件导出图像

1 个答案: