Vægfarve-simulering

Lægger en gennemsigtig farve oven på et uploadet billede af et værelse, så du kan forhåndsvise, hvordan en malingfarve kan se ud på væggene. Du vælger et billede fra din enhed, vælger en farve med systemets farvevælger og justerer overlejringens opacitet fra 0 til 1 i trin på 0,1. Overlejringen rendres som et absolut-positioneret lag, der dækker hele billedet, med pointer-events deaktiveret.

1. Klik på fil-inputtet i toppen og vælg en billedfil (enhver image/* type) fra din enhed — billedet indlæses via en lokal Object URL, så der sker ingen upload. 2. Brug farve-inputtet til at vælge en malingfarve; standarden er #E8E8E8. 3. Træk Opacity-skyderen mellem 0 og 1 (trin 0,1) for at styre, hvor stærkt farven vises over billedet. 4. Billedet med overlejringen opdateres med det samme, når du ændrer farve eller opacitet.

Billedet rendres inde i en relativt-positioneret container, og farvetonen er en enkelt absolut-positioneret div med inset-0, der ligger oven på hele billedet. Dens background-color er den valgte hex-farve, og dens opacitet er skyder-værdien, så effekten er en flad rektangel, der dækker hele rammen — den opdager ikke vægge, maskerer kun vægområder eller anvender perspektiv. Lav opacitet (omkring 0,2-0,4) har en tendens til at se mere realistisk ud til maling-forhåndsvisning; fuld opacitet oversvømmer simpelthen billedet med den valgte farve.