kostenloser Webspace werbefrei: lima-city


Effekte wie bei Instagram

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    mczernin

    Kostenloser Webspace von mczernin

    mczernin hat kostenlosen Webspace.

    Liebe LC-Community,
    ich arbeite derzeit an einem Projekt. Hierfür bräuchte ich Effekte wie bei Instagram. Ein Bild soll per URL genommen werden und dann vl. per Base64 herauskommen. Also wenn mgl. nicht mit Canvas.
    Gibt es soetwas?

    Es sollte außerdem nur mit JS,Jquery & html auskommen...

    Danke &
    Lg
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. k*************g

    Ein Bild base64-codiert auszugeben kann dann sinnvoll sein, um HTTP-Requests zu reduzieren.
    Siehe dazu hier:
    http://de.wikipedia.org/wiki/Data-URL#HTML
    Wenn das für ein spezielles Bild gemacht werden soll, könnte das ehere eine Aufgabe für PHP sein.
  4. Autor dieses Themas

    mczernin

    Kostenloser Webspace von mczernin

    mczernin hat kostenlosen Webspace.

    klein-computing schrieb:
    Ein Bild base64-codiert auszugeben kann dann sinnvoll sein, um HTTP-Requests zu reduzieren.
    Siehe dazu hier:
    http://de.wikipedia.org/wiki/Data-URL#HTML
    Wenn das für ein spezielles Bild gemacht werden soll, könnte das ehere eine Aufgabe für PHP sein.



    Aber gibt es eine möglichkeit soetwas mit js zu verwirklichen?

  5. k*************g

    Was soll denn genau gemacht werden?
    Bild soll per URL genommen werden

    Heißt das, der Nutzer gibt eine Bild-URL an?

    Wenn es mit PHP gehen soll -> base64_encode, mit JS könnte man diese Funktion nutzen: http://phpjs.org/functions/base64_encode/

    Wie man mti JS ans Bild kommen soll, kann ich nicht sagen, evtl. mit einem HTTP-Request: http://www.hann3mann.de/artikel/einen-httprequest-mittels-javascript-erzeugen/
  6. Autor dieses Themas

    mczernin

    Kostenloser Webspace von mczernin

    mczernin hat kostenlosen Webspace.

    klein-computing schrieb:
    Was soll denn genau gemacht werden?
    Bild soll per URL genommen werden

    Heißt das, der Nutzer gibt eine Bild-URL an?

    Wenn es mit PHP gehen soll -> base64_encode, mit JS könnte man diese Funktion nutzen: http://phpjs.org/functions/base64_encode/

    Wie man mti JS ans Bild kommen soll, kann ich nicht sagen, evtl. mit einem HTTP-Request: http://www.hann3mann.de/artikel/einen-httprequest-mittels-javascript-erzeugen/



    Also... Ich arbeite an einer Phonegap App. Sobald der Nutzer mit der Kamera eine Foto gemacht hat, wird diese gespeichert und die URI auf dem Gerät ausgegeben.
    Jetzt möchte ich, dass man nun auf dieses Bild irgendwie Effekte geben kann...

    Danke auf jeden Fall für Deine Antworten ;)
  7. Ist die App navtiv, oder ist es eine WebApp?

    Die Effekte würde ich sonst nämlich eher nativ in der App hinzufügen, anstatt nach dem hochladen. Ich gehe mal davon aus, dass die URL dann auf das modifizierte Bild zeigt.

    Ansonsten habe ich über google das Projekt Vintage JS gefunden, was Code auch auf Github bereitstellt:

    http://vintagejs.com/

    https://github.com/rendro/vintageJS
  8. k*************g

    Wenn du es schon geschafft hast, das Foto zu machen und auf dem Gerät zu speichern, hast du ja schon die Datei zur weiteren Verwendung...
    Ist die ausgegebene URL dann lokal wie z.B. der Dateipfad oder wird das Bild automatisch irgendwo hochgeladen und dann die öffentliche URL angegeben (also die Internetadresse)?

    Wenn es dir in dieser Frage aber nur um Bild-Effekte geht, kann cih nicht weiterhelfen.
  9. Autor dieses Themas

    mczernin

    Kostenloser Webspace von mczernin

    mczernin hat kostenlosen Webspace.

    die URI ist lokal auf dem Gerät. Vintage JS klingt einmal sehr gut. Wie wird das Bild dann ausgegeben? Als Canvas?
  10. Also soll die Bearbeitung lokal erfolgen, nur halt über JS?

    Ich weiß nicht, ob das die beste Methode ist, aber ich kenne mich mit App Entwicklung unter iOS auch nicht so aus.

    Auf der GitHub Seite von Vintage JS steht "Add a retro/vintage effect to images using the HTML5 canvas element."

    Zudem gibt es eine Option für das Ausgabeformat: "mime Mime type of the output image. Default is image/jpeg"

    Also normalerweise jpeg. Ich weiß nicht, ob man das auch auf Canvas ändern kann.
  11. Autor dieses Themas

    mczernin

    Kostenloser Webspace von mczernin

    mczernin hat kostenlosen Webspace.

    clel schrieb:
    Also soll die Bearbeitung lokal erfolgen, nur halt über JS?

    Ich weiß nicht, ob das die beste Methode ist, aber ich kenne mich mit App Entwicklung unter iOS auch nicht so aus.

    Auf der GitHub Seite von Vintage JS steht "Add a retro/vintage effect to images using the HTML5 canvas element."

    Zudem gibt es eine Option für das Ausgabeformat: "mime Mime type of the output image. Default is image/jpeg"

    Also normalerweise jpeg. Ich weiß nicht, ob man das auch auf Canvas ändern kann.


    Das heißt, dass VintageJS eine neue Datei erstellt? Oder überschreibt? Das kann nirgends lesen...

    Danke :wink:
  12. Ich weiß auch nicht, wie das funktioniert, habs nur über Google gefunden.

    Ich vermute, dass man ein Bild übergibt und dass ein neues modifiziertes ausgegeben wird.
  13. Autor dieses Themas

    mczernin

    Kostenloser Webspace von mczernin

    mczernin hat kostenlosen Webspace.

    clel schrieb:
    Ich weiß auch nicht, wie das funktioniert, habs nur über Google gefunden.

    Ich vermute, dass man ein Bild übergibt und dass ein neues modifiziertes ausgegeben wird.


    Ich hab mir nun die Dateien dafür heruntergeladen. Außerdem habe ich sogleich die Testdateien ausprobiert. Kann es sein, dass das Bild als Base64 ausgegeben wird? auch hier http://rendro.github.io/vintageJS/ ist das so. Wäre es dann auch gut (Geschwindigkeit, nutzen...) diese in einer Datenbank zu speichern um sie anzeigen zu lassen?

    lg
  14. Wäre möglich, dass das so ist. Evtl. kann man den Ausgabetyp auch ändern.

    Möchtest du das Bild in der Datenbank speichern? Das verstehe ich nicht ganz, ich kenne mich mit Base64 aber auch absolut nicht aus.
  15. Autor dieses Themas

    mczernin

    Kostenloser Webspace von mczernin

    mczernin hat kostenlosen Webspace.

    clel schrieb:
    Wäre möglich, dass das so ist. Evtl. kann man den Ausgabetyp auch ändern.

    Möchtest du das Bild in der Datenbank speichern? Das verstehe ich nicht ganz, ich kenne mich mit Base64 aber auch absolut nicht aus.


    Ich habe nun die Effekte implementiert. Funktioniert perfekt! Danke :wink:

    Jetzt noch eine Frage. Der Prozess dauert manchmal einige Sekunden... Wie könnte ich diesen Beschleunigen?


    Lg, Max
  16. Super, dass es geklappt hat. Ich weiß allerdings nicht, wie man das beschleunigen kann. Ich denke, da müsste man den SourceCode verändern, wenn man den überhaupt noch optimieren kann.
  17. Autor dieses Themas

    mczernin

    Kostenloser Webspace von mczernin

    mczernin hat kostenlosen Webspace.

    clel schrieb:
    Super, dass es geklappt hat. Ich weiß allerdings nicht, wie man das beschleunigen kann. Ich denke, da müsste man den SourceCode verändern, wenn man den überhaupt noch optimieren kann.


    ok, danke. ich werde inzwischen mal eine art loading anzeige einfügen, damit es wenigstens so aussieht als würde das ding arbeiten :wink:
  18. Obwohl der Thread schon alt ist ergänze ich mal:

    Dank CSS3 / webkit, kann man mit reinem CSS Effekte über Bilder legen.
    Demo: http://html5-demos.appspot.com/static/css/filters/index.html

    und es ist schon recht verbreitet: http://caniuse.com/#feat=css-filters

    siehe: http://dev.w3.org/fxtf/filters/#typedef-filter-function-list
  19. Autor dieses Themas

    mczernin

    Kostenloser Webspace von mczernin

    mczernin hat kostenlosen Webspace.

    grashuepfer schrieb:
    Obwohl der Thread schon alt ist ergänze ich mal:

    Dank CSS3 / webkit, kann man mit reinem CSS Effekte über Bilder legen.
    Demo: http://html5-demos.appspot.com/static/css/filters/index.html

    und es ist schon recht verbreitet: http://caniuse.com/#feat=css-filters

    siehe: http://dev.w3.org/fxtf/filters/#typedef-filter-function-list



    Danke! Ich werde das mal ausprobieren & dann bescheid geben! :wink:
  20. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!