---
title: "Øk Ytelsen med 60% med ImageBitmap i Look Scanned"
description: "Utforsk hvordan integrering av ImageBitmap i Look Scanned forbedrer ytelsen ved å muliggjøre asynkron dekoding og effektiv rendering, samtidig som kompatibiliteten med eldre nettlesere opprettholdes."
date: 2025-01-18T11:15:33.000Z
lang: no
source: https://lookscanned.io/no/blog/boost-performance-with-imagebitmap
tags: ["ytelse", "imagebitmap", "bilde", "nettleser"]
---

# Øk Ytelsen med 60% med ImageBitmap i Look Scanned

Ytelsesoptimalisering er avgjørende når man bygger moderne nettapplikasjoner som [Look Scanned](https://lookscanned.io), spesielt når man håndterer bilder. Et kraftig, men underutnyttet verktøy for å oppnå betydelige ytelsesgevinster er `ImageBitmap`-grensesnittet. I dette blogginnlegget utforsker vi hva `ImageBitmap` er, hvorfor det er effektivt, og hvordan det er blitt integrert i Look Scanned for å forbedre renderingsytelsen.

## Hva er ImageBitmap?

`ImageBitmap` er et HTML5-grensesnitt som representerer et bitmap-bilde. Det muliggjør effektiv bildedekoding og -behandling utenfor hovedtråden, noe som reduserer renderingsbelastningen og forbedrer responsiviteten. Når det først er opprettet, kan et `ImageBitmap`-objekt brukes direkte i renderingskontekster som Canvas 2D eller WebGL, noe som gjør det til et kraftig verktøy for bildetunge applikasjoner.

## Hvorfor Bruke ImageBitmap i Look Scanned?

Tidligere var Look Scanned avhengig av `Blob` for å overføre bildedata mellom behandlingsfunksjoner. Men `Blob` er ikke ideelt for ytelsesoptimalisering, siden det krever koding og dekoding som ekstra steg. `ImageBitmap` gir derimot direkte tilgang til bildedata, noe som eliminerer overflødige dekodingsoperasjoner og betydelig forbedrer renderingsytelsen.

## Hvordan Vi Bruker ImageBitmap i Look Scanned

Look Scanned støtter eldre nettlesere, så det kan ikke gå fullstendig over til `ImageBitmap` uten å opprettholde støtte for `Blob`. Denne doble støtten sikrer kompatibilitet på tvers av et bredt spekter av nettlesere. For detaljer om nettleserkompatibilitet, se [caniuse.com](https://caniuse.com/createimagebitmap). I tillegg krever Safaris begrensede canvas-støtte at WebAssembly (WASM) brukes til bildebehandling, noe som krever `Blob` som inndataformat.

For å håndtere dette bruker Look Scanned en hybrid tilnærming som støtter både `Blob` og `ImageBitmap`, samtidig som den gradvis migrerer til sistnevnte. Under følger nøkkeldetaljer om implementeringen:

### Lasting og Dekoding

```typescript
async function loadImage(url): Promise<ImageBitmap | Blob> {
  const response = await fetch(url);
  const blob = await response.blob();
  if (window.createImageBitmap) {
    return createImageBitmap(blob);
  }
  // Fallback to using Blob
  return blob;
}
```

### WebAssembly-integrasjon

For avansert behandling sendes `Blob` til WASM for å sikre funksjonalitet selv i nettlesere uten støtte. Vi må først tegne bildet til canvas og deretter bruke `canvas.toBlob` for å få `Blob`.

### Reserverendering

```typescript
async function renderImage(canvas, imageUrl) {
  const ctx = canvas.getContext("2d");
  const image = await loadImage(imageUrl);
  if (image instanceof ImageBitmap) {
    ctx.drawImage(image, 0, 0);
  } else {
    const img = new Image();
    img.src = URL.createObjectURL(image);
    img.onload = () => ctx.drawImage(img, 0, 0);
  }
}
```

## Ytelsesforbedringer

Ved å integrere `ImageBitmap` har Look Scanned oppnådd en betydelig reduksjon i bildebehandlingstider — fra 50ms til 20ms per bilde. Denne forbedringen gir en jevnere og mer responsiv brukeropplevelse, spesielt for oppgaver som involverer skannede dokumenter.

## Uventede Funn

Under implementeringen oppdaget vi at det å opprette en ny `ImageBitmap`-kopi med `createImageBitmap` før den overføres til en worker, gir bedre ytelse enn å sende det opprinnelige objektet direkte. Denne oppførselen kan skyldes optimaliseringer i nettleserens motor for overførbare objekter.

## Nettleserstøtte

`ImageBitmap` støttes i de fleste moderne nettlesere, inkludert de nyeste versjonene av Chrome, Firefox, Edge og Safari. For detaljer om kompatibilitet, se [`createImageBitmap` på caniuse.com](https://caniuse.com/createimagebitmap).

## Konklusjon

Å integrere `ImageBitmap` i Look Scanned har markant forbedret ytelsen ved å muliggjøre asynkron dekoding, effektiv rendering og bedre kompatibilitet med Web Workers. Selv om opprettholdelse av støtte for eldre nettlesere krever fortsatt bruk av `Blob`, sikrer den gradvise migreringen til `ImageBitmap` langsiktige ytelsesgevinster.

Ved å utnytte disse fremskrittene leverer [Look Scanned](https://lookscanned.io) en raskere, mer responsiv opplevelse for brukerne sine. Prøv det, og opplev forskjellen selv!