Předejte potřebné informace požadovaným klientům. Hlavním problémem prodeje je neschopnost předat zákazníkům vaši hodnotu. Jak správně mluvit o produktu nebo službě

Uvažujme tři jednoduchými způsoby, který lze použít k zobrazení pouze části obrázku na webu. Všimněte si, že pomocí těchto metod není obrázek oříznut na určitou velikost doslova, ale zobrazí pouze část, kterou potřebujeme vidět, a skryje nepotřebnou oblast.

Tyto metody mohou být velmi užitečné, pokud potřebujete změnit velikost obrázku nebo vytvořit náhled, například v informačním kanálu atd.

Metoda 1: Použití záporných okrajů

Obrázek musí být umístěn v nadřazeném prvku, v našem případě div. Rodičovský prvek musí být plovoucí prvek (nebo se zadanou šířkou). Metoda nebude fungovat na prvcích na úrovni bloku nebo s plnou šířkou.

Nastavíme záporné okraje pro všechny čtyři strany: nahoře (nahoře), vpravo (vpravo), dole (dole) a vlevo (vlevo). Záporné okraje určují, jak moc je obrázek nadřazeného prvku oříznut v každém směru. Dále nastavíme vlastnost přetečení rodičovského prvku na skryté, abychom skryli okraje, které jsou za oříznutou oblastí obrázku.

Oříznutí

plavat vlevo;

přepad: skrytý;

Oříznout img

okraj : -70px -50px -160px -175px ;

Metoda 2: Použití absolutního umístění

Pomocí této metody nastavíme šířku a výšku rodičovského prvku a nastavíme vlastnost position na relativní. Šířka a výška určují rozměry zobrazeného pole. Pro obrázek uvnitř nadřazeného prvku nastavte vlastnost positioning na absolutní. Poté pomocí vlastností nahoře a vlevo nastavíme, která část obrázku se má zobrazit.

Oříznutí

plavat vlevo;

přepad: skrytý;

poloha: relativní;

šířka: 270px;

výška: 260px;

Oříznout img

pozice: absolutní;

horní : -70px ;

vlevo: -175px;

Metoda 3: Použití vlastnosti slip

Tato metoda je nejjednodušší, protože vlastnost clip určuje část prvku, kterou je třeba zobrazit. Tato metoda má ale dvě nevýhody.

Nejprve musí být oříznutý prvek absolutně umístěn. Takže budeme muset přidat další prvek, vypočítat velikost viditelné oblasti obrázku, přidat tuto velikost a nastavit vlastnost float na rodič.

Za druhé, velikost viditelné oblasti se nezmenšuje na velikost vyříznuté části, ale zůstává stejná jako velikost celého obrázku (plocha mimo vyříznutou část je pouze skryta). K přesunutí viditelné oblasti do levého horního rohu rodiče musíme použít absolutní umístění.

Oříznutí

plavat vlevo;

poloha: relativní;

Naučte se měnit velikost a ořezávat obrázky pomocí JavaScriptu a prvku HTML5 Canvas pomocí ovládacích prvků, které jste viděli v aplikacích pro úpravu fotek:

V tomto článku vám ukážu, jak změnit velikost a oříznout obrázky pomocí prvku HTML5

V živém prostředí může web nebo aplikace použít tuto techniku ke změně velikosti a vytvoření profilové fotografie před načtením.

Mohli bychom to udělat na serveru, ale to by vyžadovalo přenos potenciálně velkých souborů, což by zabralo spoustu času. Místo toho můžeme změnit velikost obrázku na straně klienta ještě před jeho načtením. Což vám umožní dělat vše mnohem rychleji.

K tomu vytvoříme element HTML5

Většina prohlížečů již tyto metody podporuje, takže pravděpodobně budete moci tuto techniku ihned implementovat. Musíte si však být vědomi některých omezení, která prohlížeče nepodporují, jako je kvalita obrazu a výkon.

Změna velikosti velmi velkých obrázků může způsobit zpomalení prohlížeče nebo v některých případech dokonce pád aplikace. Proto má smysl nastavit rozumné limity velikosti souboru, který lze nahrát. Pokud je pro vás kvalita důležitá, může se vám tato technika zdát nevhodná, protože prohlížeč během zpracování sníží kvalitu obrázku.

Existuje řadu technik, které lze použít ke zvýšení kvality obrázků zmenšených z plátna, v tomto článku je však nebudeme uvažovat.

Na konečný výsledek se můžete podívat v této ukázce nebo si můžete stáhnout archiv ZIP.

Tak a teď začneme!

Označení

V naší ukázce začneme s existujícím obrázkem:

To je vše! Toto je vše HTML, co budeme pro toto demo potřebovat.

CSS

CSS je také velmi minimální. Nejprve definujeme styly pro kontejner pro změnu velikosti a obrázek:

