Bild beschneiden mit AngularJS

Ich soll der Benutzer ein Bild zuzuschneiden, ich fand das JQuery-plugin - http://deepliquid.com/content/Jcrop.html

Ich habe versucht, es mit Angular-ui der Jquery-passthrough-option, indem die ui-jq=Jcrop Richtlinie zur <img>

Das problem ist, dass Wenn ich mit ng-src dynamisch ändern, das Bild, das er nicht arbeitet und nichts zu sehen ist. Wenn ich es ändern zu src und legen Sie eine statische url kann ich das Bild sehen, und Jcrop.

wie kann ich das beheben ?
auch, wie kann ich hören Jcrop die Rückrufe zu wissen, was ist die Auswahl des Benutzers ?

gibt es eine bessere /einfachere Möglichkeit zum hinzufügen, Bild beschneiden, Funktionalität zu AngularJS ?

InformationsquelleAutor Gal Ben-Haim | 2013-01-14
  1. 9

    Hier ist meine Lösung:

    Ich geschrieben habe, eine Richtlinie erstellen img-element und gelten plugin drauf. Bei der src geändert wird, wird dieser img entfernt wird und Inhalte, die erstellt wurde, per plugin auch zerstört und dann neu erstellt, neue img mit neuen src-und wieder angewendet plugin drauf.

    Ebenfalls vorhanden 'aktiviert' callback zu können, koordiniert ausgewählt wurden (eingewickelt in $gelten, damit Sie ändern können, Ihre scope-Werte in es).

    Überprüfen meine Lösung bei Plunker

    • wenn ich deine Lösung mit setSelect für JCrop option Ergebnis in Error: $digest already in progress auch wenn ich versuche, wickeln Sie die scope.$apply - Anweisung mit if (!scope.$$phase) wie kann ich dieses Problem beheben ?
    • Können Sie die Gabel meiner Plunker und hinzufügen, wie Sie setSelect?
    • setSelect ist in Ordnung, ich bin einfügen ein Bild aus einer url in ein input-text -, und ich habe eine andere Richtlinie auf das Textfeld, um zu überprüfen, dass die url eines Bildes. diese ist zu verwirrt, und Probleme verursacht. wie kann ich ein Bild hinzufügen die überprüfung Ihrer Richtlinie wie 'imageOK', die sagen, wenn das src-url ist in der Tat ein Bild. auch ich möchte zu verstecken das element im Falle seiner ungültig, so dass die fehlenden kleinen Bild-Symbol wird nicht angezeigt. Ich bin neue Richtlinien und es ist sehr verwirrend mich 🙂
    • Ich schlage vor, nur tun, Weg: bind 'url' zur Eingabe, wo Benutzer kann die Eingabe der url. Dann am controller addd $watch('url',...) und es tun, - Validierung und-nach erfolgreicher Validierung-update $scope.imageUrl und bing Richtlinie zu imageUrl (nicht url)
    • Ich habe einige Probleme mit der Richtlinie, wenn Sie bitte schauen Sie unter stackoverflow.com/questions/14504393/...
    • Danke @ValentynShybanov. Ihre Lösung hat mir geholfen.
    • sorry für diese Frage, könnten Sie den code ändern, um die Datei hochladen? E. g statt dem click-Ereignis das senden der src des img die img-beschnitten, src, src-nun wird der Wert aus der Datei hochgeladen. So etwas wie eine Vorschau.

    InformationsquelleAutor Valentyn Shybanov
  2. 6

    Habe ich gebaut, eine demo mit AngularJS und Jcrop hier:

    Demo: https://coolaj86.github.com/angular-image-crop

    Auf Github: https://github.com/coolaj86/angular-image-crop

    InformationsquelleAutor CoolAJ86
  3. 1

    Können Sie nutzen ui-event erstellen einer event-definition-Objekt mit dem Schlüssel, den event-Namen und den Werten, die Rückrufe. Oder Sie können einfach vorbei kommen, diese Ereignisse als Möglichkeiten zu Jcrop (laut der Dokumentation)

    Schließlich gibt es ein neues update kommen ui-jq können Sie hinzufügen ui-refresh welches ein Ausdruck ist, um beobachtet werden zu re-trigger-plugin.

    Theoretisch sollten Sie in der Lage sein zu tun 

    <img ui-jq="Jcrop" 
     ui-options="{onSelect:myCallback}"
     ui-event="{onChange:'myCallback($event)'}"
     ui-refresh="imgSrc"
     ng-src="imgSrc" />

    Hinweis: diese einfach erneut feuert das passthrough wieder, und bedeutet nicht automatisch, das das problem lösen wird oder dass das plugin sich richtig Verhalten, wenn re-initialisiert

    Wir arbeiten immer noch auf einem guten Weg zu sein, um Sie auszulösen, verschiedene Ereignisse zu verschiedenen Zeiten.

    • So wie ich das verstehe, ui-Aktualisierung wird gerade re-fire-plugin, ruft es wieder auf dasselbe element. Aber es gibt viele plugins hinzufügen viele zusätzliche Elemente, die mit etwas Inhalt auch außerhalb von Quell-element. Zum Beispiel Jcrop plugin hinzufügen <div> nach <img>. Also einfach neu brennen-plugin wieder nicht aktualisieren oder entfernen-hinzufügen diese dynamischen Inhalte. Ich persönlich weiß nicht, wie tracking von dem, was plugin Hinzugefügt werden könnte, gemacht für jede generische plugin...
    • Es ist ein Anruf, den Sie haben würden, um auf ein plugin von plugin-basis, wie einige plugins einfach updaten oder aktualisieren.
    InformationsquelleAutor ProLoser
Schreibe einen Kommentar