Effekte wie bei Instagram
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bearbeitung
beschleunigen
bild
dank
datei
datenbank
effekt
erzeugen
filter
foto
http
image
mime
nutzen
nutzer
option
output
recht verbreitet url
speichern
url
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
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. -
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?
-
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/ -
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 ;) -
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 -
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. -
die URI ist lokal auf dem Gerät. Vintage JS klingt einmal sehr gut. Wie wird das Bild dann ausgegeben? Als Canvas?
-
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. -
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
-
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. -
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 -
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. -
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
Jetzt noch eine Frage. Der Prozess dauert manchmal einige Sekunden... Wie könnte ich diesen Beschleunigen?
Lg, Max -
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.
-
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
-
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 -
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!
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
