Die Praxis der Implementierung des Bildanpassungsprozesses befindet sich noch in der Entwicklung. Existiert große Menge Ideen und Anregungen zur Bearbeitung der Bilder.

In diesem Tutorial schauen wir uns eine hübsche kleine Bibliothek an, die es Ihnen nicht nur ermöglicht, die Größe von Bildern automatisch zu ändern, wenn Sie die Einstellungen des Ansichtsfensters ändern, sondern die Bilder auch basierend auf einem bestimmten Fokuspunkt zuschneidet. Darüber hinaus werden alle Aktionen in reinem CSS ausgeführt.

Treffen Sie Focal Point

Schwerpunkt – GitHub-Projekt und CSS-Bibliothek? erstellt von Adam Bradley. Das Konzept der Reaktionsfähigkeit erfordert, dass Bilder Größe und Position ändern, um optimale Proportionen für das aktuelle Ansichtsfenster zu erreichen. Focal Point führt diese Idee noch einen Schritt weiter und ändert nicht nur die Größe von Bildern, sondern schneidet sie auch zu.

Das Problem bei dieser Idee ist, dass durch zufälliges Zuschneiden wichtige Teile des Bildes entfernt werden können! Im obigen Beispiel befindet sich das wichtige Objekt beispielsweise auf der rechten Seite des Bildes. Wie kann verhindert werden, dass es abgeschnitten wird?

Mit dem Brennpunkt können Sie den Zielbereich des Bildes festlegen, der intakt bleiben soll (Brennpunkt). Auf diese Weise sehen die Bilder selbst beim Zuschneiden durch die Bibliothek immer noch großartig aus.

Wie es funktioniert?

Die Implementierung von Focal Point ist ein einzigartiger, aber gleichzeitig einfacher Prozess. Lassen Sie uns zunächst besprechen, wie Sie den Schwerpunkt auswählen, und dann in den Implementierungscode eintauchen.

Wenn Sie mit Focal Point ein Bild in eine Webseite einfügen, wird es automatisch in ein unsichtbares 12x12-Raster unterteilt. Dabei spielt es keine Rolle, wie groß das Bild ist, das Raster passt sich dem Bild an.

Jetzt haben wir ein System zum Teilen des Bildes und können einen Punkt auf dem Raster bestimmen, der als Brennpunkt dient. Beim Zuschneiden eines Bildes wird der angegebene Punkt als zentraler Teil verwendet, um den herum der Zuschnitt erfolgt. Das heißt, wenn wir das Gesicht des Mannes auswählen, bleibt dieser wichtige Aspekt des Bildes erhalten, nachdem Änderungen vorgenommen wurden.

Sie müssen den wichtigen Bereich finden und dann die Anzahl der Rastereinheiten von der Bildmitte bis dorthin zählen. In unserem Beispiel befindet sich die Fläche drei Einheiten rechts und drei Einheiten oberhalb der Mitte des Rasters (englische Namen werden in der Abbildung belassen, da sie mit den Arbeitsparametern der Bibliothek übereinstimmen).

Code

Jetzt können wir den Schwerpunkt festlegen und es ist Zeit, den Implementierungscode zu verstehen. Laden Sie zunächst das Projekt von GitHub herunter und verknüpfen Sie die CSS-Datei mit Ihrem HTML-Dokument.

Nach den vorbereitenden Vorgängen müssen Sie zwei div-Elemente und ein img-Tag hinzufügen. Ja, das Markup erweist sich für ein Bild als überflüssig, und dieser Umstand ist ein Nachteil der Bibliothek. Hier ist ein typisches Markup:

Wie Sie sehen können, hat das äußere div-Element die Klasse „ Mittelpunkt“, und das innere enthält unser Bild ohne Klassen.

Konvertieren von Rastereinheiten in Klassen

Jetzt müssen Sie den Brennpunkt auf die Stelle richten, an der sich der Fokus des Bildes befindet. Unser Schwerpunkt ist um drei Einheiten nach rechts und drei Einheiten nach oben verschoben. Daher geben wir an für externes Element div-Klassen „ rechts-3" Und " up-3″.

