Comments

This app will let you create tokens for online RPG tools like Roll20.net and MapTools.  It works much like TokenTool, available at http://www.rptools.net, and I wouldn't have even thought of doing this without their inspiration.  I'd also like to thank the devlopers at KineticJS (http://kineticjs.com/), and the site http://www.html5canvastutorials.com/ for showing me what tools to use and how to get it done.  All image manipulation is done with straight javascript and the KineticJS library.  
The app currently runs in recent versions of Firefox and Chrome.  The app will not work with IE9, and only partially works in IE10.  Safari and other browsers are not tested.  It may be updated some day, it may not be.  This is really only a tool I put together to generate images for my other projects, and I'm ready to move on to those.  At any rate, the code is available on github at https://github.com/SerpentineOwl/Html5TokenMaker, and can be forked.  Feel free to add more features, style it better, and add more browser support.

Basic Instructions

Drag and drop the image you wish to use as the Overlay image into the area under the Overlay Canvas label.  The image will be fit to the Overlay canvas, and appear full size in the Edit Canvas.  This should be a png image, with a transparent area to show the underlying base image.  Optionally, it can include a single color (the Transparency Mask) that you can choose to be transparent on the final clipped image.  

Drag and drop the image you wish to use as the Base image into the area under the Base Canvas label.  The image will be fit to the Base canvas, and appear centered, full size in the Edit Canvas. Once both an Overlay and a Base image are loaded, the Clip Result image will appear.  The Clip Result image will update as you perform actions on the Edit Canvas.

You can reposition both the Overlay and Base images on the Edit Canvas by clicking on the image and dragging it around.  The Clip Result image will update when you stop dragging and let the mouse button back up. 

You can zoom in and out of the Base image by scrolling the mouse wheel within the Edit Canvas.  The Clip Result image will update as you scroll. 

Apply your Transparency Mask by first clicking on the mask color with the Overlay Canvas.  This will update the color that appears next to the Apply Transparency Mask checkbox.  Then click on the Apply Transparency Mask checkbox to have that color turned to transparency in the Clip Result image. 

When you are satisfied with the Clip Result image, right click on that image to save it. 
	
If you have any questions or comments, leave a message on my blog at http://www.serpentineowl.com/2013/01/21/html5-token-maker, or add a question or comment to the github project page at https://github.com/SerpentineOwl/Html5TokenMaker.