如何使用圖像服務中的圖像加載HTML5 Canvas？

Question

我的Web應用程序調用Web API服務，該服務返回圖像。 該服務只返回圖像。 調用服務幾乎沒有什么不同，因為路由代碼中有一個函數添加了所需的身份驗證碼等。 無論如何，我的意思是，我沒有完整的URL，即使我有完整的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);
    }
});

參考文獻：

• readAsDataURL
• 斑點