Playing with image processing in Javascript using MarvinJ 1.0 (JSFiddle Examples)
Marvin Framework is a pure Java image processing framework that is under development for many years and it is adopted worldwide (some works). MarvinJ was created to be the Javascript version of Marvin Framework aiming to provide the same features in the web, server and mobile platforms powered by Javascript.
Now MarvinJ reaches its 1.0 version after the porting of the most part of Marvin Framework as well as many of its image processing plug-ins. In fact, MarvinJ architecture was set to allow porting Java-based plug-ins automatically. The classes and interfaces are almost the same. If you know Java and Javascript and how to use Marvin, you know how to use MarvinJ. If you compare algorithm plug-ins in both platforms (i.e. Erosion.java, Erosion.js), it's clear that we can go from Java to Javascript pretty easily.
The nice part of having a javascript version is to run examples directly on a web page that is good for education purposes besides real applications. Another cool stuff is the ability to play with examples on JSFiddle. Take a look at our library of image processing examples on JSFiddle.
If you are not familiar with Marvin Framework and want to play with MarvinJ, don't worry. The rest of this article shows the basic image processing features of MarvinJ using JSFiddle snippets that you can make your own version and play with it.
Image Loading
In the case of MarvinJ we load images from URLs and usually use a HTML5 canvas for displaying processed images.
Manipulating Pixels
For accessing and changing pixel color components values you have to use the methods getIntColor(), setIntColor(). For example, if you want to implement thresholding method based on gray scale, you could make it as follow.
Image Pre-processing
A common useful feature for applications that ask user to upload photos is to resize or adjust the image just before uploading to avoid sending unncessary high resolution images to the server. The example below resizes the image and adjust dimensions to the same width and height.
Background Removal
In many cases you want to remove image background and make it transparency. This can be done easily with MarvinJ as follows:
Basic Filters
The good part of using an image processing framework is the fact you don't need to implement your own algorithm for basic processing commonly used. The example below demonstrates how to use some basic features provided by MarvinJ.
Photo Merging
Using the same algorithm used to estimate the background in fixed camera videos for segmenting the foreground elements, we can estimate the background of a sequence of photos took from the same position and combine the foreground elements of each photo to create an effect that shows an action sequence in a single frame.
Object Segmentation
In some cases you want the segment and crop elements that are in a given image.
Rendering Algorithms
If you want to play with fractals and other rendering algorithms, MarvinJ provides algorithms to to so.
Conclusion
MarvinJ provides many other features and new versions will be released in the next months. Follow our project on Github to get informed about new versions. Enter on our discussion group to suggest ideas, ask questions about the framework and image processing in general as well.
Are you looking for javascript image processing advice? Try this form: Ask an Expert
