Rita bilder på en HTML-duk
Att överföra en bild till ett HTML-canvas-element innebär i första hand att använda 2D-renderingskontextens `drawImage()`-metod. Den här metoden gör det möjligt att visa bilder från olika källor, inklusive ""-element, "SVG"-bilder eller andra canvaselement.
Steg för bildöverföring
-
Åtkomst till Canvas: Få en referens till målelementet
<canvas>från Document Object Model (DOM). -
Hämta kontext: Hämta 2D-renderingskontexten med
canvas.getContext('2d'). Detta sammanhang ger ritmetoderna. -
Förbered bildkällan:
- Skapa ett nytt
Image-objekt (new Image()) och ställ in desssrc-attribut till bildfilens sökväg. - Alternativt kan du använda ett befintligt
<img>-element som redan finns i HTML-koden. - Se till att bilden har laddats färdigt innan du försöker rita den. För "Bild"-objekt, använd händelsen "onload".
- Skapa ett nytt
-
Rita bilden: Använd metoden
context.drawImage(), skicka bildkällan och önskade positionerings-/storleksparametrar.
`drawImage()` Metodsignaturer jämförda
| Signatur | Parametrar | Beskrivning och användningsfall |
|---|---|---|
drawImage(image, dx, dy) |
bild (källa), dx (destination X), dy (destination Y) |
Rattar bilden på duken med de angivna (dx, dy)-koordinaterna, och bevarar dess ursprungliga bredd och höjd. |
drawImage(image, dx, dy, dWidth, dHeight) |
bild, dx, dy, dWidth (destination Width), dHeight (destination Height) |
Rattar bilden på duken vid (dx, dy) och skalar den till de angivna dWidth och dHeight. |
drawImage(bild, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) |
bild, sx (källa X), sy (källa Y), sWidth (källans bredd), sHeight (källans höjd), dx, dy, dWidth, > |
För bilder med korsorigin måste servern tillhandahålla lämpliga CORS-rubriker (Cross-Origin Resource Sharing) och bildelementets crossOrigin-egenskap måste ställas in på 'anonymous' innan den laddas.
Copyright ©bucktess.pages.dev 2026