<canvas> Billedbehandling - JavaScript

Tegn billeder fra filer på <canvas> med JavaScript drawImage()

Skalering af billede

Her tages en billedfil og indsættes på <canvas> i en anden størrelse end original billedet.

Original billede (300x360) :

Japaner

Skaleret billede på canvas (150x180) :

Browseren understøtter ikke <canvas>

Resultatet ovenfor er skabt af følgende kode

Udklip fra billede

Her tages et område fra et billede og indsættes på <canvas>.
Derefter indsættes en ramme med gennemsigtig midte på <canvas>.

2 originale billeder :

Japaner ramme

Udklip fra billede + ramme på canvas :

Browseren understøtter ikke <canvas>

Resultatet ovenfor er skabt af følgende kode

Negative farver

Her indsætte et billede på canvas, hvorefter farverne gøres negative.

Japaner Browseren understøtter ikke <canvas>

Resultatet ovenfor er skabt af følgende kode

Skift lysstyrke

Browseren understøtter ikke <canvas>

Resultatet ovenfor er skabt af følgende kode

Video på canvas

Samme funktion som bruges til at tegne et billede kan bruges til at tegne en video på canvas.

Så bruges setInterval() til at tegne igen og igen så videoen opdateres på canvas.
Browseren understøtter ikke <canvas>
Resultatet ovenfor er skabt af følgende kode
Siden er sidst opdateret mandag 25. juni 2018