Die Implementierung unseres Codes führt dazu, dass die Bilder auf großen Bildschirmen in voller Größe angezeigt werden und bei Verkleinerung des Betrachtungsfensters durch Beschneiden um den Brennpunkt verkleinert werden.

Beachten Sie, dass das Bild rechts nicht nur kleiner ist, sondern auch um einen wichtigen Teil herum beschnitten ist. Alles wird mit CSS erledigt!

Seitenstruktur

Um uns besser vorzustellen, wie die Bibliothek in realen Anwendungen verwendet wird, erstellen wir eine einfache Seite.

Definieren wir ein div-Element mit der Klasse „ Spalte”:

Fügen wir einen Titel und einen Absatz hinzu, um den Inhalt der Seite zu simulieren:

Als Nächstes fügen wir ein Bild ein, wie im vorherigen Beispiel gezeigt (mit zwei Divs und Klassen als Schwerpunkt):

Um das Beispiel zu vervollständigen, kopieren wir den Code mit einem anderen Bild und einem anderen Fokuspunkt.

Beim zweiten Bild liegt der Brennpunkt an einer anderen Stelle:

CSS

Lassen Sie uns Stile für unsere Seite definieren. Das Anpassen von Bildern und das Arbeiten mit einem Schwerpunkt liegen außerhalb unseres Fachgebiets. Alles, was Sie tun müssen, ist festzustellen Aussehen Elemente. Beispielsweise wird die Seite in zwei Spalten unterteilt und Stile für den Text festgelegt.

* ( Rand: 0; Polsterung: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box ; ) .column ( float: left; overflow: auto; padding: 20px; width: 50%; ) h1 ( text-transform: großbuchstabe; Schriftart: fett 45px/1,5 Helvetica, Verdana, serifenlos; ) p ( margin- unten: 20px; Farbe: #888; Schriftart: 14px/1,5 Helvetica, Verdana, serifenlos; ) @ Medien alle und (maximale Breite: 767px) (p (Schriftgröße: 12px;) h1 (Schriftgröße: 35px;)) @media all und (maximale Breite: 550px) (h1 (Schriftgröße: 23px;))

Sehen wir es uns in Aktion an

Jetzt können Sie sehen, wie die Demo funktioniert. Wenn Seiten in einem großen Sichtfenster angezeigt werden (z. B. auf einem Monitorbildschirm) Desktop-Computer), dann werden die Bilder vollständig angezeigt:

Wenn Sie nun die Größe des Ansichtsfensters verkleinern oder die Demoseite von einem mobilen Gerät aus ansehen, können Sie sehen, wie sich die Bilder anpassen. Wenn das Fenster kleiner wird, werden die Bilder nicht nur kleiner, sondern auch beschnitten.

Wie effektiv ist diese Technik aus gestalterischer Sicht? Je kleiner das Bild wird, desto stärker sticht der Fokus hervor. Mit dieser Bibliothek können Sie sicher sein, dass Benutzer auch auf kleinen Bildschirmen wichtige Informationen zur Verfügung haben.

Browser-Kompatibilität

Die Bibliothek funktioniert in allen neuen Browsern. In IE8 werden Bilder in der Größe geändert, aber nicht zugeschnitten. Aber derzeit verfügen 99,99 % der Websites nicht über einen solchen Bildanpassungsmechanismus mit automatischem Zuschneiden, sodass die Reaktion von IE8 nicht kritisch ist.

Was ist da drin?

Schauen wir uns nun an, wie die Bibliothek funktioniert.

Der erste Teil des Codes ist eine grundlegende CSS-Lösung für responsive Bilder.

Brennpunkt (Breite: 100 %; Höhe: automatisch; Überlauf: ausgeblendet;) .focal-point img (Breite: 100 %; maximale Breite: 100 %; Höhe: automatisch; -ms-interpolation-mode: bikubisch;) .focal-point div ( Position: relativ; maximale Breite: keine; Höhe: automatisch; )

Der folgende Code ist etwas komplizierter. Zunächst wird die Medienabfrage bei 767px implementiert. Anschließend werden negative Randwerte für jede der verfügbaren Klassen verwendet, um das Bild zuzuschneiden. Im Text der Lektion stellen wir nur die Klassen vor „ up-3" Und " rechts-3″, die in der Demonstration verwendet wurden.

