Permalink
Browse files

initial commit

  • Loading branch information...
0 parents commit 9e9a2813642daa10180d18dac844e12e0147c855 Robert Fleischmann committed Mar 7, 2011
@@ -0,0 +1,75 @@
+#vintageJS#
+##Vintage effects for your images with the HTML5 canvas element##
+vintageJS is a jQuery plugin that uses the html5 canvas element to add a great vintage look to your photos. It comes with three effect-presets and can be customized very easily.
+
+###Requirements###
+To use vintageJS you need the latest jQuery build from [jquery.com](http://www.jquery.com), a browser that supports the HTML5 canvas element and the current version of <span class="vjs">vintageJS</span> from [github](http://www.github.com/rendro/vintageJS/).
+
+This jQuery-Plugin was tested in the following browsers:
+
+* Mozilla FireFox 3.16.14
+* Google Chrome 9.0.597.107
+* Apple Safari 5.0.3
+* Opera 11.01 (strange color behaviour but i could not figure out why)
+* Internet Explorer 7+ (won't work because the canvas element is not supported, but at least the error message appears)
+
+###Usage###
+
+You need to load the jQuery Library, the vintageJS Library and the vintageJS stylesheet in the header of your html document:
+
+ <script src="src/jquery.js"></script>
+ <script src="src/vintage.js"></script>
+ <link rel="stylesheet" type="text/css" href="css/vintagejs.css" media="all" />
+
+The next step is to add an event listener to the images to trigger the vintage-effect. For this example we will use the click event:
+
+ <script>
+ $(function () {
+ $('img.vintage').click(function () {
+ $(this).vintage();
+ });
+ });
+ </script>
+
+
+That's it! Now add images with the class "vintage" to your html and click on them to see the result.
+
+###Options###
+
+You can change the effect by adding options to the vintageJS call. There are three presets that you can use:
+
+* `default`: the default preset is used when no preset is given
+* `sepia`: sepia effect
+* `grayscale`: turns image into grayscale image
+* `custom`: Only curves will be adjusted, all the other effects are switched off so that you can build your own vintage look
+
+If you like to change the style to your own settings, here are the full options you can manipulate:
+
+* `vignette`: To avoid the vignette effect set this option to false. Otherwise you need to set it to a literal object with "black" and "white" as variables between 0 and 1 to set the strength of the vignette effect. Example: `vignette: {black:0.5, white:0.2}`
+* `noise`: How much noise do you want to add to your image.
+* `screen`: Add a layer with the photoshop like blending mode "screen" to blur out colors. You can define a solid color and the opacity of the layer. Example: `screen: { red: 227, green: 12, blue: 169, strength: 0.1 }`
+* `desaturate`: False or value between 0 and 1, which is the percentage how much the image is desaturated
+* `allowMultiEffect`: If this flag is set to true, you may trigger the effect multiple times. Default value is false.
+
+Here is how a custom call could look like:
+
+ <script>
+ $(function () {
+ $('img.vintage').click(function () {
+ $(this).vintage({
+ vignette: {
+ black: 0.8,
+ white: 0.2
+ },
+ noise: 20,
+ screen: {
+ red: 12,
+ green: 75,
+ blue: 153,
+ strength: 0.3
+ },
+ desaturate: 0.05
+ });
+ });
+ });
+ </script>
@@ -0,0 +1,14 @@
+<project name="vintageJS" default="lint">
+
+ <property name="file" value="src/vintage.js"/>
+
+ <!-- lint (http://www.jslint.com/lint.html) -->
+ <target name="lint">
+ <!-- ant lint -Dfile=src/cajal.js -->
+ <java jar="build/js.jar">
+ <arg value="build/jslint-check.js" />
+ <arg value="${file}" />
+ </java>
+ </target>
+
+</project>
Binary file not shown.
@@ -0,0 +1,39 @@
+load("build/jslint.js");
+
+var src = readFile(arguments[0]);
+if (!src){
+ print("Couldn't open file '" + arguments[0] + "'.");
+ quit(1);
+}
+
+JSLINT(src, {rhino: true, evil: true, forin: true, maxerr: 100});
+
+// All of the following are known issues that we think are 'ok'
+// (in contradiction with JSLint) more information here:
+// http://docs.jquery.com/JQuery_Core_Style_Guidelines
+var ok = {
+ "Expected an identifier and instead saw 'undefined' (a reserved word).": true,
+ "Use '===' to compare with 'null'.": true,
+ "Use '!==' to compare with 'null'.": true,
+ "Expected an assignment or function call and instead saw an expression.": true,
+ "Expected a 'break' statement before 'case'.": true,
+ "'e' is already defined.": true
+};
+
+var e = JSLINT.errors, found = 0, w;
+
+for (var i = 0; i < e.length; i++) {
+ w = e[i];
+
+ if (!ok[ w.reason ]) {
+ found++;
+ print("\n" + w.evidence + "\n");
+ print(" Problem at line " + w.line + " character " + w.character + ": " + w.reason);
+ }
+}
+
+if (found > 0) {
+ print( "\n" + found + " Error(s) found.\n" );
+} else {
+ print( "JSLint check passed.\n" );
+}
Oops, something went wrong.

0 comments on commit 9e9a281

Please sign in to comment.