Resize-container ( pozice: relativní; zobrazení: vložený blok; kurzor: přesun; okraj: 0 auto; ) .resize-container img ( display: block ) .resize-container:hover img, .resize-container:active img ( obrys: 2px přerušovaná rgba(222,60,80,.9 )

Resize-handle-ne, .resize-handle-ne, .resize-handle-se, .resize-handle-nw, .resize-handle-sw ( pozice: absolutní; zobrazení: blok; šířka: 10px; výška: 10px; pozadí: rgba(222,60,80,.9); .resize-handle-nw (nahoře: -5px; vlevo: -5px; kurzor: nw-resize; ) .resize-handle- sw; ( dole: -5px; vlevo: -5px; kurzor: sw-resize; ) .resize-handle-ne (nahoře: -5px; vpravo: -5px; kurzor: ne-resize; ) .resize-handle-se (dole : -5px vpravo: -5px;

JavaScript

JavaScript začneme definováním některých proměnných a inicializací plátna a cílového obrázku:

var resizeableImage = function(image_target) ( var $container, orig_src = new Image(), image_target = $(image_target).get(0), event_state = (), constrain = false, min_width = 60, min_height = 60, max_width = 800, max_height = 900, resize_canvas = document.createElement("canvas" )); resizeableImage($(".resize-image"));

Dále vytvoříme funkci init, která bude volána ihned po startu. Tato funkce zabalí obrázek do kontejneru, vytvoří úchyty pro změnu velikosti a vytvoří kopii původního obrázku, která se použije pro změnu velikosti.

Objekt JQuery pro prvek kontejneru také přiřadíme proměnné, abychom k němu mohli později přistupovat a přidat posluchač události mousedown, který detekuje, když někdo začne přetahovat jeden z úchytů:

var resizeableImage = function(image_target) ( // ... init = function())( // Vytvořte nový obrázek s kopií původního zdroje // Když změníme velikost obrázku, vždy použijeme tuto kopii jako základ orig_src .src=image_target.src ; // Přidání značek pro změnu velikosti $(image_target).wrap("

").před(" ").před(" ").po(" ").po(" "); // Získání proměnných pro kontejner $container = $(image_target).parent(".resize-container"); // Přidání událostí $container.on("mousedown", ".resize-handle", startResize) ; //... init();

Funkce startResize a endResize pouze sdělují prohlížeči, aby začal sledovat, kde se myš pohybuje, a zastavil sledování:

startResize = function(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove", změna velikosti); $(document).on("mouseup", endResize ); endResize = function(e)( e.preventDefault(); $(document).off("myší touchend", endResize); $(document).off("mousemove touchmove", změna velikosti); );

Než začneme sledovat polohu myši, musíme pořídit snímek rozměrů a dalších klíčových dat kontejneru.

Uložíme je do proměnné nazvané event_state a použijeme ji později jako výchozí bod při změně výšky a šířky:

saveEventState = function(e)( // Uložení počátečních parametrů události a stavu kontejneru event_state.container_width = $container.width(); event_state.container_height = $container.height(); event_state.container_left = $container .offset().left ; event_state.container_top = $container.offset().top; event_state.mouse_x = (e.clientX || e.pageX || e.originalEvent.touches.clientX) + $(window).scrollLeft; (); = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop( // Toto je oprava pro mobilní safari // Z nějakého důvodu nemůže přímo zkopírujte dotykové vlastnosti if (typeof e.originalEvent.touches !== "undefined")( event_state.touches = ; $.each(e.originalEvent.touches, function(i, ob)( event_state.touches[i] = ( ); event_state.touches [i].clientX = 0+ob.clientX; event_state.touches[i].clientY = 0+ob.clientY ));

Funkce změny velikosti je místo, kde se děje většina akcí. Tato funkce je neustále volána, když uživatel přetáhne jeden z úchytů pro změnu velikosti. Pokaždé, když je tato funkce zavolána, vytvoříme novou šířku a výšku výpočtem vztahu mezi aktuální polohou myši a původní polohou rohu, který uživatel vytáhl:

Poté přidáme možnost omezení velikosti obrázku při přepínání pomocí klávesy Shift nebo proměnné.

Nakonec změníme velikost obrázku, ale pouze pokud je nová šířka a výška v rámci minimální a maximální hodnoty proměnných, které jsme nastavili na začátku.

Poznámka: Vzhledem k tomu, že ve skutečnosti měníme velikost obrázku, nikoli pouze atributy výšky a šířky, možná budete chtít z důvodů výkonu zvážit omezení četnosti volání resizeImage. Toto se nazývá debouncing nebo škrcení.

Skutečná změna velikosti obrázku

Můžete jednoduše nakreslit obrázek pomocí drawImage. Nejprve nastavíme výšku a šířku plátna a vždy použijeme původní kopii obrázku v plné velikosti. Poté použijeme toDataURL na plátně, abychom získali verzi nedávno upraveného obrázku zakódovanou v Base64 a umístili ji na stránku.

Část o oříznutí poskytuje úplné vysvětlení všech možností, které lze použít s metodou drawImage:

resizeImage = function(width, height)( resize_canvas.width = width; resize_canvas.height = výška; resize_canvas.getContext("2d")).drawImage(orig_src, 0, 0, šířka, výška); $(image_target).attr( "src", resize_canvas.toDataURL("image/png"));

Příliš snadné? Je tu jedno malé upozornění: obrázek musí být hostován ve stejné doméně jako stránka nebo na serveru s schopnost výměny s různými zdroji (CORS). Jinak můžete mít problémy s chybami " poškozené plátno«.

Změna velikosti z různých úhlů

Nyní byste měli mít funkční demo verzi. Ale to není vše. Na tento moment, zatím to nefunguje tak, že změna velikosti probíhá tak, jako když táhneme za pravý dolní roh, bez ohledu na to, z jakého rohu obrázek měníme.

Musíme být schopni změnit velikost obrázku z jakéhokoli úhlu. K tomu potřebujeme porozumět chování našeho demo modelu.

Při změně velikosti by se měl roh, za který táhneme, a jeho přilehlé strany posunout, zatímco protější roh a jeho přilehlé strany by měly zůstat na místě:

Když změníme šířku a výšku obrázku, pravý a spodní okraj se posunou, zatímco horní a levý okraj zůstanou na svém místě. To znamená, že ve výchozím nastavení se velikost obrázků mění z pravého dolního rohu.

Toto výchozí chování nemůžeme změnit, ale při změně velikosti z libovolného rohu kromě pravého dolního rohu to změnit můžeme obecná pozice obrázek tak, aby vypadal, jako by protilehlý roh a sousední hrany zůstaly na svém místě. Pojďme aktualizovat naši funkci změny velikosti:

změna velikosti = function(e)( var mouse=(),width,height,left,top,offset=$container.offset(); mouse.x = (e.clientX || e.pageX || e.originalEvent.touches .clientX) + $(window).scrollLeft();y = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); závisí různě na úhlu, který táhneme if($(event_state.evnt.target).hasClass("resize-handle-se"))( width = mouse.x - event_state.container_left; height = mouse.y - event_state .container_top; left = event_state.container_left; top = event_state.container_top ) else if($(událost_stav.evnt.cíl).hasClass("změna velikosti-sw"))( šířka = stav_události.šířka_kontejneru - (myš.x - stav_události). výška_kontejneru.y - stav_udalosti.nahoru_kontejneru = myš.x; nahoře = stav_udalosti.kontejner_nahoru; = stav_udalosti.šířka_kontejneru - (myš.x - stav_události.vlevo_kontejneru) výška = stav_události.výška_kontejneru - (myš.y - stav_události.vrch_kontejneru); vlevo = myš.x; top = myš.y; if(constrain || e.shiftKey)( top = mouse.y - ((šířka / orig_src.width * orig_src.height) - výška); ) ) else if($(event_state.evnt.target).hasClass("změna velikosti -handle-ne"))( width = mouse.x - event_state.container_left; height = event_state.container_height - (mouse.y - event_state.container_top); left = event_state.container_left; top = mouse.y; if(constrain | |. e.shiftKey)( top = mouse.y - ((šířka / orig_src.width * orig_src.height) - výška); ) ) // Volitelně podporovat poměr stran if(omezit || e.shiftKey)( výška = šířka / orig_src.width * orig_src.height ) if(width > min_width && height > min_height && width< max_width && height < max_height){ // Для увеличения производительности вы можете ограничить количество вызовов resizeImage() resizeImage(width, height); // Без этого Firefox не будет пересчитывать размеры изображения, пока перетаскивание не завершилось $container.offset({"left": left, "top": top}); } }

Náš kód nyní zkontroluje, který úchyt pro změnu velikosti se přetahuje, a přesune náš obrázek tak, aby odpovídající roh zůstal nehybný.

Přesouvání obrázku

Nyní, když můžeme změnit velikost obrázku přetažením kteréhokoli z jeho rohů, možná jste si všimli, že můžeme nechtěně změnit pozici obrázku na stránce.

Nyní musíme zajistit, aby se obraz vrátil zpět do středu snímku. Ve funkci init přidáme další sledovač událostí, podobný tomu, který jsme vytvořili dříve:

init = function())( //... $container.on("myší dolů", "img", startMoving); )

Nyní přidáme funkce startMoving a endMoving, podobně jako jsme přidali startResize a endResize:

startMoving = function(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove", move); $(document).on("mouseup", endMoving ); endMoving = function(e)( e.preventDefault(); $(document).off("mouseup", endMoving); $(document).off("mousemove", pohyb); );

Funkce pohybu potřebuje vypočítat novou pozici pro levý horní okraj kontejneru. Bude se rovnat aktuální pozici myši, posunuté o vzdálenost od levého horního rohu k myši, když jsme začali přetahovat obrázek:

move = function(e)( var mouse=(); e.preventDefault(); e.stopPropagation(); mouse.x = (e.clientX || e.pageX) + $(window).scrollLeft(); myš .y = (e.klientY || e.stránkaY) + $(okno).scrollTop(); $container.offset(( "vlevo": myš.x - (stav_události.myši_x - stav_události.kontejner_vlevo), "nahoře" : myš.y - (stav_události.myší_y - stav_události.nahoře_kontejneru) ));

Oříznutí obrázku

Nyní, když můžeme změnit velikost obrázku, možná jej budete chtít oříznout. Místo toho, abychom uživatelům dali možnost oříznout obrázek na libovolnou velikost a tvar, vytvořme rám, který má přesné rozměry, které potřebujeme, a vyzvěme uživatele, aby obrázek umístili do tohoto rámečku.

Budou schopni určit měřítko a polohu oříznutého rámečku na původním obrázku a my zase budeme mít jistotu, že výsledný obrázek bude mít vždy stejný tvar a velikost.

K tomu musíme přidat následující HTML kód:

Styly pro překryvný rám jsou velmi důležité, zejména poloha, šířka a výška, protože se používají k určení, jak velká část obrázku bude oříznuta.

Je také důležité pamatovat na to, že rám musí být vždy viditelný na pozadí jakékoli barvy. Proto jsem v mém příkladu použil poloprůhledný bílý obrys kolem hlavního okna:

Překryvná vrstva ( pozice: absolutní; vlevo: 50 %; nahoře: 50 %; levý okraj: -100 pixelů; horní okraj: -100 pixelů; z-index: 999; šířka: 200 pixelů; výška: 200 pixelů; ohraničení: plné 2 pixely rgba( 222,60,80,.9); box-sizing: content-events: none; .overlay:after, .overlay:before (obsah: ""; pozice: absolutní; zobrazení: blok; šířka: 204px; ; výška: 40px: přerušovaný 2px rgba(222,60,80,.9): přerušovaný 2px rgba(222,60,80,.9); margin-top: -40px ) .overlay:after ( bottom: 0; margin-left: -2px; margin-bottom: -40px; ) .overlay-inner:after, .overlay -inner:before ( content: ""; pozice: absolutni: block width: 204px; border-top: dashed 2px rgba(222,60,80,.9); .overlay-inner:before ( left: 0; margin-left: -40px; margin-top: -2px; ) .overlay-inner:after ( right: 0; margin-right: -40px; margin-top: -2px) .btn-crop ( pozice: absolutní; svislé zarovnání: dole; vpravo: 5px; dole: 5px; odsazení: 6px 10px; z-index: 999; barva pozadí: rgb(222,60,80); hranice: žádná; border-radius: 5px; barva: #FFF; )

Přidejte do svého JavaScriptu následující funkci a sledovač událostí:

init = function())( //... $(".js-crop").on("click", crop); ); crop = function())( var crop_canvas, left = $(".overlay").offset().left - $container.offset().left, top = $(".overlay").offset().top - $container.offset().top, width = $(".overlay").width(), height = $(".overlay").height( crop_canvas = document.createElement("canvas"); = šířka; crop_canvas.height = výška crop_canvas.getContext("2d").drawImage(cíl_obrázku, vlevo, nahoře, šířka, výška, 0, 0, šířka, výška window.open(crop_canvas.toDataURL("image /); png"));)

Funkce oříznutí je podobná funkci resizeImage, ale místo abychom jí předali hodnotu výšky a šířky, získáme výšku a šířku z prvku překrytí.

Metoda drawImage na plátně vyžaduje devět parametrů pro oříznutí. Prvním parametrem je zdroj obrazu. Další čtyři parametry udávají, jak velká část původního obrázku je použita (ořezové pole). Poslední čtyři parametry udávají, kde na plátně se má obrázek zobrazit a v jaké velikosti.

Přidání dotykových událostí

Pro mousedown a mouseup existují ekvivalentní události dotyku - touchstart a touchend, pro mousemov je ekvivalentní událost touchmove. Kdo tyto události pojmenoval, zjevně postrádal smysl pro humor, jinak by je mohl nazvat „touchdown“ a „touchup“.

Pojďme přidat touchstart a touchend všude tam, kde máme mousedown a mouseup , a nahradit mousemove touchmove :

// V init()... $container.on("mousedown touchstart", ".resize-handle", startResize); $container.on("mousedown touchstart", "img", startMoving); //V startResize() ... $(document).on("mousemove touchmove", move); $(document).on("myší touchend", endMoving); //V endResize()... $(document).off("mouseup touchend", endMoving); $(document).off("mousemove touchmove", pohyb); //V startMoving()... $(document).on("mousemove touchmove", move); $(document).on("myší touchend", endMoving); //V endMoving()... $(document).off("mouseup touchend", endMoving); $(document).off("mousemove touchmove", pohyb);

Vzhledem k tomu, že měníme velikost obrázku, je spravedlivé očekávat, že někteří uživatelé budou chtít použít běžné akce, jako je roztažení obrázku. Existuje knihovna Hammer, která obsahuje mnoho pohodlných nástrojů pro práci s dotykovými událostmi.

Jelikož ale potřebujeme pouze strečink, obejdeme se i bez něj. Nyní vám ukážu, jak snadné je vytvořit úsek bez použití knihovny třetí strany.

Možná jste si všimli, že funkce saveEventState již ukládá původní dotyková data; Teď to budeme potřebovat.

Nejprve zkontrolujeme, zda událost obsahuje dva „dotyky“ a změříme vzdálenost mezi nimi. Označíme to jako počáteční vzdálenost a pak změříme, jak moc se tato vzdálenost mění, když se pohybujeme. Pojďme aktualizovat funkci pohybu:

move = function(e)( var mouse=(), touches; e.preventDefault(); e.stopPropagation(); touches = e.originalEvent.touches; mouse.x = (e.clientX || e.pageX || touches.clientX) + $(window).scrollLeft(mys.y = (e.clientY || e.pageY || touches.clientY) + $(window).scrollTop( $container.offset( "); left": mouse.x - (event_state.mouse_x - event_state.container_left), "top": mouse.y - (event_state.mouse_y - event_state.container_top) )); // Sledování roztahování při pohybu if(event_state.touches && event_state .touches.length > 1 && touches.length > 1)( var width = event_state.container_width, height = event_state.container_height; var a = event_state.touches.clientX - event_state.touches.clientX; a = a * a; var b = event_state.touches.clientY - event_state.touches.clientY; - dotyky.klientY; b = b * b; var ratio = dist2 /dist1; šířka = šířka * poměr; výška = výška * poměr; // Pro zlepšení výkonu můžete omezit počet volání resizeImage() resizeImage(width, height); ));

Vydělíme aktuální vzdálenost počáteční vzdáleností, abychom určili poměr, a podle toho ji použijeme pro zmenšení obrázku. Vypočítáme novou šířku a výšku a poté změníme velikost obrázku:

To je vše. Podívejte se znovu na demo verzi popř stáhnout archiv ZIP.

Při testování jsem viděl, že Chrome blokuje výchozí prohlížeč v reakci na roztažení, ale Firefox funguje dobře.

Doufám, že vám tento článek byl užitečný. Doporučuji vám přečíst si další články o přetahovacích prvcích a metodách nahrávání souborů a podívat se, jak ostatní lidé kombinují tyto techniky k vytvoření krásných uživatelských rozhraní.

Tato publikace je překladem článku „ ZMĚNA VELIKOSTI A OŘEZÁNÍ OBRAZŮ POMOCÍ PLÁTNA“, připravený přátelským projektovým týmem

V tomto článku se naučíme, jak měnit velikost a ořezávat obrázky pomocí prvku v HTML5, a když už jsme u toho, dejme ovládacím prvkům stylový design stejně jako ve fotoeditorech.

V dnešní době je mnoho webových stránek a webových aplikací vybaveno technologií pro zpracování obrazu. To lze provést na straně serveru, což způsobí časové náklady na přenos potenciálně velkého obrazu. Abyste tomu zabránili, můžete zpracovat obrazy na klientském počítači, abyste proces urychlili.

Uděláme to přes plátno, nakreslíme obrázky v požadované velikosti a pak načteme nové obrázky. Mnoho prohlížečů tuto metodu podporuje, takže můžeme začít hned s menším omezením výkonu.

Formátování velkých obrázků může zpomalit prohlížeč nebo způsobit jeho úplné zastavení. To nás nutí přemýšlet o nastavení limitů pro nahrané obrázky. Pokud je důležitá kvalita výsledných obrázků, pak nás možná překvapí, v co je prohlížeč promění. Na internetu můžete najít několik technologií pro zlepšení kvality zpracování obrazu, ale nebudeme je zde uvažovat.

Za tímto účelem začínáme pracovat!

Označení

V naší ukázce budeme pracovat s jedním daným obrázkem:

Všechno! Nepotřebujeme žádné další HTML.

CSS

Ani CSS kód nebude příliš velký. Pojďme definovat styly pro resize-container a samotný obrázek.

Nyní nastavíme pozice a styly pro jednotlivé „úchyty pro změnu velikosti“. Jedná se o malé čtverečky umístěné v rozích obrázků, kterými přetažením změníme velikost obrázku.

JavaScript

Začněme vytvořením proměnné a plátna v Canvas.

Var resizeableImage = function(image_target) ( var $container, orig_src = new Image(), image_target = $(image_target).get(0), event_state = (), constrain = false, min_width = 60, min_height = 60, max_width = 800, max_height = 900, resize_canvas = document.createElement("canvas" )); resizeableImage($(".resize-image"));

Nyní vytvoříme spouštěcí funkci, která se spustí okamžitě. Tato funkce pracuje s kontejnerem, ve kterém je obrázek uvnitř, nastavuje velikost a kopíruje původní obrázek pro oříznutí. Také přiřadíme objekt jQuery, abychom na něj mohli později odkazovat a pomocí operátorů pohybu myši reagovat na tažení myší.

Var resizeableImage = function(image_target) ( // ... init = function())( // Vytvořte nový obrázek s kopií původního zdroje // Při změně velikosti vždy použijeme tuto původní kopii jako základní orig_src. src =image_target.src; // Přidání úchytů pro změnu velikosti $(image_target).wrap("

").před(" ").před(" ").po(" ").po(" "); // Získejte proměnnou pro kontejner $container = $(image_target).parent(".resize-container"); // Přidání událostí $container.on("mousedown", ".resize-handle", startResize); ); //... init(); )

Funkce startResize a endResize sdělují prohlížeči, kdy má začít věnovat pozornost pohybu myši a kdy přestat.

StartResize = function(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove", změna velikosti); $(document).on("mouseup", endResize ); endResize = function(e)( e.preventDefault(); $(document).off("myší touchend", endResize); $(document).off("mousemove touchmove", změna velikosti); );

Než začnete se sledováním myši, musíte při požadavku na stránku zkontrolovat aktuální nastavení klienta. uložíme je do proměnné event_state a použijeme je později v naší práci.

SaveEventState = function(e)( // Uložení počátečních podrobností události a stavu kontejneru event_state.container_width = $container.width(); event_state.container_height = $container.height(); event_state.container_left = $container.offset(). left; event_state.container_top = $container.offset().top; event_state.mouse_x = (e.clientX || e.pageX || e.originalEvent.touches.clientX) + $(window).scrollLeft(); (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); // Toto je oprava pro mobilní safari // Z nějakého důvodu neumožňuje přímou kopii vlastnosti touches if(typeof e.originalEvent.touches !== "undefined")( event_state.touches = ; $.each(e.originalEvent.touches, function(i, ob)( event_state.touches[i] = ( ); event_state.touches[i].clientX = 0+ob.clientX;

Funkce změny velikosti je nejdůležitější. Aktivuje se při roztažení obrazu. Pokaždé vypočítáme nové velikosti obrázků v závislosti na nové poloze čtverců.

Dále přidáme možnost omezit velikost obrázku pomocí klávesy Shift nebo proměnné.

Poznámka: Vzhledem k tomu, že ve skutečnosti měníme velikost obrázku, spíše než mu dáváme novou délku a výšku, stojí za to přemýšlet o tom, jak moc můžeme použít funkci resizeImage k řízení výkonu serveru.

Nové velikosti obrázků

Kreslení obrázků v Canvas je stejně snadné jako drawImage . Nastavíme výšku a délku obrázku a poté poskytneme originál. ToDataURL také používáme k získání verze výsledku operace zakódované v Base64.

K dispozici jsou úplné vysvětlení možností dostupných pro tuto operaci.

ResizeImage = function(width, height)( resize_canvas.width = width; resize_canvas.height = výška; resize_canvas.getContext("2d")).drawImage(orig_src, 0, 0, šířka, výška); $(image_target).attr( "src", resize_canvas.toDataURL("image/png"));

Příliš snadné? Existuje jedno upozornění: obrázek musí být hostován na stejné doméně jako naše stránka nebo . Pokud tomu tak není, budete mít problémy s „poskvrněným plátnem“.

Zvyšování přes další vrcholy

Nyní byste měli mít funkční demo. Ale ještě to není hotové. V tuto chvíli můžeme obrázek protáhnout pouze jedním rohem, ale chceme použít všechny čtyři. Chcete-li to provést, musíte pochopit, jak to funguje.

Když obrázek natáhneme, musí se pohnout i rohy sousedící s drženým rohem, ale opačný konec obrázku musí být zafixován.

Kód můžeme změnit tak, že když se obrázek natáhne v libovolném úhlu, změní se. Pojďme aktualizovat funkci změny velikosti:

Změna velikosti = function(e)( var mouse=(),width,height,left,top,offset=$container.offset(); mouse.x = (e.clientX || e.pageX || e.originalEvent.touches .clientX) + $(window).scrollLeft();y = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); různě v závislosti na přetaženém rohu a omezení if($(event_state.evnt.target).hasClass("resize-handle-se"))( width = mouse.x - event_state.container_left; height = mouse.y - event_state.container_top ; left = event_state.container_left; top = event_state.container_top ) else if($(stav_udalosti.evnt.target).hasClass("změna velikosti-sw"))( šířka = stav_události.šířka_kontejneru - (myš.x - stav_události); .container_left = mouse.y - event_state.container_top; top = event_state.container_top else if($(stav_udalosti.evnt.target).hasClass("změna velikosti-nw") šířka = stav_události.šířka_kontejneru - (myš.x - stav_události.vlevo_kontejneru); výška = stav_události.výška_kontejneru - (myš.y - stav_události.vrch_kontejneru); vlevo = myš.x; top = myš.y; if(constrain || e.shiftKey)( top = mouse.y - ((šířka / orig_src.width * orig_src.height) - výška); ) ) else if($(event_state.evnt.target).hasClass("změna velikosti -handle-ne"))( width = mouse.x - event_state.container_left; height = event_state.container_height - (mouse.y - event_state.container_top); left = event_state.container_left; top = mouse.y; if(constrain | |. e.shiftKey)( top = mouse.y - ((šířka / orig_src.width * orig_src.height) - výška); ) ) // Volitelně zachovat poměr stran if(omezit || e.shiftKey)( výška = šířka / orig_src.width * orig_src.height ) if(width > min_width && height > min_height && width< max_width && height < max_height){ // To improve performance you might limit how often resizeImage() is called resizeImage(width, height); // Without this Firefox will not re-calculate the the image dimensions until drag end $container.offset({"left": left, "top": top}); } }

Nyní zkontrolujeme, který úchyt pro změnu velikosti byl použit, a použijeme potřebné změny.

Přesouvání obrázku

Nyní, když můžeme změnit velikost obrázku, možná jste si všimli, že se někdy „posune“. Je nutné přidat možnost přesunout objekt do středu rámu. Pojďme si naši inicializační funkci trochu rozšířit.

Init = function())( //... $container.on("myší dolů", "img", startMoving); )

Nyní přidáme funkce startMoving a endMoving, podobné startResize a endResize.

StartMoving = function(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove", move); $(document).on("mouseup", endMoving ); endMoving = function(e)( e.preventDefault(); $(document).off("mouseup", endMoving); $(document).off("mousemove", pohyb); );

V pohyblivé funkci musíme zjistit polohu levého horního čtverce. Měl by se rovnat počátečnímu s malým offsetem vypočítaným z pohybu ostatních polí.

Moving = function(e)( var mouse=(); e.preventDefault(); e.stopPropagation(); mouse.x = (e.clientX || e.pageX) + $(window).scrollLeft(); myš .y = (e.klientY || e.stránkaY) + $(okno).scrollTop(); $container.offset(( "vlevo": myš.x - (stav_události.myši_x - stav_události.kontejner_vlevo), "nahoře" : myš.y - (stav_události.myší_y - stav_události.nahoře_kontejneru) ));

Oříznutí obrázku

Nyní, když jsme se naučili měnit velikost, musíme přidat oříznutí obrázku. Namísto toho, abychom nechali uživatele bojovat s velikostí oříznutí, vytvořme pouze rám, který je třeba umístit na správné místo a vše bude kolem něj oříznuto. To jim dá příležitost upravit si obrázek, jak chtějí, a zároveň vytvořit výsledné obrázky jednotné velikosti.

Chcete-li to provést, musíte přidat následující kód HTML:

Je důležité pamatovat na to, že rámeček musí mít vždy jinou barvu než pozadí stránky, jinak mohou nastat problémy.

Pojďme také aktualizovat kód JavaScript:

Init = function())( //... $(".js-crop").on("click", crop); ); crop = function())( var crop_canvas, left = $(".overlay").offset().left - $container.offset().left, top = $(".overlay").offset().top - $container.offset().top, width = $(".overlay").width(), height = $(".overlay").height( crop_canvas = document.createElement("canvas"); = šířka; crop_canvas.height = výška crop_canvas.getContext("2d").drawImage(cíl_obrázku, vlevo, nahoře, šířka, výška, 0, 0, šířka, výška window.open(crop_canvas.toDataURL("image /); png"));)

Funkce oříznutí je podobná jako u resizeImage. Jediný rozdíl je v tom, že rozměry a pozici oříznutí získáváme z pozice rámečku.

Chcete-li oříznout, musíte nastavit devět parametrů operátoru drawImage na plátně. První je původní obrázek. Další čtyři jsou místa používaná pro operaci. Další čtyři jsou souřadnice místa, kde byste měli začít kreslit na plátno, a jakou velikost bude obrázek mít.

Přidání rozpoznávání dotyků a gest

Vytvořili jsme podporu myši. Nepřipravujme se o pozornost a mobilní zařízení.

Pro mousedown a mouseup existují ekvivalentní operátory - touchstart a touchend a pro mousemove je touchmove. Musíte si dát pozor, abyste si je nespletli s touchupem a touchdownem (jinak to bude sranda).

Přidejme touchstart a touchend všude tam, kde máme mousedown , a mouseup spolu s touchmove kdekoliv máme mousemove .

Vzhledem k tomu, že máme připojená mobilní zařízení, existuje možnost, že uživatel použije gesto „zmáčknutí“ obrázku prsty, aby jej zmenšil. Existuje jedna velmi pohodlná knihovna s názvem Hammer, která vám umožňuje rozpoznat mnoho gest. Ale protože potřebujeme pouze jeden, napíšeme ho krátce bez dalších skriptů.

Možná jste si všimli, že funkce saveEventState je již uložena v dotykových informacích. Teď to budeme potřebovat.

Nejprve zkontrolujeme přítomnost „dvou dotyků“ a vzdálenost mezi nimi. Díváme se také na to, zda se při pohybu zmenšuje vzdálenost mezi nimi. Nyní aktualizujme přesun:

Pohyb = function(e)( var mouse=(), dotyky; e.preventDefault(); e.stopPropagation(); dotyky = e.originalEvent.touches; mouse.x = (e.clientX || e.pageX || touches.clientX) + $(window).scrollLeft(mys.y = (e.clientY || e.pageY || touches.clientY) + $(window).scrollTop( $container.offset( "); left": mouse.x - (event_state.mouse_x - event_state.container_left), "top": mouse.y - (event_state.mouse_y - event_state.container_top) )); // Sledujte gesto přiblížení sevřením při pohybu if(event_state. dotyky && event_state.touches.length > 1 && touches.length > 1)( var width = event_state.container_width, height = event_state.container_height; var a = event_state.touches.clientX - event_state.touches.clientX; a = a * a ; var b = stav_udalosti.dotyky.klientY - stav_udalosti.dotyky.klientY; b var dist2 = Math.sqrt(a + b); var ratio = dist2 /dist1; šířka = šířka * poměr; výška = výška * poměr; // Pro zlepšení výkonu můžete omezit, jak často se resizeImage() nazývá resizeImage(width, height); ));

Na základě těchto údajů zmenšíme nebo zvětšíme náš obrázek a upravíme jeho výšku a délku.

To je vše. Můžete otevřít

Ahoj všichni, jmenuji se Anna Blok a dnes si povíme, jak oříznout obrázky bez použití grafických programů.

Kde to může být užitečné?

Především na webech, kde obsah s obrázky s největší pravděpodobností nebude ořezán pro žádný konkrétní blok.

Pozoruhodný příklad: blog na WordPressu.

Řekněme, že chcete, aby obálka vašeho článku měla poměr stran 1:1 (čtverec). Vaše akce:

Stáhněte si vhodný obrázek z internetu;
Ořízněte jej ve Photoshopu na požadované proporce;
Publikovat článek.

Když stránku navštívíte, uvidíte výsledek, který jste očekávali.

Ale předpokládejme, že jste zapomněli oříznout obrázek ve Photoshopu a stáhli si náhodný obrázek jako obal z internetu, co se stane potom?! Přesně tak, rozložení se rozbije. A pokud jste CSS vůbec nepoužili, pak HD obrázek může zcela zablokovat celý pohled na text. Proto je důležité vědět, jak oříznout obrázky pomocí stylů CSS.

Podívejme se různé situace jak to lze implementovat nejen pomocí CSS, ale také SVG.

Příklad 1

Zkusme oříznout obrázek, který je umístěn pomocí background-image. Pojďme si vytvořit malé HTML značení

Pojďme ke stylování CSS. Pomocí background-image přidáme obrázek, určíme rámečky pro náš obrázek, vycentrujeme obrázek pomocí background-position a nastavíme velikost pozadí:

jpg); pozadí-pozice:střed uprostřed; background-size:cover; šířka:300px; výška:300px; )

Toto byla první a nejjednodušší metoda pro oříznutí obrázku. Nyní se podívejme na druhý příklad.

Příklad 2

Předpokládejme, že máme stále stejný box kontejner, uvnitř kterého je img tag s obrázkem, který nyní upravíme.

Náš obrázek také vycentrujeme vzhledem k objektu, který vytvoříme. A používáme vlastnost, která se používá poměrně zřídka: object-fit .

Box ( position: relativní; overflow:hidden; width:300px; height:300px; ) .box img ( position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); šířka:300px výška:300px;

Podle mého názoru je to tak nejlepší metoda. Pro blogy je ideální, pokud pro příspěvky používáte obrázky zcela jiných rozměrů.

Více o HTML a CSS se můžete dozvědět zde:

Příklad 3

U obrázků můžeme v tuto chvíli také vytvořit ořez, pokud je vložíme do prvků SVG. Vezměme si jako příklad kruh. SVG můžeme vytvořit pomocí značek. Vytvořte značku svg border, která bude uvnitř obsahovat značku kruhu a značku vzoru. Do značky vzor napíšeme značku obrázku. V něm určíme atribut xlink:href a přidáme obrázek. Přidáme také atributy width a height. Ale to není vše. Budeme muset přidat hodnotu výplně. Aby byla naše práce považována za dokončenou, přidáme do značky obrázku pomocný atribut zachováníAspectRatio, který nám umožní vyplnit náš obrázek „od začátku do konce“ kolem celého kruhu.

Tuto metodu nemohu nazvat univerzální. Ale lze jej použít ve výjimečných případech. Pokud bychom se například dotkli tématu blogu, pak by tato metoda mohla ideálně zapadnout do avatara autora, který článek píše.

Více o HTML a CSS se můžete dozvědět zde:

Výsledek:
Podívali jsme se na 3 způsoby ořezávání obrázků na webových stránkách: pomocí obrázku na pozadí, pomocí značky img a spojeného se vzorem svg s vložením bitmapových obrázků pomocí značky obrázku. Pokud znáte nějaké další metody pro oříznutí obrázku pomocí SVG, podělte se o ně v komentářích. Bude užitečné nejen pro mě, ale i pro ostatní, aby o nich věděli.

Nezapomeňte se zeptat profesionálů na FrontendHelp online na vaše otázky ohledně rozvržení nebo vývoje front-endu.

Při přípravě obrázků na WEB je často nutné je oříznout, aby se zvýraznily potřebné části obrázku a oříznout nepotřebné. Kromě čistě uměleckých soudů je ke zmenšení souboru zapotřebí takové ořezávání nebo, jak se také říká, ořezávání. Čím menší je obrázek, tím menší je velikost jeho souboru a tím rychleji se načte na WEBovou stránku.

Jak odstranit nepotřebné části obrázku

Podívejme se, jak se vlastně ořez provádí odstraněním úzkého černého pruhu u spodního okraje fotografie, který se nepodařilo dostatečně zesvětlit. Oříznutí se provádí speciálním nástrojem Crop Tool (C).

Kliknutím na tlačítko Crop Tool (C) na panelu nástrojů vyberte tento nástroj.

Nastavte ukazatel myši na tvar v levém horním rohu obrázku.

Klikněte a podržte levé tlačítko myši.

Aniž byste uvolnili levé tlačítko myši, přesuňte ukazatel myši na spodní okraj pravého okraje fotografie tak, aby tečkovaný rámeček výběru, který se objeví, neobsahoval úzký černý pruh na spodním okraji obrázku.

Uvolněte levé tlačítko myši. Rám se uzamkne a v jeho rozích a uprostřed stran se objeví čtvercové značky. Oblast obrázku mimo rámeček pro oříznutí bude ztmavená, čímž bude označena část fotografie, která se ořezává.

Pomocí těchto značek můžete upravit a otočit okraj rámu. Chcete-li přesunout rámeček pro oříznutí, jednoduše umístěte ukazatel myši do vybrané oblasti a přetáhněte jej požadovaný prostor. Chcete-li změnit velikost vybrané oblasti, přesuňte jeden z rohových úchytů. Pokud při pohybu podržíte tlačítko Shift, proporce plochy zůstanou zachovány. Chcete-li rámeček otočit, umístěte ukazatel myši, který bude mít tvar zakřivené šipky, mimo oblast výběru a pohybem myši dosáhněte vhodné polohy pro rámeček. Chcete-li oříznutí zrušit, jednoduše stiskněte tlačítko Esc.

Přesunutím úchytů rámečku výběru se ujistěte, že rámeček pro oříznutí zahrnuje celý obrázek, nepočítaje úzký černý pruh na spodním okraji fotografie.

Dvakrát klikněte do ořezového pole nebo stiskněte Enter. Fotografie bude oříznuta podél nastaveného okraje.

Jak zmenšit velikost obrázku

Ale i po oříznutí je fotografie na WEB stránku poměrně velká. Při rozlišení obrazovky 800 x 600 pixelů (a podle statistik s tímto rozlišením v současnosti pracuje většina uživatelů webu) zabírá fotografie na displeji značné množství místa. Soubor obrázku této velikosti bude navíc poměrně velký a jeho načítání bude trvat dlouho. Zmenšíme tedy velikost obrázku, což zase sníží velikost souboru.

Vyberte příkaz nabídky Obrázek - Velikost obrázku. Na displeji se zobrazí dialogové okno Image Size.

V nejvyšší části dialogu ve skupině ovládacích částí Rozměry pixelů (Dimension in pixels) je uvedena aktuální velikost souboru ve formátu PSD - 400,3K a také aktuální šířka (Width) a výška (Height) obrázek v pixelech. Vaše hodnoty po oříznutí se mohou mírně lišit.

V ovládací skupině Velikost dokumentu je uvedena velikost dokumentu v centimetrech a jeho grafické rozlišení (Rozlišení). Když je nastaven příznak Omezit proporce, program automaticky zachová proporce obrázku při změně jednoho z rozměrů – šířky nebo výšky.

Když změníte velikost obrázku ve skupině ovládacích částí Rozměry v pixelech, jeho vlastnosti pro dokument se odpovídajícím způsobem změní – buď jeho rozměry, nebo grafické rozlišení, v závislosti na tom, zda je zaškrtnutý nebo zrušený příznak Převzorkovat obrázek. Pokud je tento příznak nastaven, změní se velikost dokumentu a podle toho i velikost souboru obrázku. Pokud je příznak vymazán, lze změnit pouze rozměry dokumentu. Při tom všem se odpovídajícím způsobem změní jeho grafické rozlišení a velikost obrázku v pixelech a velikost souboru zůstanou bez konfigurace.

Při zmenšení rozměru nebo grafického rozlišení Adobe Photoshop odstraňuje z obrázku superredundantní informace, a když se tyto charakteristiky zvýší, vytvoří chybějící informace na základě barevných hodnot stávajících pixelů. V obou případech program používá jednu z 5 interpolačních metod, které lze vybrat v rozevíracím seznamu Převzorkovat obrázek.

Vzhledem k tomu, že fotografie, jejíž velikost chceme změnit, byla vytvořena pro zobrazení na displeji, nemělo by se měnit její grafické rozlišení.

Ujistěte se, že je zaškrtnuto políčko Převzorkovat obrázek, aby se zachovalo grafické rozlišení obrázku a změnila se jeho velikost.

Do vstupního pole Šířka ve skupině Rozměry v pixelech ovládacích částí zadejte novou hodnotu pro šířku obrázku v pixelech - 300. Hodnota výšky obrázku ve vstupním poli Výška se automaticky změní, stejně jako velikost dokumentu v poli Velikost dokumentu. skupina ovládacích částí ( Velikost dokumentu). V horní části dialogu také uvidíte novou, zmenšenou hodnotu velikosti souboru a vedle ní v závorkách předchozí svazek.

Zavřete dialogové okno Velikost obrázku kliknutím na OK. Budou použity zadané charakteristiky a velikost obrázku v okně dokumentu se zmenší.

Jak se vyhnout ztrátě vlastnosti obrázku při změně jeho velikosti

Jak již bylo naznačeno, zmenšením rozměru obrázku se z něj odstraní superredundantní informace, což vede k určitému poklesu ostrosti. Použitím filtru Unsharp Mask lze do určité míry obnovit ostrost snímku.

Vyberte příkaz nabídky Filtr - Zostřit - Neostřit maska (Filtr - Ostrost - Ostrost obrysu). Na displeji se objeví dialog Unsharp Mask.

Posunutím posuvníku Množství obnovte ostrost fotografie. Hodnota tohoto parametru by se měla pohybovat v rozmezí 50-60 %.

Klepnutím na OK zavřete dialogové okno Urisharp Mask. Obraz bude ostřejší.

Uložte dokument výběrem příkazu nabídky Soubor - Uložit.

Protože při změně velikosti obrázku se jeho kvalita snižuje kvůli odstranění nepotřebných informací, je třeba se této operaci pokud možno vyhnout. Pokud skenujete obrázek, je lepší v tomto kroku zjistit jeho velikost a skenovat v rozlišení, které zajistí nejlepší kvalitu zobrazení.