Note: Demonstrated template is not mine.
Include pixi.js, pixi.css and jQuery in your site.
<link rel="stylesheet" href="http://praveenvijayan.github.com/PIXI/code/pixi.min.css"> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script> <script src="http://praveenvijayan.github.com/PIXI/code/pixi.min.js"></script>
Press G to activate the overlay. Drag n Drop design mockup/template into the overlay.
Press shift + &mouse; drag image to adjust.
Press 0-9 to set opacity.
G Toggle overlay. Z Bring fornt or sent to back [z-index:0-9999]. ← Moves overlay image 1px left. → Moves overlay image 1px right. ↑ Moves overlay image 1px up. ↓ Moves overlay image 1px down. shift + Drag Moves overlay image. 0 – 9 Sets overlay opacity. P – Disables overlay’s pointer event. When pointer event is none, you can’t drag n drop images. Activate it (press ‘P’) when you want to inspect underlaing elements.
PIXI uses HTML5 DnD, File API & Local storage to do things. It won’t work in IE. Tested in chrome & Firefox.