Get random subsection of photo

Question

I am working on a web app and am pretty new to web development.

Currently my program gets an and asks for user input relating to the photo.

For my project to be done I need to be able to do one of two things:

1. Select a random square in the photo and display only that portion. I want this portion of the image to change everytime the page is reloaded to show a different portion.

2. Detect a facial feature, like an eye or a mouth and show only that portion of the image.

Any free libraries or easy ways to implement either of these features?

Thank You!

Answer 1

For the first question, it's relatively easy. All you need is to set the image url as the background image of a square element, say, a <div>, and then use JS to randomly generate a x% and y% for the background-position: x% y% property:

$(document).ready(function() {
    // Generate random x-y coordinates
    var x = parseInt(100*Math.random(0,1)),
        y = parseInt(100*Math.random(0,1));

    // Set background-image and position
    $('#img').css({
        'background-image':'url('+$('#img').data('img-src')+')',
        'background-position':x+'% '+y+'%'
    });
});

For the HTML part, we take advantage of the HTML data- attribute:

<div id="img" data-img-src="/path/to/image"></div>

The CSS is also pretty straight forward:

#img {
    width: 400px;
    height: 400px;
}

You can see the fiddle here - http://jsfiddle.net/teddyrised/gabxj/

The second question - what have you tried? I did a quick search on Google and SO - Any library for face recognition in JavaScript?