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

[uracil]

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!

 

[Myhar]

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 ). Ist vielleicht gut zu wissen, bevor man sich das anschaut

Edith sagt: Das steht auch auf deiner dir verlinkten Seite, entschuldigung

 

[uracil]

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

im Opera funktioniert das allerdings überhaupt nicht (da kommen grauenvolle Farben raus )

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.

 

[Myhar]

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.

 

[Quaese]

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:

//add noise
if (options.noise > 0) {
   var noise = Math.round(options.noise - Math.random() * options.noise/2);

   var dblHlp = 0;
   for(var k=0; k<3; k++){
     dblHlp = noise+imageData.data[i+k];
     imageData.data[i+k] = ((dblHlp > 255)? 255 : ((dblHlp < 0)? 0 : dblHlp));
   }
}

Ciao
Quaese

 

[uracil]

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:

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

 

[Myhar]

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

 

[uracil]

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

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.

 

[Myhar]

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.

 

[uracil]

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 () 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

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