PHP7 rozplizlý elipsoidní výřez z obrázku (diskuse)

[R]

Pouzi cache - po vygenerovani uloz vysledok na disk. A pri dalsej poziadavke najprv skontroluj, ci uz nahodou neexistuje.

[Max]

Hoď jsem screenshot final obrázku, jak to pak vypadá, ať se pokocháme nejen zdrojákem, ale i výtvorem.
Zdar Max

[_]

A až budeš chtít změnit, jak to vypadá, tak budeš dělat co? Tohle má dělat CSS...

[_]

(myšleno že budeš všechny obrázky generovat znovu z originálu?)

[Bubak]

Vymazne cache?

[Josef Kufner]

Takovéto věci CSS nikdy neudělá. A už jen kvůli velikosti původního obrázku to nemá smysl.

Správné řešení je vygenerovat si ten obrázek do souboru při nasazení aplikace či prvním použití a klienta nasměrovat rovnou na vygenerovaný obrázek.

Jsou v podstatě tři možnosti:

1. Při nasazení aplikace vše vygenerovat. Obrázky budou statické soubory předem známého názvu, který je možno používat v aplikaci.
2. Při generování stránky vygenerovat obrázek. Obrázek je pak statický soubor neznámého názvu, ten název však prozradí generující funkce, neboť ví, kam ho uložila. Uložené obrázky se použijí napřímo, takže při druhém přístupu už není žádná řežie navíc, krom zjištění názvu souboru.
3. Obrázek je generován na vyžádání a výsledek je kešován. To umožní řízení přístupu k obrázku a pomocí X-SendFile je možné omezit režii webserveru na poskytnutí obrázku – PHP skript při dalších přístupech jen zkontroluje nakešovaný soubor a pomocí HTTP hlavičky v odpovědi řekne web serveru, ať ho pošle klientovi.

[jiwopene]

Pokud je server Apache, je asi nejlepší pomocí mod_rewrite poslat rovnou vygenerovaný obrázek a nespouštět PHP. Mělo by to být o trochu rychlejší a není třeba řešit cache v PHP. PHP se spustí jen když obrázek neexistuje a uloží ho na disk. Příště se odešle rovnou obrázek.

[Josef Kufner]

To je ta možnost č. 2 a mod_rewrite na to nepotřebuješ.

Takovéto věci CSS nikdy neudělá

Co, inset box-shadow nebo border-radius?

[Josef Kufner]

Příloha:

• Screenshot_20190925_012926.png (247634 bytů)

No, pokud chceš jen blur okraje do čistě bílého pozadí, tak to jde:

<span class="blur-img">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Ear-Spot_Squirrel.jpg/1200px-Ear-Spot_Squirrel.jpg">
</span>

.blur-img {
  box-sizing: border-box;
  display: block;
  width: 50%;
  margin: 10% auto;
  border-radius: 50%;
  box-shadow: inset 0px 0px 20px 20px #fff, inset 0px 0px 20px 20px #fff;
  overflow: hidden;
  position: relative;
}

.blur-img img {
  box-sizing: border-box;
  width: 100%;
  display: block;
  border-radius: 50%;
  border: 2px solid #fff;
  position: relative;
  z-index: -1;
}

Výsledek: https://jsfiddle.net/09maztw7/

Na komplikovanější věci by se asi dalo použít SVG. Případně CSS filtry.

Stejně ale musí na serveru pořešit zmenšení obrázku na správnou velikost. Přikreslení rámečku už je drobnost.

[Milan Uhrák]

No tak tohle je pecka ...

Kupodivu, obrázek se scvrkne sám na potřebnou velikost .. tedy nezjistil jsem žádný problém s tímto ...

Jak primitivní !

Ale jak účinné !

díky moc

[Josef Kufner]

Nescvrkne se sám. Pokud je moc velký, tak se uživatelům bude stahovat půl dne. Tak jako tak ho musíš zmenšit na rozumnou velikost.

[debian+]

Jak vyříznout z obrázku elipsoid a rozpliznout tomu okraje - pokus

Co tak pouzit Cairo? Priklady ako vlastne kniznica logika jednoducho funguje. A verzia pre PHP.

[Milan Uhrák]

Příloha:

• elipsoid.jpg (69984 bytů)

Ahoj, Maxi, tole je výsledek ... ještě to není "venku", jen na "hřišti" a bude potřeba tomu doladit další drobnosti, které mám v hlavě, ale ten obrázek je skriptem vyříznutý z originálu

[jiwopene]

Ty elipsy tam jsou moc vidět. Nešlo by to třeba řešit v prohlížeči pomocí SVG?

[Josef Kufner]

Spíš bych udělal oválnou masku a tu před aplikací rozostřil. Tedy něco jako příklad z setImageClipMask plus blurImage aplikovaný na masku.

[Milan Uhrák]

Tohle vypadá velmi zajímavě ...

[Milan Uhrák]

Příloha:

• elipsoid2.jpeg (55573 bytů)

úpravou kódu :

 		$draw->setFillColor( new ImagickPixel( "rgba( 0%, 0%, 0%, 1 )" ) );
		$draw->ellipse( $icx, $icy, $iw2, $ih2, 0, 360 );

		$maska->drawImage( $draw );
		$maska->blurImage( $step*$steps, $steps );

dostávám to rozostření krásně hladké. Masku ještě uložím do souboru a pak jen načtu a přeškáluji na potřebný rozměr a aplikuji. Celé generování trvá 0.24s, což už je schůdné.

Ten blur totiž docela trvá, a pokud jsem u prvního parametru odhadl "co a jak" ten druhý jsem prostě jen náhodně nastavil, nevím, jaký má přesně účel. Asi "sílu" rozmazání, nevím. Díky za popostrčení.

[Josef Kufner]

Masku neukládej, jak to budeš škálovat, bude to porůznu ošklivé. Navíc to ani nemá smysl ukládat, když je to tak snadné nakreslit.

Ukládej hotový obrázek a nebudeš řešit půl sekundy na generování.

[citanus]

tak vono ten imagick umi to stejny co browser a asi i vice, spis je otazka jestli to fakt resit. Chce to na web tak, bych na to pouzil fakt to css

https://css-tricks.com/clipping-masking-css/

https://codepen.io/chriscoyier/pen/41d6e36ac584ee0401064d1cdb88fc67

^ jen si pohrej s rx="45%" u masky a mas dost podobnej efekt tomu cemu se snazis docilit

[Milan Uhrák]

Tohle také může být cesta ... hm .. kolik toho vůbec nevím ..

Díky