Väggfärgssimulator

Lägger ett genomskinligt färglager ovanpå ett uppladdat rumsfoto så att du kan förhandsgranska hur en målarfärg skulle kunna se ut på väggarna. Du väljer vilken bild som helst från din enhet, väljer en färg med systemets färgväljare och justerar lagrets opacitet från 0 till 1 i steg om 0,1. Lagret renderas som ett absolut positionerat lager som täcker hela bilden med pointer-events avaktiverade.

1. Klicka på filinmatningen överst och välj en bildfil (vilken image/*-typ som helst) från din enhet – bilden laddas via en lokal Object URL, så ingen uppladdning sker. 2. Använd färginmatningen för att välja en målarfärg; standardvärdet är #E8E8E8. 3. Dra Opacity-reglaget mellan 0 och 1 (steg 0,1) för att styra hur starkt färglagret visas över fotot. 4. Förhandsbilden med lagret uppdateras direkt när du ändrar färg eller opacitet.

Bilden renderas i en relativt positionerad behållare och färgen är ett enda absolut positionerat div-element med inset-0 som ligger ovanpå hela bilden. Dess background-color är den valda hexfärgen och dess opacitet är reglagets värde, så effekten är en platt rektangel som täcker hela ramen – den känner inte av väggar, maskar inte endast väggområden och tillämpar inte perspektiv. Låg opacitet (runt 0,2–0,4) brukar se mer realistisk ut för målarfärgsförhandsvisningar; full opacitet fyller helt enkelt bilden med den valda färgen.