@media all and (max-width: 767px) ( /* 4x3 Landscape Shape (Default) */ .focal-point div ( margin: -3em -4em; ) /* Landscape up (Total 6em) */ .up-3 div ( Rand oben: -1,5 em; Rand unten: -4,5 em; ) .right-3 div ( Rand links: -6 em; Rand rechts: -2 em; ) )

Es gibt hier nicht viel Code, aber es ist ziemlich elegant. Negative Ränder werden bei EM-Geräten verwendet, um Bilder um einen bestimmten Punkt herum zuzuschneiden.

Beschreibung

Die Clip-Eigenschaft gibt den Bereich des positionierten Elements an, in dem sein Inhalt angezeigt wird. Alles, was nicht in diesen Bereich passt, wird abgeschnitten und unsichtbar. Derzeit ist die einzige verfügbare Flächenform ein Rechteck. Alles andere bleibt nur in Träumen. Clip funktioniert nur für absolut positionierte Elemente.

Syntax

Clip: rect(Y1, X1, Y2, X2) | auto | erben

Werte

Die verwendeten Werte sind der Abstand vom Rand des Elements zum Beschneidungsbereich, der in CSS-Einheiten festgelegt wird – Pixel (px), em usw. Wenn der Rand des Bereichs unverändert bleiben muss, sollten Sie ihn festlegen es auf auto , die Position der verbleibenden Werte ist in Abb. dargestellt. 1.

Reis. 1. Eigenschaftswerte ausschneiden

HTML5 CSS2.1 IE Cr Op Sa Fx

Ergebnis dieses Beispiel in Abb. dargestellt. 2.

Reis. 2. Clip im Safari-Browser verwenden

Objektmodell

document.getElementById("elementID").style.clip

Browser

Internet Explorer Bis einschließlich Version 7.0 funktioniert es mit einer anderen Notationsform, bei der Koordinatenwerte durch ein Leerzeichen statt durch ein Komma getrennt werden – clip : rect(40px auto auto 40px) . Außerdem unterstützt Internet Explorer bis einschließlich Version 7.0 den Vererbungswert nicht.

Betrachten wir drei einfache Wege, mit dem nur ein Teil eines Bildes auf einer Website angezeigt werden kann. Beachten Sie, dass mit Hilfe dieser Methoden das Bild nicht im wahrsten Sinne des Wortes auf eine bestimmte Größe zugeschnitten wird, sondern nur der Teil davon angezeigt wird, den wir sehen müssen, und der unnötige Bereich ausgeblendet wird.

Diese Methoden können sehr nützlich sein, wenn Sie die Größe eines Bildes ändern oder eine Vorschau erstellen müssen, beispielsweise in einem Newsfeed usw.

Methode 1: Verwendung negativer Margen

Das Bild muss in einem übergeordneten Element platziert werden, in unserem Fall einem div. Das übergeordnete Element muss ein schwebendes Element sein (oder eine bestimmte Breite haben). Die Methode funktioniert nicht bei Elementen auf Blockebene oder in voller Breite.

Lassen Sie uns für alle vier Seiten negative Ränder festlegen: oben (oben), rechts (rechts), unten (unten) und links (links). Negative Ränder bestimmen, wie stark das Bild des übergeordneten Elements in jede Richtung beschnitten wird. Als Nächstes setzen wir die Overflow-Eigenschaft des übergeordneten Elements auf „hidden“, um die Ränder auszublenden, die sich hinter dem zugeschnittenen Bildbereich befinden.

<div class = "crop" >

Ernte

schweben: links;

Überlauf versteckt;

Bild zuschneiden

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

Methode 2: Verwendung der absoluten Positionierung

Mit dieser Methode legen wir die Breite und Höhe des übergeordneten Elements fest und setzen die Positionseigenschaft auf relativ. Die Breite und Höhe bestimmen die Abmessungen des angezeigten Feldes. Für ein Bild innerhalb eines übergeordneten Elements legen Sie die Positionierungseigenschaft auf „absolut“ fest. Anschließend legen wir mithilfe der Eigenschaften „oben“ und „links“ fest, welcher Teil des Bildes angezeigt werden soll.

<div class = "crop" >

Ernte

