mirror of
https://github.com/viliusle/miniPaint.git
synced 2026-02-06 13:51:51 +00:00
250 lines
12 KiB
HTML
250 lines
12 KiB
HTML
<!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" onpaste="TOOLS.set_color_manual(this)" 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="#">Key-points</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>
|