Ich versuche ein Tool für jQuery zu erstellen, das Bilder ausschneidet. Ich weiß, dass es bereits eine Ladung von bereits gibt. Der Unterschied zu dem, den ich versuche zu machen, ist, dass ich möchte, dass es wie die Picture Taker-Schnittstelle funktioniert, die in vielen Mac-Anwendungen wie iChat und Adium zu finden ist. Ich bleibe völlig stecken, wie es geht. Kann mir jemand Ideen geben?Wie kann ich den ImageKit Picture Taker neu erstellen?
Antwort
Ich denke Jcrop plugin Ihnen helfen können!
Welche Funktion von ImageKit Picture Taker haben Sie beim Emulieren? Das Jcrop-Plugin ist ziemlich glatt. Das Menüsystem und andere ui-Bits können ziemlich einfach mit anderen Jquery-Plugins ausgeführt werden. Woran denkst du noch?
Sie könnten mit den jqueryui dialog Windows beginnen. – jimyshock
Ich meine wie auf einer Seite kann ich ein Bild zuschneiden wie Sie bei der Auswahl eines Avatars auf Adium/iChat Ich habe keine Ahnung, wie Sliders und das mit dem cropper verknüpfen – kennyisaheadbanger
Das jCrop-Plugin macht die meiste Arbeit. Sie brauchen nur ein wenig Logik, um es mit einem Schieberegler-Widget zusammenzufügen (wie der jqueryui-Schieberegler).
Hier ist ein schnelles und schmutziges Beispiel. Sie werden sicherlich die Dateien auf Ihrem eigenen Server hosten wollen, aber ich wollte nur etwas zusammenwerfen.
Ein signifikanter Unterschied ist, dass dieser Code vergisst, wo Sie die Auswahl gezogen haben und die Größe nur um den aktuellen Mittelpunkt ändert. Wenn das für Sie wichtig ist, könnten Sie diese Funktionalität wahrscheinlich leicht hinzufügen.
<html> <head> <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script> <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script> <script type="text/javascript" src="http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js"></script> <link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/css/jquery.Jcrop.css" type="text/css" /> <style type="text/css"> #slider { margin: 10px; } </style> <script type="text/javascript"> var jcrop_api; $(document).ready(function(){ imgwidth = $("#cropbox").width(); imgheight = $("#cropbox").height(); aspectRatio=(imgheight > 0)?imgwidth/imgheight:1; jcrop_api = $.Jcrop('#cropbox',{ setSelect: [ 0, 0, imgwidth, imgheight ], aspectRatio: aspectRatio }); $("#slider").slider({ min: 0, max: 100, value: 100, slide: function(e,ui){ updateCrop(ui.value); } }); function updateCrop(size){ size = size/100; maxX = $("#cropbox").width(); maxY = $("#cropbox").height(); midX = ((jcrop_api.tellSelect().x2 - jcrop_api.tellSelect().x)/2) + jcrop_api.tellSelect().x; midY = ((jcrop_api.tellSelect().y2 - jcrop_api.tellSelect().y)/2) + jcrop_api.tellSelect().y; midX = (midX < 0) ? midX * -1 : midX; midY = (midY < 0) ? midY * -1 : midY; sizeX = $("#cropbox").width() * size; sizeY = $("#cropbox").height() * size; x = midX - (sizeX/2); y = midY - (sizeY/2); x2 = midX + (sizeX/2); y2 = midY + (sizeY/2); // edge conditions if (x < 0){ x2 -= x2 - x; x = 0; if (x2 > maxX) x2 = maxX; } if (x2 > maxX){ x -= (x2 - maxX); x2 = maxX; if (x < 0) x = 0; } if (y < 0){ y2 -= y; y = 0; if (y2 > maxY) y2 = maxY; } if (y2 > maxY){ y -= (y2 - maxY); y2 = maxY; if (y < 0) y = 0; } jcrop_api.setSelect([ x,y,x2,y2 ]); } }); </script> </head> <body> <img src="http://deepliquid.com/projects/Jcrop/demos/demo_files/sago.jpg" id="cropbox" /> <div id="slider"></div> </body> </html>
Thnx, tut mir leid aber es akzeptiert automatisch, bevor ich online ... wirklich Entschuldigung – kennyisaheadbanger
Ich hoffe, es hilft. Es hat Spaß gemacht, es zusammen zu stellen. –
- 1. Square Picture Taker für Android
- 2. Wie kann ich ein SSTABLE neu erstellen, ohne den Cassandra Node neu zu starten?
- 3. WCF: Wie kann ich diese App.config-Werte programmatisch neu erstellen?
- 4. Wie kann ich ein GridLayout während der Größenänderung neu erstellen?
- 5. Wie kann ich vhost auf cPanel neu erstellen?
- 6. Wie kann ich Toolbar neu erstellen, wenn Rotation auftritt
- 7. Wie kann ich den Docker-Service mit Puppet ... neu starten?
- 8. Wie kann ich atomische mvn-Tests ausführen (ohne den Quellcode neu zu erstellen)?
- 9. Wie lade ich den Twitter-Button neu?
- 10. Page loading picture
- 11. Ich kann kein neu erstelltes Projekt erstellen (Hamburger Template)
- 12. Muss ich benutzerdefinierte Listenformulare neu erstellen, wenn ich die Liste neu erstellen?
- 13. Java Picture Farbbereich Unterscheidung
- 14. Mit dem Hash und dem Passwort, kann ich den Algorithmus neu erstellen?
- 15. Wie kann ich TortoiseSVN sicher neu starten?
- 16. wie autoincrement in mysql neu zu befüllen/neu erstellen
- 17. Kann nicht neu erstellen Insights App
- 18. Wie kann ich ein Panel programmgesteuert zum Freigeben seiner AutoSize-Picture-Box
- 19. Kann ich den folgenden Code mit LINQ neu schreiben?
- 20. Kann ich den Projektpfad programmatisch erstellen?
- 21. Wie kann ich den Webbrowser zwingen, eine neu bereitgestellte Flash-Datei neu zu laden, ohne den Cache zu löschen?
- 22. java.util.zip - Verzeichnisstruktur neu erstellen
- 23. image Skalierung der Picture Box
- 24. Wie kann ich den Hash einer Webseite in Java erstellen?
- 25. PhpStorm - Wie kann ich vermeiden, den .idea-Ordner zu erstellen?
- 26. Wie kann ich den Browser neu laden und den aktuellen Status im AngularJS UI-Router beibehalten?
- 27. Wie kann ich eine UIView neu erstellen, nachdem ich sie veröffentlicht habe?
- 28. Wie bekomme ich den Code, um einen Datenrahmen in R neu zu erstellen?
- 29. Wie erzwinge ich MSBuild zu reinigen oder neu zu erstellen?
- 30. Take Picture ohne Vorschau Android
Weißt du, wie ich es einrichten könnte, um wie der ImageKit Picture Taker zu handeln? – kennyisaheadbanger