A jQuery paint plugin.
Available options with notes, the values here are the defaults.
$('#elem').wPaint({
mode : 'Pencil', // drawing mode - Rectangle, Ellipse, Line, Pencil, Eraser
lineWidthMin : '0', // line width min for select drop down
lineWidthMax : '10', // line widh max for select drop down
lineWidth : '2', // starting line width
fillStyle : '#FFFFFF', // starting fill style
strokeStyle : '#FFFF00', // start stroke style
fontSizeMin : '8', // min font size in px
fontSizeMax : '20', // max font size in px
fontSize : '12', // current font size for text input
fontFamilyOptions : ['Arial', 'Courier', 'Times', 'Trebuchet', 'Verdana'],
fontFamily : 'Arial', // active font family for text input
fontTypeBold : false, // text input bold enable/disable
fontTypeItalic : false, // text input italic enable/disable
fontTypeUnderline : false, // text input italic enable/disable
image : null, // preload image - base64 encoded data
imageBg : null, // preload image bg, cannot be altered but saved with image
drawDown : null, // function to call when start a draw
drawMove : null, // function to call during a draw
drawUp : null, // function to call at end of draw
menu : ['undo','clear','rectangle','ellipse','line','pencil','text','eraser','fillColor','lineWidth','strokeColor'], // menu items - appear in order they are set
menuOrientation : 'horizontal' // orinetation of menu (horizontal, vertical)
menuOffsetX : 5, // offset for menu (left)
menuOffsetY : 5 // offset for menu (top)
menuTitles : { // icon titles, replace any of the values to customize
'undo': 'undo',
'redo': 'redo',
'clear': 'clear',
'rectangle': 'rectangle',
'ellipse': 'ellipse',
'line': 'line',
'pencil': 'pencil',
'text': 'text',
'eraser': 'eraser',
'fillColor': 'fill color',
'lineWidth': 'line width',
'strokeColor': 'stroke color',
'bold': 'bold',
'italic': 'italic',
'underline': 'underline',
'fontSize': 'font size',
'fontFamily': 'font family'
},
disableMobileDefaults: false // disable default touchmove events for mobile (will prevent flipping between tabs and scrolling)
});Update settings on the fly:
$('#elem').wPaint('image', '<image_data>');
$('#elem').wPaint('image', '/path/to/file.jpg');Retrieve settings, if more than one it will return an array otherwise just the value.
console.log($('#elem').wPaint('strokeStyle')); // #FFFF00
console.log($('.elem').wPaint('strokeStyle')); // ['#FFFF00', '#FFFF00']Retrieve paint object.
var wp = $('#wPaint').wPaint().data('_wPaint');
console.log(wp); // {wPaint object}$('#elem').wPaint('clear');Init with image and some callbacks:
<div id="wPaint"></div>
down: <input id="canvasDown" type="text" />
move: <input id="canvasMove" type="text" />
up: <input id="canvasUp" type="text" />
<script type="text/javascript">
$("#wPaint").wPaint({
image: <image_data>,
drawDown: function(e, mode){ $("#canvasDown").val(this.settings.mode + ": " + e.pageX + ',' + e.pageY); },
drawMove: function(e, mode){ $("#canvasMove").val(this.settings.mode + ": " + e.pageX + ',' + e.pageY); },
drawUp: function(e, mode){ $("#canvasUp").val(this.settings.mode + ": " + e.pageX + ',' + e.pageY); }
});
</script>Init with background (bg is saved with image but cannot be altered):
<div id="wPaint"></div>
<script type="text/javascript">
$("#wPaint").wPaint({
image: './some/path/imagepreload.png',
imageBg: './some/path/imagebg.png'
});
</script>Set image on the fly:
<div id="wPaint"></div>
<script type="text/javascript">
$("#wPaint").wPaint();
$('#wPaint').wPaint('image', '<image_data>')
</script>Get image data:
<div id="wPaint"></div>
<img id="canvasImage" src=""/>
<script type="text/javascript">
var imageData = $("#wPaint").wPaint("image");
$("#canvasImage").attr('src', imageData);
</script>MIT licensed
Copyright (C) 2011-2012 Websanova http://www.websanova.com