Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Simple Photo Filters with VintageJS and Cordova

DZone's Guide to

Simple Photo Filters with VintageJS and Cordova

· Java Zone
Free Resource

Download Microservices for Java Developers: A hands-on introduction to frameworks and containers. Brought to you in partnership with Red Hat.

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


Download Building Reactive Microservices in Java: Asynchronous and Event-Based Application Design. Brought to you in partnership with Red Hat

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 DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

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

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}