2012-03-24 16 views
0

Ich habe ein Widget von Bild beschneiden und das gibt mir x1 y1 und x2 y2-Koordinate, die Benutzer abgeschnitten hat. Jetzt ist es meine Anforderung, diese zugeschnittene Koordinate in eine andere HTML-Seite zu legen.Bildanzeige nach Koordinaten in HTML benötigt

Hier ist mein Code

meine Breite und Höhe des Fensters anzuzeigen ist 200px 200px. Ich möchte die zugeschnittene Koordinate in diesem 200 * 200 px Fenster anpassen.

Ich habe 4 Koordinaten, die ich bekomme, wenn Benutzer das Bild beschneiden.

So erreichen Sie das

Danke.


Es tut mir leid, wie ich „Hier ist mein Code“ und ich vermöge schrieb etwas geschrieben.

Ich werde das genaue Szenario sagen .... Ich sage dem Benutzer, um das Bild hochladen und Benutzer wird dann zu cropper Seite gehen, wo Benutzer wird die Region eine erforderlich dann Bilddatei wird in Server gespeichert und beschnitten Bild Koordinaten werden in der Datenbank gespeichert.

Jetzt weiß ich die Koordinaten tatsächlich was Benutzer ausgewählt hat, ich meine ich habe x1, y1, x2, y2. und ich habe das komplette Bild was der Benutzer hochgeladen hat.

Jetzt ist meine Notwendigkeit, dem Benutzer nur Bild zu zeigen, die Benutzer im Rahmen von 200px * 200 px abgeschnitten hat.

Mit anderen Worten, wenn ich sage, habe ich Koordinaten und möchte Bild beginnend und endend mit diesen Koordinaten in 200 * 200 px Breite und Höhe anzeigen.

Danke

+3

Also wo ist der Code? – Joseph

+0

Möchten Sie die Koordinaten von einer HTML-Seite zur nächsten weitergeben? Wenn ja, dann müssen Sie die Parameter in Form oder ein Cookie oder eine andere Methode übergeben, wenn Sie auf der zweiten Seite die Koordinaten extrahieren. –

+0

Ich denke, er will den beschnittenen Teil des Bildes in der 200px X 200px Box auf der nächsten Seite zeigen. – codef0rmer

Antwort

0

Ich tat dies vor einer Weile. Ich kam mit der folgenden:

Sie die 200x200 div mit Position haben: relative und Überlauf: versteckt und lassen Sie es ein img-Tag mit Position enthalten: absolute, src-Attribut des Benutzer Bild und Breite und Höhe skaliert:

width = user_image_width * 200/(x2 - x1) 
height = user_image_height * 200/(y2 - y1) 

dann müssen Sie entsprechend links und oben zu setzen:

left = -x1 * 200/(x2 - x1) 
top = -y1 * 200/(y2 - y1) 

Wenn Sie die entsprechenden CSS-Eigenschaften des img-Elements (und ich habe nicht einen Fehler machen) es sollte nur den ausgewählten Abschnitt Füllung zeigen das gesamte 200x200 Div.