Scratch To Reveal A Hidden Image Underneath - jQuery Eraser

A jQuery-powered eraser tool that enables you to scratch an image to reveal a hidden image underneath using mouse movement or touch gestures, just like a scratch card should.

This is often used to promote a product or service that requires the user to take action before viewing additional information.

See Also:

• jQuery Plugin For HTML5 Canvas Based Scratchcard - ScratchIt
• Touch-friendly Scratch Card With Pure JavaScript – ScratchCard
• Touch-enabled Virtual Scratch Card With JavaScript And Canvas – Touch2Reveal

How to use it:

1. Include jQuery library and the jquery.eraser.js script on the page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.eraser.js"></script>

2. Add overlapping images to the page.

<img id="overlay" src="overlay.jpg" />
<img id="underneath" src="underneath.png" />

#overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}

#underneath {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
}

3. Call the function on the 'underneath' image and done.

$('#underneath').eraser({
  // ...
});

4. Specify the brush size. Default: 40.

$('#underneath').eraser({
  size: 20,
});

5. Trigger a function when a erased ratio is reached.

$('#underneath').eraser({
  completeRatio: .65,
  completeFunction: myFunction,
});

6. API methods.

// erases all canvas content
$('#underneath').eraser( 'clear' ); 

// revert back to original content
$('#underneath').eraser( 'reset' ); 

// change the brush size
$('#underneath').eraser( 'size', 80 ); 

// enable or disable erasing
$('#underneath').eraser( 'enable/disable' ); 

// returns true if the eraser is enabled
$('#underneath').eraser( 'enabled' );

---

This awesome jQuery plugin is developed by boblemarin. For more Advanced Usages, please check the demo page or visit the official website.