schweben: links;

Überlauf versteckt;

Position: relativ;

Breite: 270px;

Höhe: 260px;

Bild zuschneiden

Position: absolut;

oben: -70px;

links: -175px;

Methode 3: Verwendung der Slip-Eigenschaft

Diese Methode ist die einfachste, da die Clip-Eigenschaft bestimmt, welcher Teil des Elements angezeigt werden muss. Diese Methode hat jedoch zwei Nachteile.

Zunächst muss das zugeschnittene Element absolut positioniert werden. Deshalb müssen wir hinzufügen zusätzliches Element Berechnen Sie die Größe des sichtbaren Bereichs des Bildes, addieren Sie diese Größe und setzen Sie die Float-Eigenschaft auf das übergeordnete Element.

Zweitens wird die Größe des sichtbaren Bereichs nicht auf die Größe des ausgeschnittenen Teils reduziert, sondern bleibt gleich der Größe des gesamten Bildes (der Bereich außerhalb des ausgeschnittenen Teils wird nur ausgeblendet). Wir müssen die absolute Positionierung verwenden, um den sichtbaren Bereich in die obere linke Ecke des übergeordneten Elements zu verschieben.

<div class = "crop" >

Ernte

schweben: links;

Position: relativ;

In diesem Artikel erfahren Sie, wie Sie mithilfe eines Elements in HTML5 die Größe von Bildern ändern und zuschneiden. Und wenn wir schon dabei sind, geben wir den Steuerelementen ein stilvolles Design, genau wie in Bildbearbeitungsprogrammen.

Heutzutage sind viele Websites und Webanwendungen mit Bildverarbeitungstechnologie ausgestattet. Dies kann serverseitig erfolgen, wodurch Zeitaufwand für den Transport eines potenziell großen Bildes entsteht. Um dies zu vermeiden, können Sie Bilder auf dem Client-Computer verarbeiten, um den Vorgang zu beschleunigen.

Wir tun dies über die Leinwand, zeichnen die Bilder in der gewünschten Größe und rufen dann neue Bilder ab. Viele Browser unterstützen diese Methode, sodass wir mit nur geringfügigen Leistungseinschränkungen sofort loslegen können.

Das Formatieren großer Bilder kann den Browser verlangsamen oder dazu führen, dass er ganz stoppt. Dies bringt uns dazu, darüber nachzudenken, den hochgeladenen Bildern Grenzen zu setzen. Wenn die Qualität der resultierenden Bilder wichtig ist, werden wir möglicherweise überrascht sein, was der Browser daraus macht. Um die Qualität der Bildverarbeitung zu verbessern, finden Sie im Internet verschiedene Technologien, auf die wir hier jedoch nicht eingehen.

Zu diesem Zweck beginnen wir mit der Arbeit!

Markierung

In unserer Demo werden wir mit einem vorgegebenen Bild arbeiten:

Alle! Wir brauchen kein anderes HTML.

CSS

Der CSS-Code wird auch nicht sehr groß sein. Definieren wir Stile für resize-container und das Bild selbst.

Resize-Container (Position: relativ; Anzeige: Inline-Block; Cursor: verschieben; Rand: 0 automatisch;) .resize-container img (Anzeige: Block) .resize-container:hover img, .resize-container:active img ( Umriss: 2px gestricheltes RGBA(222,60,80,.9); )

Lassen Sie uns nun die Positionen und Stile für die einzelnen „Größenänderungsgriffe“ festlegen. Dabei handelt es sich um kleine Quadrate in den Ecken der Bilder, die wir ziehen, um die Bildgröße zu ändern.

Resize-handle-ne, .resize-handle-ne, .resize-handle-se, .resize-handle-nw, .resize-handle-sw ( Position: absolut; Anzeige: Block; Breite: 10 Pixel; Höhe: 10 Pixel; Hintergrund: rgba(222,60,80,.9); z-index: 999; ) .resize-handle-nw ( oben: -5px; links: -5px; Cursor: nw-resize; ) .resize-handle- sw ( unten: -5px; links: -5px; Cursor: sw-resize; ) .resize-handle-ne ( oben: -5px; rechts: -5px; Cursor: ne-resize; ) .resize-handle-se ( unten: -5px; rechts: -5px; Cursor: se-resize; )

