Permalink
Browse files

Merge branch 'master' of github.com:rendro/vintageJS

  • Loading branch information...
Robert Fleischmann
Robert Fleischmann committed Mar 17, 2011
2 parents 3b92e63 + 4df12d4 commit 77a05121782469ee3df4cb2bfcfd490bc7e78840
Showing with 97 additions and 27 deletions.
  1. +5 −1 README.markdown
  2. BIN documentation/img/viewfinder.jpg
  3. +1 −1 documentation/index.html
  4. +79 −15 src/vintage.js
  5. +12 −10 src/vintage.min.js
View
@@ -3,7 +3,7 @@
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/).
+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 vintageJS from [github](http://www.github.com/rendro/vintageJS/).
This jQuery-Plugin was tested and worked fine in the following browsers:
@@ -40,6 +40,7 @@ You can change the effect by adding options to the vintageJS call. There are thr
* `default`: the default preset is used when no preset is given
* `sepia`: sepia effect
+* `green`: green color overlay vintage 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
@@ -50,6 +51,9 @@ If you like to change the style to your own settings, here are the full options
* `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.
+* `mime`: Set the mime type of the returned image. Default is `image/jpeg`
+* `viewFinder`: Path to a viewFinder image that will be added to the image to create a ttv-Effect (through the viewfinder). You will find an example image under `documentation/img/viewfinder.jpg` (Source: [Nesster on Flickr](http://www.flickr.com/photos/nesster/409875082/sizes/o/))
+* `callback`: Callback function that is triggered when the base64 string of the new source is written to the DOM
Here is how a custom call could look like:
Binary file not shown.
View
@@ -12,7 +12,7 @@
<script>
$(function () {
$('.vintage').click(function () {
- $(this).vintage();
+ $(this).vintage({viewfinder: './img/viewfinder.jpg'});
});
$('img.custom').click(function () {
View
@@ -37,7 +37,29 @@ jQuery.fn.vintage = function (options) {
},
desaturate: false,
allowMultiEffect: false,
- mime: 'image/jpeg'
+ mime: 'image/jpeg',
+ viewFinder: false
+ };
+
+ /**
+ * green options for the aging effects
+ */
+ var greenOptions = {
+ vignette: {
+ black: 0.6,
+ white: 0.1
+ },
+ noise: 20,
+ screen: {
+ red: 255,
+ green:255,
+ blue: 0,
+ strength: 0.1
+ },
+ desaturate: false,
+ allowMultiEffect: false,
+ mime: 'image/jpeg',
+ viewFinder: false
};
/**
@@ -52,7 +74,8 @@ jQuery.fn.vintage = function (options) {
screen: false,
desaturate: 1,
allowMultiEffect: false,
- mime: 'image/jpeg'
+ mime: 'image/jpeg',
+ viewFinder: false
};
/**
@@ -72,7 +95,8 @@ jQuery.fn.vintage = function (options) {
},
desaturate: 0.7,
allowMultiEffect: false,
- mime: 'image/jpeg'
+ mime: 'image/jpeg',
+ viewFinder: false
};
/**
@@ -84,7 +108,8 @@ jQuery.fn.vintage = function (options) {
screen: false,
desaturate: false,
allowMultiEffect: true,
- mime: 'image/jpeg'
+ mime: 'image/jpeg',
+ viewFinder: false
};
/**
@@ -96,6 +121,9 @@ jQuery.fn.vintage = function (options) {
case 'custom':
options = jQuery.extend(customOptions, options);
break;
+ case 'green':
+ options = jQuery.extend(greenOptions, options);
+ break;
case 'sepia':
options = jQuery.extend(sepiaOptions, options);
break;
@@ -184,14 +212,14 @@ jQuery.fn.vintage = function (options) {
addVignetteEffect();
}
- manipulatePixels();
-
- //replace source with BASE64 code
- obj.attr('src', canvas.toDataURL(options.mime));
- loader.remove();
- if (typeof(options.callback) == 'function') {
- options.callback();
- }
+ manipulatePixels(function () {
+ //replace source with BASE64 code
+ obj.attr('src', canvas.toDataURL(options.mime));
+ loader.remove();
+ if (typeof(options.callback) == 'function') {
+ options.callback();
+ }
+ });
};
}
};
@@ -224,7 +252,7 @@ jQuery.fn.vintage = function (options) {
* Depending on the option settings the curves are adjusted, all pixels are multiplied negativly with a color layer (similar to the photoshop blending mode "screen",
* and a noise effect is added.
*/
- var manipulatePixels = function () {
+ var manipulatePixels = function (callback) {
var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
@@ -266,8 +294,44 @@ jQuery.fn.vintage = function (options) {
}
- //put manipulated image data
- ctx.putImageData(imageData, 0, 0);
+ if (options.viewFinder !== false) {
+ var img = new Image();
+ img.src = options.viewFinder;
+ img.onload = function () {
+
+ var viewFinderCanvas = jQuery('<canvas></canvas>').get(0);
+ var viewFinderCtx = viewFinderCanvas.getContext('2d');
+
+ viewFinderCanvas.width = canvas.width;
+ viewFinderCanvas.height = canvas.height;
+
+ viewFinderCtx.drawImage(this, 0, 0, this.width, this.height, 0, 0, canvas.width, canvas.height);
+
+ var viewFinderImageData = viewFinderCtx.getImageData(0, 0, canvas.width, canvas.height);
+
+ for (var a = 0; a < imageData.data.length; a+=4) {
+
+ //red channel
+ var red = ( imageData.data[a ] * viewFinderImageData.data[a ]) / 255;
+ imageData.data[a ] = red > 255 ? 255 : red < 0 ? 0 : red;
+
+ //green channel
+ var green = ( imageData.data[a+1] * viewFinderImageData.data[a+1]) / 255;
+ imageData.data[a+1] = green > 255 ? green : green < 0 ? 0 : green;
+
+ //blue channel
+ var blue = ( imageData.data[a+2] * viewFinderImageData.data[a+2]) / 255;
+ imageData.data[a+2] = blue > 255 ? 255 : blue < 0 ? 0 : blue;
+ }
+ //put manipulated image data
+ ctx.putImageData(imageData, 0, 0);
+ callback();
+ }
+ } else {
+ //put manipulated image data
+ ctx.putImageData(imageData, 0, 0);
+ callback();
+ }
};
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit 77a0512

Please sign in to comment.