Over a million developers have joined DZone.

Simple Photo Filters with VintageJS and Cordova

· Java Zone

Microservices! They are everywhere, or at least, the term is. When should you use a microservice architecture? What factors should be considered when making that decision? Do the benefits outweigh the costs? Why is everyone so excited about them, anyway?  Brought to you in partnership with IBM.

A quick demo today of something I ran into via StackOverflow. VintageJS is a JavaScript library that adds simple camera filters, like sepia and vignettes, to pictures. As long as your browser supports canvas, you can make use of the library rather easily. Here is one example, stolen from their docs.

var img = document.getElementById('yourImage');
var options = {
    onError: function() {
        alert('ERROR');
    }
};
var effect = {
    vignette: 0.6,
    sepia: true
};
new VintageJS(img, options, effect);

The library also integrates well with AngularJS, which is a plus for me as I'm trying to do most everything in Cordova with AngularJS now. (Well, most things past simple demos like the one I'm showing today.) I whipped up a quick demo to see how well it worked with the device camera, and unsurprisingly, it worked just fine. I began by creating a new project to base camera demos off of - "basic_camera". A while ago I set up a GitHub repo for my demos and I thought a basic camera example would be something I'd use often. You can find the source for that project here: https://github.com/cfjedimaster/Cordova-Examples/tree/master/basic_camera. It literally just uses two buttons and lets you source images from either the camera or the device library.

Using that as a base I simply added the VintageJS demo code to my success handler. Here is my entire JavaScript file.

document.addEventListener("deviceready", init, false);
function init() {

	function onSuccess(imageData) {
		console.log('success');
		var image = document.getElementById('myImage');
		image.src = imageData;

		var options = {
			onError: function() {
				alert('ERROR');
			}
		};

		var effect = {
			vignette: 0.6,
			sepia: true
		};

		new VintageJS(image, options, effect);

	}

	function onFail(message) {
		alert('Failed because: ' + message);
	}	

	//Use from Camera
	document.querySelector("#takePicture").addEventListener("touchend", function() {
		navigator.camera.getPicture(onSuccess, onFail, { 
			quality: 50,
			sourceType: Camera.PictureSourceType.CAMERA,
			destinationType: Camera.DestinationType.FILE_URI
		});

	});

	//Use from Library
	document.querySelector("#usePicture").addEventListener("touchend", function() {
		navigator.camera.getPicture(onSuccess, onFail, { 
			quality: 50,
			sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
			destinationType: Camera.DestinationType.FILE_URI
		});

	});

}

And here is one result from the iOS Simulator:

And here is an example running from my Nexus 7. My UI isn't optimized so forgive me for that. Also, I'm sorry my face is so scary. ;)

Pretty cool, and pretty simple. I put this version up in my GitHub repo as well: https://github.com/cfjedimaster/Cordova-Examples/tree/master/camera_vintagejs


Discover how the Watson team is further developing SDKs in Java, Node.js, Python, iOS, and Android to access these services and make programming easy. Brought to you in partnership with IBM.

Topics:

Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}