This library allows the user to produce a "click to focus" image, with a set of pictures taken at all focal length.
Import multifocus.js in your html
<script type="text/javascript" src="multifocus.js"></script>Then initialize the library in your JS code
var myzone = document.getElementById('myzone');
var options = {
container: myzone, // Container of MultiFocus widget
width: 1024, // Width of container in PX (typically width of each image)
height: 768, // Height of container in PX (typically height of each image)
preload: true, // Define if the set of images should be preloaded
speed: 100, // Duration between two frames in ms
images: [ // All images of the set in the right focal length order
// ...
{
src: 'focus-01.jpg', // Image path
focus: [ // All focus rectangles for this image
{
x1: 0.1, // x1, y1 : Top left point of the sharp zone
y1: 0.1,
x2: 0.5, // x2, y2 : Bottom right point of the sharp zone
y2: 0.5
},
// ... // Define other sharp zone for this image
]
}
// ...
]
};
var multifocus = new MultiFocus(options);
multifocus.init();All coordinates x1, y1, x2, y2 should be set in percentage of the width or height of the full sized image.