Question

我的网络应用程序调用Web API服务，该服务返回图像。该服务只返回图像。调用服务几乎没有什么不同，因为路由代码中有一个函数可以添加所需的身份验证代码等。无论如何，我的观点是，我没有完整的URL，即使我这样做了，我也不想将其传递给纯文本代码。所以我所拥有的是一种回应，而这种反应是一种形象。

    getThumb(filename: string) {
        return this.http.get('/Picture/' + filename).subscribe(response => {
            return response;
        });
  }

我需要做的是将图像绘制到画布上。从我到目前为止在互联网上看到的情况来看，看起来我想要创建一个图像元素，然后将该元素src分配给一个URL，然后我可以将它添加到画布中。这是令我困惑的src部分。我看到的所有示例都是从本地文件系统或预定义的URL加载图像，或者是从base64字符串加载等。我无法弄清楚如何加载我作为服务响应的图像。我确定我不会过度思考它。

有没有人有一些示例代码来说明这一点？

例如：

var img = new Image();   // Create new img element
img.src = ... ; // Set source to image

Answer 1

您可以将图像转换为Base64。在我的示例中，您使用response.blob()请求图像并将其转换为blob。一旦它成为blob，使用fileReader.readAsDataURL获取Base64。

const fileReader = new FileReader();

fetch("image-resource").then((response) => {
    if(response.ok) {
        return response.blob();
    }
}).then((blob) => { 
    fileReader.readAsDataURL(blob);

    fileReader.onloadend = () => {
        console.log(fileReader.result);
    }
});

参考文献：

如何使用图像服务中的图像加载HTML5 Canvas？

1 个答案: