Блог

Я делаю запрос на сервер и получаю строку URL-адреса изображения, внутри компонента я преобразую URL-адрес в строку Base64. И вот код для этого: «Я скопировал его из ответа и не могу найти его в своей истории, чтобы указать автора».

 getBase64Image(img: HTMLImageElement) {
    // We create a HTML canvas object that will create a 2d image
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    // This will draw image    
    ctx.drawImage(img, 0, 0);
    // Convert the drawn image to Data URL
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image/(png|jpg);base64,/, "");
  }


  getBase64ImageFromURL(url: string) {
    return new Observable((observer: Observer<string>) => {
      // create an image object
      let img = new Image();
      img.crossOrigin = 'Anonymous';
      img.src = url;
      if (!img.complete) {
        // This will call another method that will create image from url
        img.onload = () => {
          observer.next(this.getBase64Image(img));
          observer.complete();
        };
        img.onerror = (err) => {
          observer.error(err);
        };
      } else {
        observer.next(this.getBase64Image(img));
        observer.complete();
      }
    });
  }
 

на странице html

 <div style="background-image:url({{item.imageKey}}); ">
</div>
 

вывод изображения составляет около 800 КБ
Затем я сохраняю строку base64 в таблице indexeddb, а затем извлекаю строку из таблицы для ее отображения. Моя цель выполнения всех этих хлопот — ускорить загрузку веб-сайта при последующих посещениях. Но это не то, чего я ожидал, поскольку для рисования изображений действительно требуется несколько секунд. Для некоторых страниц, содержащих меньше изображений, это разумно, но на других страницах это становится уродливым. Есть ли более эффективный способ сделать это?

Моя цель выполнения всех этих хлопот — ускорить загрузку веб-сайта при последующих посещениях.

Почему бы просто не установить заголовок кэша при просмотре изображения и позволить браузеру выполнить работу по сохранению кэшированного изображения за вас?

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/If-Modified-Since