@ -1,10 +1,57 @@
$ ( function ( ) {
var canvas = $ ( "#cvs" ) ;
var context = canvas [ 0 ] . getContext ( "2d" ) ;
var is_drawing = false ;
var text = "" ;
var eraser = getcolor = fill = false ;
context . strokeStyle = context . fillStyle = "black" ;
// Init
var oekaki_form = ' \
< tr id = "oekaki" > \
< th > \
Oekaki \
< / t h > \
< td > \
< canvas width = "500" height = "250" id = "cvs" style = "border:1px solid black;-webkit-user-select: none;-moz-user-select: none;" > lol what you looking at the source for nerd < / c a n v a s > \
< p > < button type = "button" id = "brushsize" > Brush size < /button><input class="color" id="color" value="000000" placeholder="Color"/ > < button type = "button" id = "text" > Set text < / b u t t o n > < b u t t o n t y p e = " b u t t o n " i d = " c l e a r " > C l e a r < / b u t t o n > < b u t t o n t y p e = " b u t t o n " i d = " s a v e " > S a v e < / b u t t o n > < b u t t o n t y p e = " b u t t o n " i d = " l o a d " > L o a d < / b u t t o n > < b r / > \
< button type = "button" id = "eraser" > Toggle eraser < / b u t t o n > < b u t t o n t y p e = " b u t t o n " i d = " g e t c o l o r " > G e t c o l o r < / b u t t o n > < b u t t o n t y p e = " b u t t o n " i d = " f i l l " > F i l l < / b u t t o n > \
< / p > < p > < t e x t a r e a i d = " s a v e b o x " > < / t e x t a r e a > < l a b e l > < i n p u t i d = " c o n f i r m _ o e k a k i " t y p e = " c h e c k b o x " / > U s e o e k a k i i n s t e a d o f f i l e ? < / l a b e l > < / p > \
< img id = "saved" style = "display:none" > \
< / t d > \
< / t r > '
function enable_oekaki ( ) {
// Add oekaki after the file input
$ ( 'input[type="file"]' ) . parent ( ) . parent ( ) . after ( oekaki_form ) ;
// Init oekaki vars
canvas = $ ( "#cvs" ) ;
context = canvas [ 0 ] . getContext ( "2d" ) ;
is_drawing = false ;
text = "" ;
eraser = getcolor = fill = false ;
context . strokeStyle = context . fillStyle = "black" ;
// Attach canvas events
attach_events ( ) ;
localStorage [ 'oekaki' ] = true ;
}
function disable_oekaki ( ) {
$ ( "#oekaki" ) . detach ( )
localStorage [ 'oekaki' ] = false ;
}
if ( localStorage [ 'oekaki' ] === undefined ) { localStorage [ 'oekaki' ] = true }
$ ( 'hr:first' ) . before ( '<div id="oekaki-status" style="text-align:right"><a class="unimportant" href="javascript:void(0)">-</a></div>' ) ;
$ ( 'div#oekaki-status a' ) . text ( _ ( 'Oekaki' ) + ' (' + ( localStorage [ 'oekaki' ] === 'true' ? _ ( 'enabled' ) : _ ( 'disabled' ) ) + ')' ) ;
$ ( 'div#oekaki-status a' ) . on ( 'click' , function ( ) {
var enabled = ! JSON . parse ( localStorage [ 'oekaki' ] ) ;
if ( enabled ) {
enable_oekaki ( ) ;
} else {
disable_oekaki ( ) ;
}
$ ( 'div#oekaki-status a' ) . text ( _ ( 'Oekaki' ) + ' (' + ( enabled ? _ ( 'enabled' ) : _ ( 'disabled' ) ) + ')' ) ;
} ) ;
if ( localStorage [ 'oekaki' ] === "true" ) { enable_oekaki ( ) ; }
//http://stackoverflow.com/a/5624139/1901658
function hexToRgb ( hex ) {
@ -69,6 +116,8 @@ function color_under_pixel(x, y){
return context . getImageData ( x , y , 1 , 1 ) . data ;
}
function attach_events ( ) {
canvas . on ( "mousedown" , function ( e ) {
getmousepos ( e ) ;
$ ( this ) . css ( "cursor" , "none" ) ;
@ -164,6 +213,7 @@ $("#getcolor").on("click", function(){
$ ( "#fill" ) . on ( "click" , function ( ) {
fill = true ;
} ) ;
}
function dataURItoBlob ( dataURI ) {
var binary = atob ( dataURI . split ( ',' ) [ 1 ] ) ;