Kombinierte Bildrotation und Beschneiden in jQuery

Wir haben derzeit ein System zum Zuschneiden von Bildern, die jCrop am Front-End verwendet, und System.Drawing in .NET auf dem Backend - das funktioniert sehr gut, aber jetzt müssen wir Bilddrehung einführen. Es werden nur 90-Grad-Winkel benötigt, und jQuery.Rotate funktioniert gut isoliert, aber ich möchte diese beiden jQuery-Plugins anmutig kombinieren. Hast du Erfahrung in diesem Bereich? Gibt es "Shake & Backen" Lösungen?Kombinierte Bildrotation und Beschneiden in jQuery

Quelle

2009-09-17 Daniel Schierbeck

Können Sie weitere Details zu dem, was Sie erreichen möchten, angeben? Soll der Benutzer ein Schnittrechteck definieren und gleichzeitig einen Drehwinkel definieren? Was ist das genaue visuelle Ergebnis, das Sie erreichen möchten? –

Hallo Ates, Ich versuche, eine einzige Ansicht des Bildes zu haben, mit einer Symbolleiste, die das Drehen und Zuschneiden des Bildes in einem einzigen, kombinierten Schritt ermöglicht. –

denke ich jQuery Rohr-Innenfutter ist die Antwort für jedes jQuery-Plugin

zum Beispiel ist:

$("image").rotate(foo).crop(foo);

Quelle

2009-09-17 11:15:56

Ich fürchte, das wird nicht funktionieren. Sowohl jCrop als auch jQuery-Rotate ändern das DOM erheblich. Sie müssen sich irgendwie integrieren. Als letzten Ausweg konnte ich die Rotation und das Cropping über mehrere Stufen verteilen, aber ich würde sie lieber zusammenhalten. –

Pipelining .. existiert nicht in jQuery. Jede Funktion gibt nur ein 'jQuery'-Objekt zurück. – Dykam

für Dykam: und das ist, was wir Pipeline-Futter nennen: D, können Sie mehr als eine Operation Pipeline für Daniel: Sie haben Recht, aber wir können immer noch eine Lösung finden ...Ich mochte dieses Problem und werde eine andere Antwort posten, wenn ich einen finde –

Da die beiden Plugin-ins arbeiten auf sehr unterschiedliche Weise, ich glaube nicht, dass Sie kombinieren Sie die beiden einfach. Mit jCrop können Sie einfach ein rechteckiges Auswahlrechteck über einem Bild definieren. Rotation, auf der anderen Seite, verwendet entweder <canvas>, um tatsächlich das Bild oder die DXImageTransform Filter drehen, es zu zeigen gedreht

Quelle

2009-09-17 14:37:07

auf IE Rotation ist mit Winkel-Attribut getan, was bedeutet, Sie können Drehung und dann jCrop –

Was? Winkelattribut? Die offizielle Website von jquery-rotate (http://code.google.com/p/jquery-rotate/) besagt: Zwei JavaScript-Bildverarbeitungsimplementierungen werden unterstützt: 1. Verwendung des DXImageTransform-Filters für Microsoft Internet Explorer 2. Verwendung Canvas-Objekt für andere Browser –

ja, und der Filter wird mit CSS angewendet, so ist es möglich, zu drehen und dann jCrop nach dem Anwenden der Drehung –

Sie können versuchen, jquery CropZoom (nicht eigentlich das Quellbild zu drehen.): http://plugins.jquery.com/project/CropZoom

Demo und Downloads hier: http://www.gastonrobledo.com.ar/cropzoom/index.html

Quelle

2011-04-11 10:17:17 jihchuan

Ich schlage vor, die Bildserverseite zu drehen. Sie können jCrop wirklich nicht mit einem gedrehten Bild kombinieren, da eine CSS-basierte Methode über die Breite und Höhe "liegen" würde.

Es kann extrem schnell sein. Ihre Benutzeroberfläche würde einfach "rotate = 90" zum Bild-Querystring hinzufügen, wenn auf die Schaltfläche geklickt wurde, und das Bild würde neu geladen.

Hier ist eine sehr simple example of using jCrop and querystring-based resizing.

Nehmen Sie eine look at the demo page, um zu sehen, wie reaktionsfreudig es ist - das Hinzufügen des Rotationsbefehls würde nur ein paar Zeilen Javascript erfordern. Wenn Sie es brauchen, könnte ich ein Beispiel hochladen, wie Sie sie kombinieren können.

Quelle

2011-05-31 15:07:02

Ich weiß, das ist eine alte Frage, aber haben Sie dieses jQuery-Plugin mit dem Namen CropIt überprüft?

Die Demo sieht sehr gut aus und Sie können im selben Plugin zoomen, zuschneiden und rotieren, es ist kein Backend-Code erforderlich.

Hoffe, das hilft.

Quelle

2016-12-20 22:08:09 germanio

Kombinierte Bildrotation und Beschneiden in jQuery

Antwort

Verwandte Themen