JavaScript

Beginnen wir mit der Erstellung einer Variablen und einer Leinwand in 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"));

Jetzt erstellen wir eine Triggerfunktion, die sofort ausgeführt wird. Diese Funktion arbeitet mit dem Container, in dem sich das Bild befindet, legt die Größe fest und kopiert das Originalbild zum Zuschneiden. Wir weisen außerdem ein jQuery-Objekt zu, damit wir später darauf verweisen und Mausbewegungsoperatoren verwenden können, um auf Mauszüge zu reagieren.

Var resizeableImage = function(image_target) ( // ... init = function())( // Erstellen Sie ein neues Bild mit einer Kopie des ursprünglichen Quellcodes // Bei der Größenänderung verwenden wir immer diese Originalkopie als Basis-orig_src. src =image_target.src; // Größenänderungs-Handles hinzufügen $(image_target).wrap("

").Vor(" ").Vor(" ").nach(" ").nach(" "); // Eine Variable für den Container abrufen $container = $(image_target).parent(".resize-container"); // Ereignisse hinzufügen $container.on("mousedown", ".resize-handle", startResize ); ); //... drin(); )

Die Funktionen startResize und endResize teilen dem Browser mit, wann er auf Mausbewegungen achten und wann er aufhören soll.

StartResize = function(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove", resizing); $(document).on("mouseup", endResize ); ); endResize = function(e)( e.preventDefault(); $(document).off("mouseup touchend", endResize); $(document).off("mousemove touchmove", Größenänderung); );

Bevor Sie mit der Mausverfolgung beginnen, müssen Sie beim Anfordern einer Seite die aktuellen Clienteinstellungen scannen. Wir speichern sie in der Variablen event_state und verwenden sie später in unserer Arbeit.

SaveEventState = function(e)( // Speichern Sie die anfänglichen Ereignisdetails und den Containerstatus. 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(); event_state. mouse_y = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); // Dies ist ein Fix für mobile Safari // Aus irgendeinem Grund ist ein nicht zulässig direkte Kopie der touches-Eigenschaft if(typeof e.originalEvent.touches !== "undefiniert")( 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; )); ) event_state.evnt = e; )

Die Größenänderungsfunktion ist die wichtigste. Es wird aktiviert, wenn das Bild gestreckt wird. Jedes Mal berechnen wir neue Bildgrößen abhängig von der neuen Position der Quadrate.

Größenänderung = function(e)( var mouse=(),width,height,left,top,offset=$container.offset(); mouse.x = (e.clientX || e.pageX || e.originalEvent.touches .clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); width = Maus. x - event_state.container_left; height = mouse.y - event_state.container_top; left = event_state.container_left; top = event_state.container_top; if(constrain || e.shiftKey)( height = width / orig_src.width * orig_src.height; ) if(width > min_width && height > min_height && width< max_width && height < max_height){ resizeImage(width, height); // Without this Firefox will not re-calculate the the image dimensions until drag end $container.offset({"left": left, "top": top}); } }

Als Nächstes fügen wir eine Option hinzu, um die Größe des Bildes mithilfe der Umschalttaste oder einer Variablen zu begrenzen.

beachten Sie: Da wir tatsächlich die Größe des Bildes ändern, anstatt ihm nur eine neue Länge und Höhe zu geben, lohnt es sich, darüber nachzudenken, inwieweit wir die Funktion resizeImage zur Steuerung der Serverleistung verwenden können.

Neue Bildgrößen

Das Zeichnen von Bildern in Canvas ist so einfach wie drawImage . Wir legen die Höhe und Länge des Bildes fest und stellen dann das Original bereit. Wir verwenden auch toDataURL, um eine Base64-codierte Version des Operationsergebnisses zu erhalten.

Es werden ausführliche Erläuterungen zu den für diesen Vorgang verfügbaren Optionen bereitgestellt.

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

Zu einfach? Es gibt eine Einschränkung: Das Bild muss auf derselben Domain gehostet werden wie unsere Seite oder die . Ist dies nicht der Fall, liegt ein Problem mit „tainted canvas“ vor.

Zunehmend durch andere Eckpunkte

Sie sollten jetzt eine funktionierende Demo haben. Aber es ist noch nicht fertig. Im Moment können wir das Bild nur über eine Ecke strecken, wir wollen aber alle vier nutzen. Dazu müssen Sie verstehen, wie es funktioniert.

Wenn wir das Bild strecken, müssen sich auch die Ecken neben der gehaltenen Ecke bewegen, aber das gegenüberliegende Ende des Bildes muss fixiert sein.

Wir können den Code so ändern, dass er sich ändert, wenn das Bild in einem beliebigen Winkel gestreckt wird. Aktualisieren wir die Größenänderungsfunktion:

Größenänderung = function(e)( var mouse=(),width,height,left,top,offset=$container.offset(); mouse.x = (e.clientX || e.pageX || e.originalEvent.touches .clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); // Bild positionieren unterschiedlich je nach gezogener Ecke und Einschränkungen 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($(event_state.evnt.target).hasClass("resize-handle-sw"))( width = event_state.container_width - (mouse.x - event_state .container_left); height = mouse.y - event_state.container_top; left = mouse.x; top = event_state.container_top; ) else if($(event_state.evnt.target).hasClass("resize-handle-nw")) ( width = event_state.container_width - (mouse.x - event_state.container_left); height = event_state.container_height - (mouse.y - event_state.container_top); links = maus.x; top = mouse.y; if(constrain || e.shiftKey)( top = mouse.y - ((width / orig_src.width * orig_src.height) - height); ) ) else if($(event_state.evnt.target).hasClass("resize -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 - ((width / orig_src.width * orig_src.height) - height); ) ) // Optional Seitenverhältnis beibehalten if(constrain || e.shiftKey)( height = width / 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}); } }

Nun prüfen wir, welches Resize-Handle verwendet wurde und übernehmen die notwendigen Änderungen.

Ein Bild verschieben

Da wir nun die Größe des Bildes ändern können, ist Ihnen vielleicht aufgefallen, dass es manchmal „herausrutscht“. Es ist notwendig, die Möglichkeit hinzuzufügen, ein Objekt in die Mitte des Rahmens zu verschieben. Erweitern wir unsere Initialisierungsfunktion ein wenig.

Init = function())( //... $container.on("mousedown", "img", startMoving); )

Jetzt fügen wir die Funktionen startMoving und endMoving hinzu, ähnlich wie startResize und endResize.

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

In der Bewegungsfunktion müssen wir die Position des oberen linken Quadrats ermitteln. Es sollte dem ursprünglichen Wert entsprechen, mit einem kleinen Versatz, der aus der Bewegung anderer Quadrate berechnet wird.

Verschieben = function(e)( var mouse=(); e.preventDefault(); e.stopPropagation(); mouse.x = (e.clientX || e.pageX) + $(window).scrollLeft(); Maus .y = (e.clientY || e.pageY) + $(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) )); );

Ein Bild zuschneiden

Nachdem wir nun gelernt haben, wie man die Größe ändert, müssen wir das Bild zuschneiden hinzufügen. Anstatt den Benutzern die Mühe mit der Zuschnittgröße zu überlassen, erstellen wir einfach einen Rahmen, der an der richtigen Stelle platziert werden muss, und alles um ihn herum wird zugeschnitten. Dies gibt ihnen die Möglichkeit, das Bild nach Belieben anzupassen und gleichzeitig die Größe der resultierenden Bilder zu vereinheitlichen.

Dazu müssen Sie den folgenden HTML-Code hinzufügen:

Ernte

Es ist wichtig zu bedenken, dass der Rahmen immer eine andere Farbe als der Hintergrund der Seite haben muss, da es sonst zu Problemen kommen kann.

Überlagerung ( Position: absolut; links: 50 %; oben: 50 %; Rand links: -100 Pixel; Rand oben: -100 Pixel; Z-Index: 999; Breite: 200 Pixel; Höhe: 200 Pixel; Rand: durchgehend 2 Pixel rgba( 222,60,80,.9); Boxgröße: Inhaltsbox; Zeigerereignisse: keine; ) .overlay:after, .overlay:before ( Inhalt: ""; Position: absolut; Anzeige: Block; Breite: 204px; Höhe: 40px; linker Rand: gestrichelt 2px rgba(222,60,80,.9); rechter Rand: gestrichelt 2px rgba(222,60,80,.9); ) .overlay:before ( oben: 0; Rand links: -2px; Rand oben: -40px; ) .overlay:after ( unten: 0; Rand links: -2px; Rand unten: -40px; ) .overlay-inner:after, .overlay -inner:before ( Inhalt: „“; Position: absolut; Anzeige: Block; Breite: 40 Pixel; Höhe: 204 Pixel; Rand oben: gestrichelt 2 Pixel rgba(222,60,80,.9); Rand unten: gestrichelt 2 Pixel 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 ( position: absolute; vertikale Ausrichtung: unten; rechts: 5px; unten: 5px; Polsterung: 6px 10px; Z-Index: 999; Hintergrundfarbe: rgb(222,60,80); Grenze: keine; Randradius: 5px; Farbe: #FFF; )

Aktualisieren wir auch den JavaScript-Code:

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"); crop_canvas . width = width; crop_canvas.height = height; crop_canvas.getContext("2d").drawImage(image_target, left, top, width, height, 0, 0, width, height); window.open(crop_canvas.toDataURL(" Bild /png")); )

Die Crop-Funktion ähnelt resizeImage. Der einzige Unterschied besteht darin, dass wir die Abmessungen und die Zuschnittposition aus der Position des Rahmens erhalten.

Zum Zuschneiden müssen Sie im Canvas neun Parameter für den drawImage-Operator festlegen. Das erste ist das Originalbild. Die nächsten vier sind die Orte, an denen die Operation durchgeführt wird. Weitere vier sind die Koordinaten der Stelle, an der Sie mit dem Zeichnen auf der Leinwand beginnen sollen, und die Größe des Bildes.

Berührungs- und Gestenerkennung hinzugefügt

Wir haben eine Mausunterstützung erstellt. Lassen wir uns nicht die Aufmerksamkeit entziehen und mobile Geräte.

Für „mousedown“ und „mouseup“ gibt es äquivalente Operatoren – touchstart und touchend – und für „mousemove“ gibt es „touchmove“. Man muss aufpassen, dass man sie nicht mit Touchup und Touchdown verwechselt (sonst wird es lustig).

Fügen wir „touchstart“ und „touchend“ hinzu, wo immer wir „mousedown“ haben, und „mouseup“ zusammen mit „touchmove“, wo immer wir „mousemove“ haben.

// In init()... $container.on("mousedown touchstart", ".resize-handle", startResize); $container.on("mousedown touchstart", "img", startMoving); //In startResize() ... $(document).on("mousemove touchmove", Moving); $(document).on("mouseup touchend", endMoving); //In endResize()... $(document).off("mouseup touchend", endMoving); $(document).off("mousemove touchmove", bewegen); //In startMoving()... $(document).on("mousemove touchmove", Moving); $(document).on("mouseup touchend", endMoving); //In endMoving()... $(document).off("mouseup touchend", endMoving); $(document).off("mousemove touchmove", bewegen);

Da wir mobile Geräte angeschlossen haben, besteht die Möglichkeit, dass der Benutzer das Bild mit den Fingern „zusammendrückt“, um es zu verkleinern. Es gibt eine sehr praktische Bibliothek namens Hammer, mit der Sie viele Gesten erkennen können. Da wir jedoch nur eines benötigen, schreiben wir es kurz und ohne zusätzliche Skripte.

Möglicherweise ist Ihnen aufgefallen, dass die Funktion saveEventState bereits in den Berührungsinformationen gespeichert ist. Jetzt werden wir es brauchen.

Zuerst prüfen wir das Vorhandensein von „zwei Berührungen“ und den Abstand zwischen ihnen. Wir schauen uns auch an, ob der Abstand zwischen ihnen kleiner wird, wenn wir uns bewegen. Lassen Sie uns nun den Umzug aktualisieren:

Moving = function(e)( var Mouse=(), Touches; e.preventDefault(); e.stopPropagation(); Touches = e.originalEvent.touches; Mouse.x = (e.clientX || e.pageX || touches.clientX) + $(window).scrollLeft(); mouse.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) )); // Auf Pinch-Zoom-Geste beim Bewegen achten if(event_state. berührt && 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; b = b * b; var dist1 = Math.sqrt(a + b); a = e.originalEvent.touches.clientX - touches.clientX; a = a * a; b = e.originalEvent.touches.clientY - touches.clientY; b = b * b; var dist2 = Math.sqrt(a + b); var-Verhältnis = dist2 /dist1; Breite = Breite * Verhältnis; Höhe = Höhe * Verhältnis; // Um ​​die Leistung zu verbessern, können Sie begrenzen, wie oft resizeImage() aufgerufen wird resizeImage(width, height); ) );

Basierend auf diesen Daten verkleinern oder vergrößern wir unser Bild und passen dessen Höhe und Länge an.

Das ist alles. Du kannst öffnen

In diesem Artikel erzählen wir Ihnen davon 3 schnell und einfache Methoden CSS, mit dem Sie nur einen Teil des Bildes auf Ihrer Seite anzeigen können.

Alle hier verwendeten Methoden erfordern tatsächlich nur ein paar Zeilen CSS Code. Dabei handelt es sich jedoch nicht um eine Beschneidung im wahrsten Sinne des Wortes ( CSS Da wir dies noch nicht können, blenden wir einfach nur den Teil des Bildes ein und aus, den wir sehen möchten.

Diese Techniken können sehr nützlich sein, wenn Sie ein Bild auf eine bestimmte Größe bringen möchten, also beispielsweise eine Vorschau davon (eine kleinere Kopie des Bildes) im News-Bereich oder ähnliches erstellen möchten.

Technik 1 – Verwendung negativer Ränder ( Negative Margen)

Wenn Sie keine Lust auf negative Ränder haben, empfehlen wir die Verwendung dieser Technik №2 . Es enthält einen übergeordneten Absatz (Absatz), der eine bestimmte Breite und Höhe hat. Dieser Absatz hat die Eigenschaft Positionierung auf relative setzen. Breite und Höhe definieren die Abmessungen des angezeigten Feldes. Und ein in einen Absatz eingefügtes Bild hat die Eigenschaft Positionierung auf absolute setzen. Dann können wir Eigenschaften verwenden Spitze Und links Ordnen Sie das Bild nach Ihren Wünschen an und legen Sie dabei fest, welcher Teil des Bildes angezeigt werden soll und welcher nicht.

HTML identisch mit dem Code aus der vorherigen Technik:

< p class = "crop" > < a href = "#" title = "" > < img src = "img.jpg" alt = "" / > < / a > < / p >

Ernte ( schweben: links; Marge: . 5em 10px . 5em 0 ; Überlauf versteckt; /* das ist wichtig */ Position: relativ; /* das ist auch wichtig */ Rand: 1 Pixel fest #ccc; Breite: 200px; Höhe: 120px; Bild zuschneiden ( Position: absolut; oben: - 40px; links: - 50px;

Technik 3 – Verwenden der Slicing-Eigenschaft ( Clip-Eigenschaft)

Diese Technik sollte seitdem die einfachste sein Clip-Eigenschaft definiert den Teil des Elements, der angezeigt werden soll. Das klingt nach einer perfekten Lösung, aber es gibt sie ein Haken: abgeschnittenes Element müssen absolut positioniert sein. Um das Element verwenden zu können, müssen wir ein zusätzliches Element hinzufügen, die Größe des sichtbaren Bereichs des Bildes berechnen, diese Größe zum übergeordneten Element hinzufügen, das übergeordnete Element verwenden ... Eine Menge Arbeit, Rechts?

Ach, noch ein Problem: Die Größe des beschnittenen Elements wird nicht auf die Beschnittgröße verkleinert, sondern bleibt in Originalgröße (das Bild außerhalb des Beschnitts wird einfach ausgeblendet). Wir müssen die absolute Positionierung verwenden, um den sichtbaren Bereich in die obere linke Ecke des übergeordneten Elements zu verschieben.

Es darf jedoch nicht unerwähnt bleiben Eigentum schneiden. Und so nochmal der Code...

< div class = "crop" > < a href = "#" title = "" > < img src = "img.jpg" alt = "CSS-Vorlage" / > < / a > < / div >