2015-12-30 10:59:47 +00:00
<!DOCTYPE html>
< html dir = "ltr" lang = "en-US" >
< head >
< title > miniPaint - online image editor< / title >
< meta name = "description" content = "miniPaint is free online image editor using HTML5. Edit, adjust your images, add effects online in your browser, without installing anything..." / >
< meta name = "keywords" content = "photo, image, picture, transparent, layers, free, edit, html5, canvas, javascript, online, photoshop, gimp, effects, sharpen, blur, magic wand tool, clone tool, rotate, resize, photoshop online, online tools, tilt shift, sprites, keypoints" / >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / >
< link rel = "stylesheet" type = "text/css" href = "styles/styles.css" / >
< link rel = "shortcut icon" href = "img/favicon.png" / >
< / head >
< body >
< div id = "drop_zone" >
< div style = "margin-top:70px;" >
< span style = "font-size: 40px;" > DROP< / span >
or < input type = "file" onchange = "upload_browse(this.files)" / >
< / div >
< / div >
< div id = "canvas_container" >
< div id = "menu_left" >
< div id = "menu_left_container" >
< noscript >
Select object tool, Select area tool, Magic Wand Tool,
Erase, Fill, Pick Color, Pencil, Draw line, Draw letters,
Draw rectangle, Draw circle, Brush, Blur tool, Sharpen tool,
Clone tool, Gradient
< / noscript >
< / div >
< div style = "clear:both;" > < / div >
< div id = "main_colour_container" >
< input type = "color" id = "main_colour" value = "" onchange = "TOOLS.set_color(this);" / >
< div style = "display:none;" id = "main_colour_alt" onclick = "TOOLS.toggle_color_select();" > < / div >
< / div >
< div style = "margin-top:10px;padding:3px 0px 3px 3px;" class = "block" id = "all_colors" > < / div >
< div class = "block" >
< input style = "width:98%;border:1px solid #393939;" type = "text" id = "color_hex" value = "#000000" onKeyUp = "TOOLS.set_color_manual(this)" / > < br / >
< div id = "main_colour_rgb" >
Red: < input id = "rgb_r" onKeyUp = "TOOLS.set_color_rgb(this, 'r')" type = "text" value = "255" / > < br / >
Green: < input id = "rgb_g" onKeyUp = "TOOLS.set_color_rgb(this, 'g')" type = "text" value = "255" / > < br / >
Blue: < input id = "rgb_b" onKeyUp = "TOOLS.set_color_rgb(this, 'b')" type = "text" value = "255" / > < br / >
Alpha: < input id = "rgb_a" onKeyUp = "TOOLS.set_color_rgb(this, 'a')" type = "text" value = "255" / >
< / div >
< / div >
< div class = "block" id = "info" > < / div >
< div class = "block" id = "action_attributes" > < / div >
< / div >
< div id = "layers_container" >
< div id = "preview" >
< canvas id = "canvas_preview" > < / canvas >
< div style = "margin-top:105px;padding-left:5px;" >
< input onclick = "DRAW.zoom(-1);" style = "width:30px;" class = "layer_add" type = "button" value = "-" / >
< input onclick = "DRAW.zoom(+1);" style = "width:30px;" class = "layer_add" type = "button" value = "+" / >
< b > Zoom: < / b > < span id = "zoom_nr" > 100< / span > %
< br / >
< input style = "width:95%;" id = "zoom_range" type = "range" value = "100" min = "50" max = "1000" step = "50" oninput = "DRAW.zoom(this.value);" / >
< / div >
< / div >
< div id = "layers_base" >
< b > Layers< / b > < a title = "Add new layer" class = "layer_add" onclick = "LAYER.layer_add();return false;" href = "#" > +< / a >
< a title = "Move down" onclick = "LAYER.move_layer('down');return false;" class = "layers_arrow" href = "#" > ↓ < / a >
< a title = "Move up" onclick = "LAYER.move_layer('up');return false;" class = "layers_arrow" href = "#" > ↑ < / a >
< a title = "Set opacity" onclick = "LAYER.set_alpha();return false;" class = "layers_arrow" href = "#" > A< / a >
< div style = "margin-top:5px;" id = "layers" > < / div >
< / div >
< / div >
< div id = "canvas_layers" >
< canvas id = "canvas_back" > < div class = "error" > Your browser doesn't support canvas.< / div > < / canvas >
< canvas id = "Background" > < / canvas >
< div id = "canvas_more" > < / div >
< canvas id = "canvas_front" > < / canvas >
< canvas style = "display:none;pointer-events:none;" id = "canvas_grid" > < / canvas >
< / div >
< div id = "resize-w" > < / div >
< div id = "resize-h" > < / div >
< div id = "resize-wh" > < / div >
< / div >
< div id = "main_menu" class = "ddsmoothmenu" >
< ul >
< li >
< a href = "#" > File< / a >
< ul >
< li > < a onclick = "MENU.do_menu(['file_new']);" href = "#" > New< / a > < / li >
< li > < a onclick = "MENU.do_menu(['file_open']);" href = "#" > Open...< / a > < / li >
< li > < a onclick = "MENU.do_menu(['file_save']);" href = "#" > Save as...< / a > < / li >
< li > < a onclick = "MENU.do_menu(['file_print']);" href = "#" > Print...< / a > < / li >
< / ul >
< / li >
< li >
< a href = "#" > Edit< / a >
< ul >
< li > < a onclick = "MENU.do_menu(['edit_undo']);" href = "#" > Undo< / a > < / li >
< li > < div class = "mid-line" > < / div > < / li >
< li > < a onclick = "MENU.do_menu(['edit_cut']);" href = "#" > Cut selection< / a > < / li >
< li > < a onclick = "MENU.do_menu(['edit_copy']);" href = "#" > Copy selection< / a > < / li >
< li > < a onclick = "MENU.do_menu(['edit_paste']);" href = "#" > Paste selection< / a > < / li >
< li > < div class = "mid-line" > < / div > < / li >
< li > < a onclick = "MENU.do_menu(['edit_select']);" href = "#" > Select All< / a > < / li >
< li > < a onclick = "MENU.do_menu(['edit_clear']);" href = "#" > Clear selection< / a > < / li >
< / ul >
< / li >
< li >
< a href = "#" > Image< / a >
< ul >
< li > < a onclick = "MENU.do_menu(['image_information']);" href = "#" > Information...< / a > < / li >
< li > < a onclick = "MENU.do_menu(['image_size']);" href = "#" > Size...< / a > < / li >
< li > < a onclick = "MENU.do_menu(['image_trim']);" href = "#" > Trim< / a >
< li > < a onclick = "MENU.do_menu(['image_crop']);" href = "#" > Crop Selection< / a >
< li > < div class = "mid-line" > < / div > < / li >
< li > < a onclick = "MENU.do_menu(['image_resize']);" href = "#" > Resize...< / a > < / li >
< li >
< a href = "#" > Rotate< / a >
< ul >
< li > < a onclick = "MENU.do_menu(['image_rotate_left']);" href = "#" > Left< / a > < / li >
< li > < a onclick = "MENU.do_menu(['image_rotate_right']);" href = "#" > Right< / a > < / li >
< li > < a onclick = "MENU.do_menu(['image_rotate']);" href = "#" > Rotation...< / a > < / li >
< / ul >
< / li >
< li >
< a href = "#" > Flip< / a >
< ul >
< li > < a onclick = "MENU.do_menu(['image_vflip']);" href = "#" > Vertical< / a > < / li >
< li > < a onclick = "MENU.do_menu(['image_hflip']);" href = "#" > Horizontal< / a > < / li >
< / ul >
< / li >
< li > < div class = "mid-line" > < / div > < / li >
< li > < a onclick = "MENU.do_menu(['image_colors']);" href = "#" > Color corrections...< / a > < / li >
< li > < a onclick = "MENU.do_menu(['image_auto_adjust']);" href = "#" > Auto adjust colors< / a > < / li >
< li > < a onclick = "MENU.do_menu(['image_GrayScale']);" href = "#" > GrayScale< / a >
< li > < a onclick = "MENU.do_menu(['image_decrease_colors']);" href = "#" > Decrease color depth...< / a > < / li >
< li > < a onclick = "MENU.do_menu(['image_negative']);" href = "#" > Negative< / a > < / li >
< li > < a onclick = "MENU.do_menu(['image_grid']);" href = "#" > Grid...< / a > < / li >
< li > < div class = "mid-line" > < / div > < / li >
< li > < a onclick = "MENU.do_menu(['image_histogram']);" href = "#" > Histogram...< / a > < / li >
< / ul >
< / li >
< li >
< a href = "#" > Layer< / a >
< ul >
< li > < a onclick = "MENU.do_menu(['layer_new']);" href = "#" > New< / a > < / li >
< li > < a onclick = "MENU.do_menu(['layer_dublicate']);" href = "#" > Dublicate< / a > < / li >
< li > < a onclick = "MENU.do_menu(['layer_show_hide']);" href = "#" > Show / Hide< / a > < / li >
< li > < a onclick = "MENU.do_menu(['layer_crop']);" href = "#" > Crop Selection< / a >
< li > < a onclick = "MENU.do_menu(['layer_delete']);" href = "#" > Delete< / a > < / li >
< li > < div class = "mid-line" > < / div > < / li >
< li >
< a href = "#" > Move< / a >
< ul >
< li > < a onclick = "MENU.do_menu(['layer_move_up']);" href = "#" > Up< / a > < / li >
< li > < a onclick = "MENU.do_menu(['layer_move_down']);" href = "#" > Down< / a > < / li >
< / ul >
< / li >
< li > < a onclick = "MENU.do_menu(['layer_opacity']);" href = "#" > Opacity...< / a > < / li >
< li > < div class = "mid-line" > < / div > < / li >
< li > < a onclick = "MENU.do_menu(['layer_trim']);" href = "#" > Trim< / a > < / li >
< li > < a onclick = "MENU.do_menu(['layer_resize']);" href = "#" > Resize...< / a > < / li >
< li > < a onclick = "MENU.do_menu(['layer_clear']);" href = "#" > Clear< / a > < / li >
< li > < div class = "mid-line" > < / div > < / li >
< li > < a onclick = "MENU.do_menu(['layer_differences']);" href = "#" > Differences Down< / a > < / li >
< li > < a onclick = "MENU.do_menu(['layer_merge_down']);" href = "#" > Merge Down...< / a > < / li >
< li > < a onclick = "MENU.do_menu(['layer_flatten']);" href = "#" > Flatten Image< / a > < / li >
< / ul >
< / li >
< li >
< a href = "#" > Effects< / a >
< ul id = "effects_list" >
< li > < a onclick = "MENU.do_menu(['effects_bw']);" href = "#" > Black and White...< / a >
< li >
< a href = "#" > Blur< / a >
< ul >
< li > < a onclick = "MENU.do_menu(['effects_BoxBlur']);" href = "#" > Blur-Box...< / a >
< li > < a onclick = "MENU.do_menu(['effects_GaussianBlur']);" href = "#" > Blur-Gaussian...< / a >
< li > < a onclick = "MENU.do_menu(['effects_StackBlur']);" href = "#" > Blur-Stack...< / a >
< li > < a onclick = "MENU.do_menu(['effects_zoomblur']);" href = "#" > Blur-Zoom...< / a >
< / ul >
< / li >
< li > < a onclick = "MENU.do_menu(['effects_bulge_pinch']);" href = "#" > Bulge/Pinch...< / a >
< li > < a onclick = "MENU.do_menu(['effects_colorize']);" href = "#" > Colorize...< / a > < / li >
< li > < a onclick = "MENU.do_menu(['effects_denoise']);" href = "#" > Denoise...< / a >
< li > < a onclick = "MENU.do_menu(['effects_Desaturate']);" href = "#" > Desaturate...< / a >
< li > < a onclick = "MENU.do_menu(['effects_Dither']);" href = "#" > Dither...< / a >
< li > < a onclick = "MENU.do_menu(['effects_dot_screen']);" href = "#" > Dot Screen...< / a >
< li > < a onclick = "MENU.do_menu(['effects_Edge']);" href = "#" > Edge...< / a >
< li > < a onclick = "MENU.do_menu(['effects_Emboss']);" href = "#" > Emboss...< / a >
< li > < a onclick = "MENU.do_menu(['effects_Enrich']);" href = "#" > Enrich...< / a >
< li > < a onclick = "MENU.do_menu(['effects_Gamma']);" href = "#" > Gamma...< / a >
< li > < a onclick = "MENU.do_menu(['effects_Grains']);" href = "#" > Grains...< / a >
< li > < a onclick = "MENU.do_menu(['effects_heatmap']);" href = "#" > Heatmap...< / a >
< li > < a onclick = "MENU.do_menu(['effects_HSLAdjustment']);" href = "#" > HSL Adjustment...< / a >
< li > < a onclick = "MENU.do_menu(['effects_jpg_vintage']);" href = "#" > JPG Compression...< / a > < / li >
< li > < a onclick = "MENU.do_menu(['effects_Mosaic']);" href = "#" > Mosaic...< / a >
< li > < a onclick = "MENU.do_menu(['effects_Oil']);" href = "#" > Oil...< / a >
< li > < a onclick = "MENU.do_menu(['effects_perspective']);" href = "#" > Perspective...< / a >
< li > < a onclick = "MENU.do_menu(['effects_Posterize']);" href = "#" > Posterize...< / a >
< li > < a onclick = "MENU.do_menu(['effects_Sepia']);" href = "#" > Sepia...< / a >
< li > < a onclick = "MENU.do_menu(['effects_Sharpen']);" href = "#" > Sharpen...< / a >
< li > < a onclick = "MENU.do_menu(['effects_Solarize']);" href = "#" > Solarize...< / a >
< li > < a onclick = "MENU.do_menu(['effects_tilt_shift']);" href = "#" > Tilt Shift...< / a >
< li > < a onclick = "MENU.do_menu(['effects_vignette']);" href = "#" > Vignette...< / a >
< li > < a onclick = "MENU.do_menu(['effects_vintage']);" href = "#" > Vintage...< / a >
< / ul >
< / li >
< li >
< a href = "#" > Tools< / a >
< ul >
< li > < a onclick = "MENU.do_menu(['tools_borders']);" href = "#" > Borders...< / a > < / li >
< li > < a onclick = "MENU.do_menu(['tools_sprites']);" href = "#" > Sprites...< / a > < / li >
< li > < a onclick = "MENU.do_menu(['tools_keypoints']);" href = "#" > Keypoints< / a > < / li >
< li > < a onclick = "MENU.do_menu(['tools_color2alpha']);" href = "#" > Color to Alpha...< / a > < / li >
< li > < a onclick = "MENU.do_menu(['tools_color_zoom']);" href = "#" > Color Zoom...< / a > < / li >
< li > < a onclick = "MENU.do_menu(['tools_restore_alpha']);" href = "#" > Restore alpha...< / a > < / li >
< / ul >
< / li >
< li >
< a href = "#" > Help< / a >
< ul >
< li > < a onclick = "MENU.do_menu(['help_shortcuts']);" href = "#" > Keyboard Shortcuts...< / a > < / li >
< li > < a onclick = "window.location='http://viliusle.github.io/miniPaint/';" href = "http://viliusle.github.io/miniPaint/" > Website< / a > < / li >
< li > < a onclick = "MENU.do_menu(['help_credits']);" href = "#" > Credits...< / a > < / li >
< li > < a onclick = "MENU.do_menu(['help_about']);" href = "#" > About...< / a > < / li >
< / ul >
< / li >
< / ul >
< / div >
< progress id = "uploadprogress" min = "0" max = "100" value = "0" > 0< / progress >
< div style = "display:none;" id = "tmp" > < / div >
< div id = "popup" > < / div >
< script src = "libs/jquery-1.8.3.js" > < / script >
< script src = "libs/menu.js" > < / script >
< script src = "libs/imagefilters.js" > < / script >
< script src = "libs/glfx.js" > < / script >
< script src = "libs/exif.js" > < / script >
< script src = "libs/exif-binaryajax.js" > < / script >
< script src = "libs/harmony.js" > < / script >
< script src = "libs/vintage.js" > < / script >
< script src = "libs/kdtree.js" > < / script >
< script src = "libs/sift.js" > < / script >
< script src = "js/helpers.js" > < / script >
< script src = "js/popup.js" > < / script >
< script src = "js/controlls.js" > < / script >
< script src = "js/tools.js" > < / script >
< script src = "js/draw.js" > < / script >
< script src = "js/layers.js" > < / script >
< script src = "js/menu_actions.js" > < / script >
< script src = "js/settings.js" > < / script >
< script src = "js/main.js" > < / script >
< / body >
< / html >
