Как загрузить HTML5 Canvas с изображением из сервисов изображений?

Question

Мое веб-приложение вызывает службу веб-API, которая возвращает изображение.Сервис не возвращает ничего, кроме изображения.Вызов службы немного отличается, потому что в коде маршрутизации есть функция, которая добавляет требуемый код авторизации и тому подобное.В любом случае, я хочу сказать, что у меня нет полного URL-адреса, и даже если бы он был, я бы не хотел передавать его в код в виде простого текста.Итак, у меня есть ответ, а этот ответ - изображение.

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

Что мне нужно сделать, это нарисовать это изображение на холсте.Из того, что я видел в Интернете до сих пор, похоже, что я хочу создать элемент изображения, затем назначить этому элементу URL-адрес, а затем я могу добавить его на холст.Это часть src, которая озадачивает меня.Все примеры, которые я вижу, это либо загрузка изображения из локальной файловой системы или предварительно заданного URL-адреса, либо из строки base64 и т. Д. Я не могу понять, как просто загрузить изображение, которое у меня есть, как ответ от службы.Я уверен, что я обдумываю это.

У кого-нибудь есть пример кода, чтобы проиллюстрировать это?

например Примерно так:

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

Answer 1

Вы можете конвертировать изображение в Base64.В моем примере вы запрашиваете изображение и конвертируете его в BLOB-объект, используя 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);
    }
});

Ссылки:

• readAsDataURL
• Blob