overlay one image over the other to view the visual differences between both the photos.
user should be able to drag the Mask area.
user should be able to resize the mask area.
<link href="css/maskArea.css" rel="stylesheet">
<script type="text/javascript" src="js/maskArea.js"></script>
<div id="maskArea"></div>
<script>
jQuery(document).ready( function($) {
$("#maskArea").maskArea({
bgImage :"fmages/b.jpg",
maskerImage :"fmages/f.jpg",
width:"500",
height:"500",
maskerWidth :"150",
maskerHeight :"150",
complete : function() {}
});
})
</script>
Attributes
bgImage : Image url for the background
maskerImage : Image url for the masker Image
width : Width for the image container
height : Height for the image container
maskerWidth : Width for the mask,
maskerHeight : Height for the mask
- Masks contain at least two parts : the graphic you want to mask(bgImage) and the graphic used to mask it(maskerImage),
<link href="css/jquery-ui.css" rel="stylesheet">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
Jquery Download.
JqueryUI Download.
<script src="js/angular.min.js"></script>
<script src="js/angular-maskArea.js"></script>
<div ng-app="maskArea">
<div id="maskArea" mask-area="{bgImage:'pic/b.jpg',maskerImage:'pic/f.jpg', width:'602',height:'266', maskerWidth:'50', maskerHeight:'50'}">
</div>
</div>
This project is licensed under the MIT License - see the LICENSE.md file for details