Anzeige

vintageJS - vintage Effekte für Bilder mit HTML5 und dem canvas Element

vintageJS - vintage Effekte für Bilder mit HTML5 und dem canvas Element | PSD-Tutorials.de

Erstellt von uracil, 08.03.2011.

  1. uracil

    uracil Aktives Mitglied

    11
    Dabei seit:
    30.07.2006
    Beiträge:
    440
    Geschlecht:
    männlich
    Ort:
    Mannheim
    Software:
    PS, AE, AI, ID, Netbeans, Coda
    vintageJS - vintage Effekte für Bilder mit HTML5 und dem canvas Element
    Hallo zusammen,

    ich habe folgendes für euch, und wüsste gerne euere Meinung:

    Beispiele: vintageJS - Vintage effects for your images with the HTML5 canvas element
    Sourcecode: www.github.com/rendro/vintageJS

    vintageJS ist ein jQuery Plugin das mit Hilfe des HTML5 canvas Elements einen klassischen Vintage-Effekt zu Bildern hinzufügen kann ohne das orginalbild zu zerstören. Der Standardeffekt erinnert so ein bisschen an die Instagram-iPhone Applikation. Aber man kann zwischen 3 Presets vom Effekt her wählen oder seinen eigenen Effekt basteln.

    Wäre schön wenn ihr es euch mal anschaut und sagt, wass ihr davon haltet, damit ich weis an welcher Ecke ich noch optimieren muss.

    Viele Grüße!
     
    #1      
  2. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.103
    Geschlecht:
    männlich
    Ort:
    Ö
    vintageJS - vintage Effekte für Bilder mit HTML5 und dem canvas Element
    AW: vintageJS - vintage Effekte für Bilder mit HTML5 und dem canvas Element

    Im Firefox schaut das ja ganz nett aus, im Opera funktioniert das allerdings überhaupt nicht (da kommen grauenvolle Farben raus :D ). Ist vielleicht gut zu wissen, bevor man sich das anschaut :)

    Edith sagt: Das steht auch auf deiner dir verlinkten Seite, entschuldigung :)
     
    #2      
  3. uracil

    uracil Aktives Mitglied

    11
    Dabei seit:
    30.07.2006
    Beiträge:
    440
    Geschlecht:
    männlich
    Ort:
    Mannheim
    Software:
    PS, AE, AI, ID, Netbeans, Coda
    vintageJS - vintage Effekte für Bilder mit HTML5 und dem canvas Element
    AW: vintageJS - vintage Effekte für Bilder mit HTML5 und dem canvas Element

    Ja da weis ich auch echt nicht woran das liegt. Eigentlich kann kein Farbwert größer als 255 werden, aber der Opera macht da voll die Faxen. Hat jemand ne Ahnung warum das so ist?
    Verwendet werden getImageData() und putImageData des 2DRenderingContext.
    Muss ein Operaspezifisches Problem sein, und ich komme nicht dahinter.
     
    #3      
  4. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.103
    Geschlecht:
    männlich
    Ort:
    Ö
    vintageJS - vintage Effekte für Bilder mit HTML5 und dem canvas Element
    AW: vintageJS - vintage Effekte für Bilder mit HTML5 und dem canvas Element

    Vielleicht ist diese Funktion in Opera noch nicht komplett umgesetzt und richtig implementiert?
    Auf deiner Seite hast du ja auch nur die minified Version eingebunden, da tu ich mir ehrlich gesagt schwer mit dem debuggen ;) Aber soweit ich das sehe sind hauptsächlich weiße (bzw. sehr helle Bildbereiche) davon betroffen. Vielleicht reicht es ja aus, dass du für Opera nicht bis 255 gehst bei den Farbwerten sondern schon vorher das Script stoppst... Wäre mal so eine erste schnelle Idee.
     
    #4      
  5. Quaese

    Quaese Noch nicht viel geschrieben

    Dabei seit:
    18.06.2006
    Beiträge:
    31
    vintageJS - vintage Effekte für Bilder mit HTML5 und dem canvas Element
    AW: vintageJS - vintage Effekte für Bilder mit HTML5 und dem canvas Element

    Hi,

    Opera reguliert die Berechnung bei einem Überlauf (>255) selbst und beginnt wieder bei Null.

    Deshalb ist es besser, die Berechnung und Wertüberprüfung beim noise-Filter vor der Zuweisung durchzuführen:
    Code (Text):
    1.  
    2. //add noise
    3. if (options.noise > 0) {
    4.    var noise = Math.round(options.noise - Math.random() * options.noise/2);
    5.  
    6.    var dblHlp = 0;
    7.    for(var k=0; k<3; k++){
    8.      dblHlp = noise+imageData.data[i+k];
    9.      imageData.data[i+k] = ((dblHlp > 255)? 255 : ((dblHlp < 0)? 0 : dblHlp));
    10.    }
    11. }
    12.  
    Ciao
    Quaese
     
    Zuletzt bearbeitet: 09.03.2011
    #5      
  6. uracil

    uracil Aktives Mitglied

    11
    Dabei seit:
    30.07.2006
    Beiträge:
    440
    Geschlecht:
    männlich
    Ort:
    Mannheim
    Software:
    PS, AE, AI, ID, Netbeans, Coda
    vintageJS - vintage Effekte für Bilder mit HTML5 und dem canvas Element
    AW: vintageJS - vintage Effekte für Bilder mit HTML5 und dem canvas Element

    Gnah! An den Noise Filter hatte ich noch nicht gedacht. Danke. Das werde ich noch fixen.

    Gestern hab ich das ganze als keine webApp online gestellt. Man kann Bilder hochladen, den Effekt darauf anweden und dann das Bild sharen über Facebook und Twitter.
    Viel Spaß beim ausprobieren und Bugs melden :D
     
    #6      
  7. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.103
    Geschlecht:
    männlich
    Ort:
    Ö
    vintageJS - vintage Effekte für Bilder mit HTML5 und dem canvas Element
    AW: vintageJS - vintage Effekte für Bilder mit HTML5 und dem canvas Element

    Warum hast du denn die Beispiele rausgegeben? Gehst du davon aus, dass alle User, welche deine Seite besuche, sofort wissen was der vintage-Effekt ist?
    Du musst die Beispiele ja nicht so wie auf der alten Seite auf der Hauptseite einbinden, aber ganz rausnehmen würde ich sie nicht :)
     
    #7      
  8. uracil

    uracil Aktives Mitglied

    11
    Dabei seit:
    30.07.2006
    Beiträge:
    440
    Geschlecht:
    männlich
    Ort:
    Mannheim
    Software:
    PS, AE, AI, ID, Netbeans, Coda
    vintageJS - vintage Effekte für Bilder mit HTML5 und dem canvas Element
    AW: vintageJS - vintage Effekte für Bilder mit HTML5 und dem canvas Element

    Jep danke für den Tipp :)
    Ich hab wieder zwei Beispielbilder eingebaut.
    Vielleicht bastel ich irgendwann auch noch ne Galeriefunktion.

    Update:
    Soeben hebe ich noch einen "through the viewfinder" effekt hinzugefügt. Das mach diesen klassischen Rand um die Bilder und fügt Dreck hinzu der auf dem ViewFinder liegt.
    Über Feedback würde ich mich freuen.
     
    Zuletzt bearbeitet: 13.03.2011
    #8      
  9. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.103
    Geschlecht:
    männlich
    Ort:
    Ö
    vintageJS - vintage Effekte für Bilder mit HTML5 und dem canvas Element
    AW: vintageJS - vintage Effekte für Bilder mit HTML5 und dem canvas Element

    Sehr schön, dass du das Beispiel hinzugefügt hast. Ich muss mir auch mal die Möglichkeiten, welche man mit dem canvas Element hat, anschauen.
    Wie bist du denn auf die Idee gekommen, so einen Filter umzusetzen?

    Kleine Anmerkung zu deiner Seite (nicht zum JS, das ist schon sehr gut) hätte ich schon noch: Du hast einen Rechtschreibfehler: demonstration of the effect. (Das e fehlt)
    Und zweitens könntest du die Buttons auch etwas schöner stylen, (den Upload und Auswählen Button) Die kommen im Standarddesign daher, während der Rest der Seite eigentlich gut durchgestyled ist.
     
    #9      
  10. uracil

    uracil Aktives Mitglied

    11
    Dabei seit:
    30.07.2006
    Beiträge:
    440
    Geschlecht:
    männlich
    Ort:
    Mannheim
    Software:
    PS, AE, AI, ID, Netbeans, Coda
    vintageJS - vintage Effekte für Bilder mit HTML5 und dem canvas Element
    AW: vintageJS - vintage Effekte für Bilder mit HTML5 und dem canvas Element

    Danke für den Rechtschreibfehler :) Ist schon verbessert. Und das mit dem Submitbutton is ne gute Idee, den anderen Button kann man ja leider nicht so leicht stylen, aber mal schauen. Vielleicht mit einem JavaScript Replacement.

    Ich bin da drauf gekommen, weil ich schon eine andere JavaScript Klasse geschrieben habe (http://github.com/dotsunited/cajal) mit der man Formen und so auf dem canvas Element zeichnen kann und einfach Animationen erstellen kann, weil die canvas API ned so der burner ist, wie ich finde. Und da das canvas ja auch Pixelmanipulationen unterstütz und ich ich in der Uni dieses Semester das Fach "Digitale Bildverarbeitung" hatte wollte ich was in die Richtung ausprobieren. Naja und zu Zeiten von Instagram und meiner persönlichen Vorliebe für Vintage-Effekte schien mir das eine ganz gute Möglichkeit in die Richtung mal ein "kleines" jQuery plugin zu schrieben. Und da das ganz gut funktioniert hat, hab ich gleich noch die Seite dazu gebastelt :p

    Wenn du Fragen zu canvas und co hast, dann sag Bescheid, ich teile gerne meine Erfahungen und bin auch immer für spannende Projekte zu haben :)
     
    #10      
Seobility SEO Tool
x
×
×