Monday, September 3, 2012

Tool to create custom icon marker shadow images

I made a simple HTML5 webapp to generate shadows from transparent icon images for use as custom icon marker shadows in web mapping applications like Google Maps, Bing Maps, OneMap or OpenStreetMap. There are already a couple of online shadow creation tools available but all of them performs the transformation processes on the server, which means the source image file needs to be uploaded first.

I thought of using the HTML5 canvas object to perform the silhouetting, scaling, skewing and blurring processes required to transform the source image into a shadow - all entirely done on the user's local browser without having to incur network bandwidth to upload and download the images onto the server. The only requirement is that a modern browser like Chrome, Internet Explorer 10, or FireFox must be used.

To run this webapp, go to http://dominoc925-pages.appspot.com/webapp/create_icon_shadow/default.html.

Then simply drag and drop a marker icon image onto the dashed box, or click the button and browse and select the source image.


No comments: