Oříznout a změnit velikost obrázků s tímto jednoduchým jQuery Plugin

Dynamické oříznutí obrazu díky knihovnám jako je jQuery je snadnější než kdy jindy. Kodex je snadno použitelný a komunita má tisíce pluginů manipulace s obrázky.

Jeden takový plugin je Plodina, zdarma open-source řešení pro oříznutí obrazu, které zpracovává přiblížení, oříznutí, a dokonce ukládání obrázků.

Tento projekt je dostupné na GitHub s nějakým velmi zdlouhavou dokumentaci s desítkami vlastních funkcí.

Cropper vám dává (vývojář) úplnou kontrolu nad každým aspektem rozhraní. Můžete s nimi pracovat 30+ různých možností a 20 + vlastní metody zabudovaný do pluginu Cropper.

To je plně citlivý na dotek, funguje tak na všech mobilních zařízeních a podporuje rolovací kolečko / trackpad pro přiblížení a oddálení fotografií. Uživatelé mohou flip, točit se, stupnice, a přemístění fotografie kdekoli na plátně před oříznutím.

Cropper plugin vyžaduje kopii jQuery a to obsahuje dva soubory: CSS stylesheet a JavaScript plugin library. Stačí přidat tyto soubory na svou stránku a mělo by být dobré jít!

Pamatujte, že tento nástroj je dodáván s mnoho funkcí. Online dokumentace vám může pomoci, ale budete potřebovat špinavé ruce nastavení pole pro nahrávání obrázků sami naučit se to všechno. Jejich ukázkový kód jen výstupy do konzoly a vypadá něco takového:

 $ ('# image') cropper (aspectRatio: 16/9, plodina: function (e) // Výstup výsledných dat pro obraz oříznutí. console.log (ex); console.log (ey); console. log (e.width); console.log (e.height); console.log (e.rotate); console.log (e.scaleX); console.log (e.scaleY);); 

Ale měli byste se opravdu podívat na živé demo vidět, jak to všechno funguje.

Můžeš najít živá výstupní data souřadnic X / Y, spolu s rozměry obrazu poblíž vrcholu. Cropper také obsahuje funkci nahrávání kde si uživatel může vybrat obrázek ze svého počítače a začít ořezávat přímo v prohlížeči.

Živé náhledy aktualizovat v rohu, takže můžete vidět, jak vypadá výsledek před uložením. Změňte nastavení poměr stran, kvalitu výstupu, výchozí pozici plodiny, a celá partie více.