Skip to content
Browse files

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

  • Loading branch information...
2 parents 3b92e63 + 4df12d4 commit 77a05121782469ee3df4cb2bfcfd490bc7e78840 Robert Fleischmann committed
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
6 README.markdown
@@ -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:
View
BIN documentation/img/viewfinder.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
2 documentation/index.html
@@ -12,7 +12,7 @@
<script>
$(function () {
$('.vintage').click(function () {
- $(this).vintage();
+ $(this).vintage({viewfinder: './img/viewfinder.jpg'});
});
$('img.custom').click(function () {
View
94 src/vintage.js
@@ -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
22 src/vintage.min.js
@@ -11,15 +11,17 @@
* @author Robert Fleischmann
* @version 1.0.0
*/
-jQuery.fn.vintage=function(b){var l=[0,0,0,1,1,2,3,3,3,4,4,4,5,5,5,6,6,7,7,7,7,8,8,8,9,9,9,9,10,10,10,10,11,11,12,12,12,12,13,13,13,14,14,15,15,16,16,17,17,17,18,19,19,20,21,22,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,39,40,41,42,44,45,47,48,49,52,54,55,57,59,60,62,65,67,69,70,72,74,77,79,81,83,86,88,90,92,94,97,99,101,103,107,109,111,112,116,118,120,124,126,127,129,133,135,136,140,142,143,145,149,150,152,155,157,159,162,163,165,167,170,171,173,176,177,178,180,183,184,185,188,189,190,192,194,
-195,196,198,200,201,202,203,204,206,207,208,209,211,212,213,214,215,216,218,219,219,220,221,222,223,224,225,226,227,227,228,229,229,230,231,232,232,233,234,234,235,236,236,237,238,238,239,239,240,241,241,242,242,243,244,244,245,245,245,246,247,247,248,248,249,249,249,250,251,251,252,252,252,253,254,254,254,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255],m=[0,0,1,2,2,3,5,5,6,7,8,8,10,11,11,12,13,15,15,16,17,18,18,19,21,22,22,23,24,
+jQuery.fn.vintage=function(a){var o=[0,0,0,1,1,2,3,3,3,4,4,4,5,5,5,6,6,7,7,7,7,8,8,8,9,9,9,9,10,10,10,10,11,11,12,12,12,12,13,13,13,14,14,15,15,16,16,17,17,17,18,19,19,20,21,22,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,39,40,41,42,44,45,47,48,49,52,54,55,57,59,60,62,65,67,69,70,72,74,77,79,81,83,86,88,90,92,94,97,99,101,103,107,109,111,112,116,118,120,124,126,127,129,133,135,136,140,142,143,145,149,150,152,155,157,159,162,163,165,167,170,171,173,176,177,178,180,183,184,185,188,189,190,192,194,
+195,196,198,200,201,202,203,204,206,207,208,209,211,212,213,214,215,216,218,219,219,220,221,222,223,224,225,226,227,227,228,229,229,230,231,232,232,233,234,234,235,236,236,237,238,238,239,239,240,241,241,242,242,243,244,244,245,245,245,246,247,247,248,248,249,249,249,250,251,251,252,252,252,253,254,254,254,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255],p=[0,0,1,2,2,3,5,5,6,7,8,8,10,11,11,12,13,15,15,16,17,18,18,19,21,22,22,23,24,
26,26,27,28,29,31,31,32,33,34,35,35,37,38,39,40,41,43,44,44,45,46,47,48,50,51,52,53,54,56,57,58,59,60,61,63,64,65,66,67,68,69,71,72,73,74,75,76,77,79,80,81,83,84,85,86,88,89,90,92,93,94,95,96,97,100,101,102,103,105,106,107,108,109,111,113,114,115,117,118,119,120,122,123,124,126,127,128,129,131,132,133,135,136,137,138,140,141,142,144,145,146,148,149,150,151,153,154,155,157,158,159,160,162,163,164,166,167,168,169,171,172,173,174,175,176,177,178,179,181,182,183,184,186,186,187,188,189,190,192,193,194,
-195,195,196,197,199,200,201,202,202,203,204,205,206,207,208,208,209,210,211,212,213,214,214,215,216,217,218,219,219,220,221,222,223,223,224,225,226,226,227,228,228,229,230,231,232,232,232,233,234,235,235,236,236,237,238,238,239,239,240,240,241,242,242,242,243,244,245,245,246,246,247,247,248,249,249,249,250,251,251,252,252,252,253,254,255],n=[53,53,53,54,54,54,55,55,55,56,57,57,57,58,58,58,59,59,59,60,61,61,61,62,62,63,63,63,64,65,65,65,66,66,67,67,67,68,69,69,69,70,70,71,71,72,73,73,73,74,74,75,75,
+195,195,196,197,199,200,201,202,202,203,204,205,206,207,208,208,209,210,211,212,213,214,214,215,216,217,218,219,219,220,221,222,223,223,224,225,226,226,227,228,228,229,230,231,232,232,232,233,234,235,235,236,236,237,238,238,239,239,240,240,241,242,242,242,243,244,245,245,246,246,247,247,248,249,249,249,250,251,251,252,252,252,253,254,255],q=[53,53,53,54,54,54,55,55,55,56,57,57,57,58,58,58,59,59,59,60,61,61,61,62,62,63,63,63,64,65,65,65,66,66,67,67,67,68,69,69,69,70,70,71,71,72,73,73,73,74,74,75,75,
76,77,77,78,78,79,79,80,81,81,82,82,83,83,84,85,85,86,86,87,87,88,89,89,90,90,91,91,93,93,94,94,95,95,96,97,98,98,99,99,100,101,102,102,103,104,105,105,106,106,107,108,109,109,110,111,111,112,113,114,114,115,116,117,117,118,119,119,121,121,122,122,123,124,125,126,126,127,128,129,129,130,131,132,132,133,134,134,135,136,137,137,138,139,140,140,141,142,142,143,144,145,145,146,146,148,148,149,149,150,151,152,152,153,153,154,155,156,156,157,157,158,159,160,160,161,161,162,162,163,164,164,165,165,166,166,
-167,168,168,169,169,170,170,171,172,172,173,173,174,174,175,176,176,177,177,177,178,178,179,180,180,181,181,181,182,182,183,184,184,184,185,185,186,186,186,187,188,188,188,189,189,189,190,190,191,191,192,192,193,193,193,194,194,194,195,196,196,196,197,197,197,198,199],o={vignette:{black:0.7,white:0.2},noise:25,screen:false,desaturate:1,allowMultiEffect:false,mime:"image/jpeg"},p={vignette:{black:0.6,white:0.1},noise:25,screen:{red:141,green:107,blue:3,strength:0.47},desaturate:0.7,allowMultiEffect:false,
-mime:"image/jpeg"},q={vignette:false,noise:false,screen:false,desaturate:false,allowMultiEffect:true,mime:"image/jpeg"};b=b||{};b.preset=b.preset||"default";switch(b.preset){case "custom":b=jQuery.extend(q,b);break;case "sepia":b=jQuery.extend(p,b);break;case "grayscale":b=jQuery.extend(o,b);break;default:b=jQuery.extend({vignette:{black:0.6,white:0.1},noise:20,screen:{red:227,green:12,blue:169,strength:0.1},desaturate:false,allowMultiEffect:false,mime:"image/jpeg"},b)}return this.each(function(){var f=
-jQuery(this),e,d,i;if(f.is("img")){if(b.allowMultiEffect===false)if(f.data("vintage-applied")!==true)f.data("vintage-applied",true);else return;var r=function(){d=jQuery("<canvas></canvas>").get(0);if(d.getContext){e=d.getContext("2d");var g=new Image;g.src=f.attr("src");g.onload=function(){d.width=this.width;d.height=this.height;e.drawImage(this,0,0,this.width,this.height,0,0,d.width,d.height);if(b.vignette!==false){var a,c=Math.sqrt(Math.pow(d.width/2,2)+Math.pow(d.height/2,2));e.globalCompositeOperation=
-"source-over";a=e.createRadialGradient(d.width/2,d.height/2,0,d.width/2,d.height/2,c);a.addColorStop(0,"rgba(0,0,0,0)");a.addColorStop(0.65,"rgba(0,0,0,0)");a.addColorStop(1,"rgba(0,0,0,"+b.vignette.black+")");e.fillStyle=a;e.fillRect(0,0,d.width,d.height);e.globalCompositeOperation="lighter";a=e.createRadialGradient(d.width/2,d.height/2,0,d.width/2,d.height/2,c);a.addColorStop(0,"rgba(255,255,255,"+b.vignette.white+")");a.addColorStop(0.65,"rgba(255,255,255,0)");a.addColorStop(1,"rgba(0,0,0,0)");
-e.fillStyle=a;e.fillRect(0,0,d.width,d.height)}a=e.getImageData(0,0,d.width,d.height);for(c=0;c<a.data.length;c+=4){if(b.desaturate!==false){var h=(l[a.data[c]]+m[a.data[c+1]]+n[a.data[c+2]])/3;a.data[c]+=Math.round((h-a.data[c])*b.desaturate);a.data[c+1]+=Math.round((h-a.data[c+1])*b.desaturate);a.data[c+2]+=Math.round((h-a.data[c+2])*b.desaturate)}else{a.data[c]=l[a.data[c]];a.data[c+1]=m[a.data[c+1]];a.data[c+2]=n[a.data[c+2]]}if(b.screen!==false){a.data[c]=255-(255-a.data[c])*(255-b.screen.red*
-b.screen.strength)/255;a.data[c+1]=255-(255-a.data[c+1])*(255-b.screen.green*b.screen.strength)/255;a.data[c+2]=255-(255-a.data[c+2])*(255-b.screen.blue*b.screen.strength)/255}if(b.noise>0){h=Math.round(b.noise-Math.random()*b.noise/2);for(var j=0,k=0;k<3;k++){j=h+a.data[c+k];a.data[c+k]=j>255?255:j<0?0:j}}}e.putImageData(a,0,0);f.attr("src",d.toDataURL(b.mime));i.remove();typeof b.callback=="function"&&b.callback()}}else i.addClass("error").html("Your browser does not support the canvas element.").animate({opacity:"+=0"},
-3E3,function(){$(this).fadeOut(300,function(){$(this).remove()})})};(function(){var g=f.offset();g.top+=Math.round(f.height()/2);g.left+=Math.round(f.width()/2);i=jQuery('<div class="vintage-loader">Loading&hellip;</div>');i.css("top",g.top+"px").css("left",g.left+"px").hide().appendTo("body").fadeTo(0,0.8,function(){r()})})()}})};
+167,168,168,169,169,170,170,171,172,172,173,173,174,174,175,176,176,177,177,177,178,178,179,180,180,181,181,181,182,182,183,184,184,184,185,185,186,186,186,187,188,188,188,189,189,189,190,190,191,191,192,192,193,193,193,194,194,194,195,196,196,196,197,197,197,198,199],r={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},s={vignette:{black:0.7,white:0.2},noise:25,screen:false,desaturate:1,
+allowMultiEffect:false,mime:"image/jpeg",viewFinder:false},t={vignette:{black:0.6,white:0.1},noise:25,screen:{red:141,green:107,blue:3,strength:0.47},desaturate:0.7,allowMultiEffect:false,mime:"image/jpeg",viewFinder:false},u={vignette:false,noise:false,screen:false,desaturate:false,allowMultiEffect:true,mime:"image/jpeg",viewFinder:false};a=a||{};a.preset=a.preset||"default";switch(a.preset){case "custom":a=jQuery.extend(u,a);break;case "green":a=jQuery.extend(r,a);break;case "sepia":a=jQuery.extend(t,
+a);break;case "grayscale":a=jQuery.extend(s,a);break;default:a=jQuery.extend({vignette:{black:0.6,white:0.1},noise:20,screen:{red:227,green:12,blue:169,strength:0.1},desaturate:false,allowMultiEffect:false,mime:"image/jpeg",viewFinder:false},a)}return this.each(function(){var i=jQuery(this),g,c,l;if(i.is("img")){if(a.allowMultiEffect===false)if(i.data("vintage-applied")!==true)i.data("vintage-applied",true);else return;var x=function(){c=jQuery("<canvas></canvas>").get(0);if(c.getContext){g=c.getContext("2d");
+var e=new Image;e.src=i.attr("src");e.onload=function(){c.width=this.width;c.height=this.height;g.drawImage(this,0,0,this.width,this.height,0,0,c.width,c.height);a.vignette!==false&&v();w(function(){i.attr("src",c.toDataURL(a.mime));l.remove();typeof a.callback=="function"&&a.callback()})}}else l.addClass("error").html("Your browser does not support the canvas element.").animate({opacity:"+=0"},3E3,function(){$(this).fadeOut(300,function(){$(this).remove()})})},v=function(){var e,b=Math.sqrt(Math.pow(c.width/
+2,2)+Math.pow(c.height/2,2));g.globalCompositeOperation="source-over";e=g.createRadialGradient(c.width/2,c.height/2,0,c.width/2,c.height/2,b);e.addColorStop(0,"rgba(0,0,0,0)");e.addColorStop(0.65,"rgba(0,0,0,0)");e.addColorStop(1,"rgba(0,0,0,"+a.vignette.black+")");g.fillStyle=e;g.fillRect(0,0,c.width,c.height);g.globalCompositeOperation="lighter";e=g.createRadialGradient(c.width/2,c.height/2,0,c.width/2,c.height/2,b);e.addColorStop(0,"rgba(255,255,255,"+a.vignette.white+")");e.addColorStop(0.65,
+"rgba(255,255,255,0)");e.addColorStop(1,"rgba(0,0,0,0)");g.fillStyle=e;g.fillRect(0,0,c.width,c.height)},w=function(e){for(var b=g.getImageData(0,0,c.width,c.height),d=0;d<b.data.length;d+=4){if(a.desaturate!==false){var k=(o[b.data[d]]+p[b.data[d+1]]+q[b.data[d+2]])/3;b.data[d]+=Math.round((k-b.data[d])*a.desaturate);b.data[d+1]+=Math.round((k-b.data[d+1])*a.desaturate);b.data[d+2]+=Math.round((k-b.data[d+2])*a.desaturate)}else{b.data[d]=o[b.data[d]];b.data[d+1]=p[b.data[d+1]];b.data[d+2]=q[b.data[d+
+2]]}if(a.screen!==false){b.data[d]=255-(255-b.data[d])*(255-a.screen.red*a.screen.strength)/255;b.data[d+1]=255-(255-b.data[d+1])*(255-a.screen.green*a.screen.strength)/255;b.data[d+2]=255-(255-b.data[d+2])*(255-a.screen.blue*a.screen.strength)/255}if(a.noise>0){k=Math.round(a.noise-Math.random()*a.noise/2);for(var m=0,n=0;n<3;n++){m=k+b.data[d+n];b.data[d+n]=m>255?255:m<0?0:m}}}if(a.viewFinder!==false){d=new Image;d.src=a.viewFinder;d.onload=function(){var j=jQuery("<canvas></canvas>").get(0),f=
+j.getContext("2d");j.width=c.width;j.height=c.height;f.drawImage(this,0,0,this.width,this.height,0,0,c.width,c.height);j=f.getImageData(0,0,c.width,c.height);for(f=0;f<b.data.length;f+=4){var h=b.data[f]*j.data[f]/255;b.data[f]=h>255?255:h<0?0:h;h=b.data[f+1]*j.data[f+1]/255;b.data[f+1]=h>255?h:h<0?0:h;h=b.data[f+2]*j.data[f+2]/255;b.data[f+2]=h>255?255:h<0?0:h}g.putImageData(b,0,0);e()}}else{g.putImageData(b,0,0);e()}};(function(){var e=i.offset();e.top+=Math.round(i.height()/2);e.left+=Math.round(i.width()/
+2);l=jQuery('<div class="vintage-loader">Loading&hellip;</div>');l.css("top",e.top+"px").css("left",e.left+"px").hide().appendTo("body").fadeTo(0,0.8,function(){x()})})()}})};

0 comments on commit 77a0512

Please sign in to comment.
Something went wrong with that request. Please try again.