代码之家 › 专栏 › 技术社区 › Todd Davis

如何从图像服务加载带有图像的HTML5画布?

angular5 canvas javascript

Todd Davis · 技术社区 · 6 年前

我的Web应用程序调用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

1 回复 | 直到 6 年前

Matt Shirley 6 年前

您可以将图像转换为base64。在我的示例中,您请求图像并使用 response.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);
    }
});

参考文献: