From 4e29204c691355c42b22ec211ad57e465bbadb03 Mon Sep 17 00:00:00 2001 From: viliuslevickas Date: Wed, 30 Dec 2015 13:03:51 +0200 Subject: [PATCH] merge --- index.html | 498 ++--- js/controlls.js | 35 +- js/menu_actions.js | 3747 +++++++++++++++++++------------------- js/settings.js | 180 +- js/tools.js | 4283 ++++++++++++++++++++++---------------------- 5 files changed, 4381 insertions(+), 4362 deletions(-) diff --git a/index.html b/index.html index 40ad8c1..8638002 100644 --- a/index.html +++ b/index.html @@ -1,249 +1,249 @@ - - - -miniPaint - online image editor - - - - - - - -
-
- DROP - or -
-
-
- -
-
- -
- - - Zoom: 100% -
- -
-
-
- Layers + - ↓ - ↑ - A -
-
-
-
-
Your browser doesn't support canvas.
 - -
- - -
-
-
-
-
- -0 - - - - - - - - - - - - - - - - - - - - - - - - - + + + +miniPaint - online image editor + + + + + + + +
+
+ DROP + or +
+
+
+ +
+
+ +
+ + + Zoom: 100% +
+ +
+
+
+ Layers + + ↓ + ↑ + A +
+
+
+
+
Your browser doesn't support canvas.
 + +
+ + +
+
+
+
+
+ +0 + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/js/controlls.js b/js/controlls.js index cf07ec2..6a86200 100644 --- a/js/controlls.js +++ b/js/controlls.js @@ -365,10 +365,12 @@ function CONTROLLS_CLASS(){ } } //check tools functions - for (i in TOOLS){ - if(i == ACTION){ - TOOLS[i]('move', CON.mouse, event); - break; + if(CON.isDrag === false){ + for (i in TOOLS){ + if(i == ACTION){ + TOOLS[i]('move', CON.mouse, event); + break; + } } } @@ -598,14 +600,14 @@ function CLIPBOARD_CLASS(canvas_id){ img = pasteCatcher.firstElementChild.src; _self.paste_createImage(pasteCatcher.firstElementChild.src); } - /*else{ + else{ //html /*setTimeout(function(){ if(reading_dom == true) return false; _self.paste_createText(pasteCatcher.innerHTML, false); reading_dom = true; - }, 10); - }*/ + }, 10);*/ + } } /*else if(pasteCatcher.children.length == 0){ //text @@ -626,6 +628,9 @@ function CLIPBOARD_CLASS(canvas_id){ paste_mode = ''; pasteCatcher.innerHTML = ''; var plain_text_used = false; + + + if(e.clipboardData){ var items = e.clipboardData.items; if (items){ @@ -639,12 +644,12 @@ function CLIPBOARD_CLASS(canvas_id){ var source = URLObj.createObjectURL(blob); this.paste_createImage(source); } - /*else if(items[i].type.indexOf("text") !== -1){ + else if(items[i].type.indexOf("text") !== -1){ //text or html /*if(plain_text_used == false) this.paste_createText(e.clipboardData.getData('text/plain')); - plain_text_used = true; - }*/ + plain_text_used = true;*/ + } } e.preventDefault(); } @@ -656,14 +661,20 @@ function CLIPBOARD_CLASS(canvas_id){ }; //on keyboard press this.on_keyboard_action = function(event){ + if(POP.active == true) return true; k = event.keyCode; //ctrl - if(k==17 || event.metaKey || event.ctrlKey){ + if(k==17 || event.metaKey || event.ctrlKey){ if(ctrl_pressed == false) ctrl_pressed = true; } - //c + //v if(k==86){ + if(document.activeElement != undefined && document.activeElement.type == 'text'){ + //let user paste into some input + return false; + } + if(ctrl_pressed == true && !window.Clipboard) pasteCatcher.focus(); } diff --git a/js/menu_actions.js b/js/menu_actions.js index fd99b74..31417ec 100644 --- a/js/menu_actions.js +++ b/js/menu_actions.js @@ -1,1873 +1,1874 @@ -var MENU = new MENU_CLASS(); - -function MENU_CLASS(){ - this.last_menu = ''; - var PASTE_DATA = false; - var fx_filter = fx.canvas(); - - this.do_menu = function(name){ - $('#main_menu').find('.selected').click(); //close menu - MENU.last_menu = name; - - //exec - MENU[name](); - - DRAW.zoom(); - }; - - //===== File =========================================================== - - //new - this.file_new = function(){ - POP.add({name: "width", title: "Width:", value: WIDTH }); - POP.add({name: "height", title: "Height:", value: HEIGHT }); - POP.add({name: "transparency", title: "Transparent:", values: ['Yes', 'No']}); - POP.show('New file...', function(response){ - var width = parseInt(response.width); - var height = parseInt(response.height); - var transparency = response.transparency; - - if(response.transparency == 'Yes') - MAIN.TRANSPARENCY = true; - else - MAIN.TRANSPARENCY = false; - - ZOOM = 100; - WIDTH = width; - HEIGHT = height; - RATIO = WIDTH/HEIGHT; - MAIN.init(); - }); - }; - //open - this.file_open = function(){ - MENU.open(); - }; - //save - this.file_save = function(){ - MENU.save_dialog(); - }; - //print - this.file_print = function(){ - window.print(); - }; - - //===== Edit =========================================================== - - //undo - this.edit_undo = function(){ - MAIN.undo(); - }; - //cut - this.edit_cut = function(){ - MAIN.save_state(); - if(TOOLS.select_data != false){ - this.copy_to_clipboard(); - canvas_active().clearRect(TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h); - TOOLS.select_data = false; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - } - }; - //copy - this.edit_copy = function(){ - if(TOOLS.select_data != false) - this.copy_to_clipboard(); - }; - //paste - this.edit_paste = function(){ - MAIN.save_state(); - this.paste('menu'); - }; - //select all - this.edit_select = function(){ - TOOLS.select_data = { - x: 0, - y: 0, - w: WIDTH, - h: HEIGHT - }; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - TOOLS.draw_selected_area(); - }; - //clear selection - this.edit_clear = function(){ - TOOLS.select_data = false; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - }; - - //===== Image ========================================================== - - //information - this.image_information = function(){ - var colors = TOOLS.unique_colors_count(canvas_active(true)); - colors = HELPER.number_format(colors, 0); - - POP.add({title: "Width:", value: WIDTH }); - POP.add({title: "Height:", value: HEIGHT }); - POP.add({title: "Unique colors:", value: colors }); - //exif - for(var i in TOOLS.EXIF) - POP.add({title: i+":", value: TOOLS.EXIF[i] }); - POP.show('Information', ''); - }; - //size - this.image_size = function(){ - POP.add({name: "width", title: "Width:", value: WIDTH }); - POP.add({name: "height", title: "Height:", value: HEIGHT }); - POP.show('Attributes', this.resize_custom); - }; - //trim - this.image_trim = function(){ - MAIN.save_state(); - DRAW.trim(); - }; - //crop - this.image_crop = function(){ - MAIN.save_state(); - if(TOOLS.select_data == false){ - POP.add({html: 'Select area first' }); - POP.show('Error', ''); - } - else{ - for(var i in LAYERS){ - var layer = document.getElementById(LAYERS[i].name).getContext("2d"); - - var tmp = layer.getImageData(TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h); - layer.clearRect(0, 0, WIDTH, HEIGHT); - layer.putImageData(tmp, 0, 0); - } - - //resize - MAIN.save_state(); - WIDTH = TOOLS.select_data.w; - HEIGHT = TOOLS.select_data.h; - RATIO = WIDTH/HEIGHT; - LAYER.set_canvas_size(); - - TOOLS.select_data = false; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - } - }; - //resize - this.image_resize = function(){ - MENU.resize_box(); - }; - //rotate left - this.image_rotate_left = function(){ - MAIN.save_state(); - MENU.rotate_resize_doc(270, WIDTH, HEIGHT); - MENU.rotate_layer({angle: 270}, canvas_active(), WIDTH, HEIGHT); - }; - //rotate right - this.image_rotate_right = function(){ - MAIN.save_state(); - MENU.rotate_resize_doc(90, WIDTH, HEIGHT); - MENU.rotate_layer({angle: 90}, canvas_active(), WIDTH, HEIGHT); - }; - //rotate - this.image_rotate = function(){ - POP.add({name: "angle", title: "Enter angle (0-360):", value: 0, range: [0, 360] }); - POP.show('Rotate', function(response){ - MAIN.save_state(); - MENU.rotate_resize_doc(response.angle, WIDTH, HEIGHT); - MENU.rotate_layer(response, canvas_active(), WIDTH, HEIGHT); - }, - function(response, canvas_preview, w, h){ - MENU.rotate_layer(response, canvas_preview, w, h); - }); - }; - //vertical flip - this.image_vflip = function(){ - MAIN.save_state(); - var tempCanvas = document.createElement("canvas"); - var tempCtx = tempCanvas.getContext("2d"); - tempCanvas.width = WIDTH; - tempCanvas.height = HEIGHT; - tempCtx.drawImage(canvas_active(true), 0, 0, WIDTH, HEIGHT); - //flip - canvas_active().clearRect(0, 0, WIDTH, HEIGHT); - canvas_active().save(); - canvas_active().scale(-1, 1); - canvas_active().drawImage(tempCanvas, -WIDTH, 0); - canvas_active().restore(); - }; - //horizontal flip - this.image_hflip = function(){ - MAIN.save_state(); - var tempCanvas = document.createElement("canvas"); - var tempCtx = tempCanvas.getContext("2d"); - tempCanvas.width = WIDTH; - tempCanvas.height = HEIGHT; - tempCtx.drawImage(canvas_active(true), 0, 0, WIDTH, HEIGHT); - //flip - canvas_active().clearRect(0, 0, WIDTH, HEIGHT); - canvas_active().save(); - canvas_active().scale(1, -1); - canvas_active().drawImage(tempCanvas, 0, -HEIGHT); - canvas_active().restore(); - }; - //color corrections - this.image_colors = function(){ - POP.add({name: "param1", title: "Brightness:", value: "0", range: [-100, 100] }); - POP.add({name: "param2", title: "Contrast:", value: "0", range: [-100, 100] }); - POP.add({name: "param_red", title: "Red offset:", value: "0", range: [-255, 255] }); - POP.add({name: "param_green", title: "Green offset:", value: "0", range: [-255, 255] }); - POP.add({name: "param_blue", title: "Blue offset:", value: "0", range: [-255, 255] }); - POP.add({name: "param_h", title: "Hue:", value: "0", range: [-180, 180] }); - POP.add({name: "param_s", title: "Saturation:", value: "0", range: [-100, 100] }); - POP.add({name: "param_l", title: "Luminance:", value: "0", range: [-100, 100] }); - - POP.show('Brightness Contrast', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - var param_red = parseInt(user_response.param_red); - var param_green = parseInt(user_response.param_green); - var param_blue = parseInt(user_response.param_blue); - var param_h = parseInt(user_response.param_h); - var param_s = parseInt(user_response.param_s); - var param_l = parseInt(user_response.param_l); - - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - //Brightness/Contrast - var filtered = ImageFilters.BrightnessContrastPhotoshop(imageData, param1, param2); - //RGB corrections - var filtered = ImageFilters.ColorTransformFilter(filtered, 1, 1, 1, 1, param_red, param_green, param_blue, 1); - //hue/saturation/luminance - var filtered = ImageFilters.HSLAdjustment(filtered, param_h, param_s, param_l); - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - var param_red = parseInt(user_response.param_red); - var param_green = parseInt(user_response.param_green); - var param_blue = parseInt(user_response.param_blue); - var param_h = parseInt(user_response.param_h); - var param_s = parseInt(user_response.param_s); - var param_l = parseInt(user_response.param_l); - - var imageData = canvas_preview.getImageData(0, 0, w, h); - //Brightness/Contrast - var filtered = ImageFilters.BrightnessContrastPhotoshop(imageData, param1, param2); //add effect - //RGB corrections - var filtered = ImageFilters.ColorTransformFilter(filtered, 1, 1, 1, 1, param_red, param_green, param_blue, 1); - //hue/saturation/luminance - var filtered = ImageFilters.HSLAdjustment(filtered, param_h, param_s, param_l); - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - //auto adjust colors - this.image_auto_adjust = function(){ - MAIN.save_state(); - DRAW.auto_adjust(canvas_active(), WIDTH, HEIGHT); - }; - //convert to grayscale - this.image_GrayScale = function(){ - MAIN.save_state(); - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.GrayScale(imageData); //add effect - canvas_active().putImageData(filtered, 0, 0); - }; - //enchance colors - this.image_decrease_colors = function(){ - POP.add({name: "param1", title: "Colors:", value: "10", range: [2, 100] }); - POP.add({name: "param2", title: "Dithering:", values: ["No", "Yes"], }); - POP.add({name: "param3", title: "Greyscale:", values: ["No", "Yes"], }); - POP.show('Decrease colors', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - if(user_response.param2 == 'Yes') param2 = true; else param2 = false; - if(user_response.param3 == 'Yes') param3 = true; else param3 = false; - - DRAW.decrease_colors(canvas_active(true), canvas_active(true), WIDTH, HEIGHT, param1, param2, param3); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - if(user_response.param2 == 'Yes') param2 = true; else param2 = false; - if(user_response.param3 == 'Yes') param3 = true; else param3 = false; - - DRAW.decrease_colors(canvas_active(true), document.getElementById("pop_post"), w, h, param1, param2, param3); - }); - }; - //negative - this.image_negative = function(){ - MAIN.save_state(); - if(TOOLS.select_data == false) - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - else - var imageData = canvas_active().getImageData(TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h); - var pixels = imageData.data; - for (var i = 0; i < pixels.length; i += 4){ - pixels[i] = 255 - pixels[i]; // red - pixels[i+1] = 255 - pixels[i+1]; // green - pixels[i+2] = 255 - pixels[i+2]; // blue - } - //save - if(TOOLS.select_data == false) - canvas_active().putImageData(imageData, 0, 0); - else - canvas_active().putImageData(imageData, TOOLS.select_data.x, TOOLS.select_data.y); - }; - //grid - this.image_grid = function(){ - POP.add({name: "visible", title: "Visible:", value: "Yes", values: ["Yes", "No"] }); - POP.add({name: "gap_x", title: "Horizontal gap:", value: DRAW.grid_size[0] }); - POP.add({name: "gap_y", title: "Vertical gap:", value: DRAW.grid_size[1] }); - POP.show('Grid', function(response){ - if(response.visible == "Yes"){ - MAIN.grid = true; - gap_x = response.gap_x; - gap_y = response.gap_y; - DRAW.draw_grid(gap_x, gap_y); - } - else{ - MAIN.grid = false; - DRAW.draw_grid(); - } - }); - }; - //histogram - this.image_histogram = function(){ - TOOLS.histogram(); - }; - - //===== Layer ========================================================== - - //new layer - this.layer_new = function(){ - MENU.add_layer(); - }; - //dublicate - this.layer_dublicate = function(){ - MAIN.save_state(); - if(TOOLS.select_data != false){ - //selection - this.copy_to_clipboard(); - TOOLS.select_data = false; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - var tmp = LAYER.layer_active; - this.paste('menu'); - LAYER.layer_active = tmp; - LAYER.layer_renew(); - } - else{ - //copy all layer - tmp_data = document.createElement("canvas"); - tmp_data.width = WIDTH; - tmp_data.height = HEIGHT; - tmp_data.getContext("2d").drawImage(canvas_active(true), 0, 0); - - //create - var new_name = 'Layer #'+(LAYERS.length+1); - LAYER.create_canvas(new_name); - LAYERS.push({name: new_name, visible: true}); - LAYER.layer_active = LAYERS.length-1; - canvas_active().drawImage(tmp_data, 0, 0); - LAYER.layer_renew(); - } - }; - //show / hide - this.layer_show_hide = function(){ - LAYER.layer_visibility(LAYER.layer_active); - }; - //crop - this.layer_crop = function(){ - MAIN.save_state(); - if(TOOLS.select_data == false){ - POP.add({html: 'Select area first'}); - POP.show('Error', ''); - } - else{ - var layer = LAYER.canvas_active(); - - var tmp = layer.getImageData(TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h); - layer.clearRect(0, 0, WIDTH, HEIGHT); - layer.putImageData(tmp, 0, 0); - - TOOLS.select_data = false; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - } - }; - //delete - this.layer_delete = function(){ - MAIN.save_state(); - LAYER.layer_remove(LAYER.layer_active); - }; - //move up - this.layer_move_up = function(){ - MAIN.save_state(); - LAYER.move_layer('up'); - }; - //move down - this.layer_move_down = function(){ - MAIN.save_state(); - LAYER.move_layer('down'); - }; - //opacity - this.layer_opacity = function(){ - LAYER.set_alpha(); - }; - //trim - this.layer_trim = function(){ - MAIN.save_state(); - DRAW.trim(LAYERS[LAYER.layer_active].name, true); - }; - //resize - this.layer_resize = function(){ - MENU.resize_box(); - }; - //clear - this.layer_clear = function(){ - MAIN.save_state(); - canvas_active().clearRect(0, 0, WIDTH, HEIGHT); - }; - //show differences - this.layer_differences = function(){ - if(parseInt(LAYER.layer_active) + 1 >= LAYERS.length){ - POP.add({html: 'This can not be last layer' }); - POP.show('Error', ''); - return false; - } - - POP.add({name: "param1", title: "Sensitivity:", value: "0", range: [0, 255] }); - POP.show('Differences', function(response){ - var param1 = parseInt(response.param1); - TOOLS.calc_differences(param1); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - TOOLS.calc_differences(param1, canvas_preview, w, h); - }); - }; - //merge - this.layer_merge_down = function(){ - var compositions = ["source-over", "source-in", "source-out", "source-atop", - "destination-over", "destination-in", "destination-out", "destination-atop", - "lighter", "darker", "copy", "xor"]; - - var blend_modes = ["normal", "multiply", "screen", "overlay", "darken", "lighten", - "color-dodge", "color-burn", "hard-light", "soft-light", "difference", - "exclusion", "hue", "saturation", "color", "luminosity"]; - - if(parseInt(LAYER.layer_active) + 1 >= LAYERS.length){ - POP.add({html: 'This can not be last layer.' }); - POP.show('Error', ''); - return false; - } - POP.add({name: "param1", title: "Composition:", values: compositions }); - POP.add({name: "param2", title: "Blend:", values: blend_modes }); - POP.add({name: "param3", title: "Mode:", values: ["Composite", "Blend"] }); - POP.show('Merge', function(response){ - var param1 = response.param1; - var param2 = response.param2; - var param3 = response.param3; - - MAIN.save_state(); - //copy - LAYER.layer_active++; - var tmp_data = document.createElement("canvas"); - tmp_data.width = WIDTH; - tmp_data.height = HEIGHT; - tmp_data.getContext("2d").drawImage(LAYER.canvas_active(true), 0, 0); - - //paste - LAYER.layer_active--; - LAYER.canvas_active().save(); - if(param3 == "Composite") - LAYER.canvas_active().globalCompositeOperation = param1; - else - LAYER.canvas_active().globalCompositeOperation = param2; - LAYER.canvas_active().drawImage(tmp_data, 0, 0); - LAYER.canvas_active().restore(); - - //remove next layer - LAYER.layer_remove(LAYER.layer_active+1); - LAYER.layer_renew(); - }, - function(response, canvas_preview, w, h){ - var param1 = response.param1; - var param2 = response.param2; - var param3 = response.param3; - - //copy - LAYER.layer_active++; - var tmp_data = document.createElement("canvas"); - tmp_data.width = w; - tmp_data.height = h; - tmp_data.getContext("2d").drawImage(LAYER.canvas_active(true), 0, 0, WIDTH, HEIGHT, 0, 0, w, h); - - //paste - LAYER.layer_active--; - canvas_preview.save(); - if(param3 == "Composite") - canvas_preview.globalCompositeOperation = param1; - else - canvas_preview.globalCompositeOperation = param2; - canvas_preview.drawImage(tmp_data, 0, 0); - canvas_preview.restore(); - }); - }; - //flatten all - this.layer_flatten = function(){ - MAIN.save_state(); - if(LAYERS.length == 1) return false; - tmp_data = document.createElement("canvas"); - tmp_data.width = WIDTH; - tmp_data.height = HEIGHT; - for(var i=1; i < LAYERS.length; i++){ - //copy - LAYER.layer_active = i; - tmp_data.getContext("2d").clearRect(0, 0, WIDTH, HEIGHT); - tmp_data.getContext("2d").drawImage(canvas_active(true), 0, 0); - - //paste - LAYER.layer_active = 0; - canvas_active().drawImage(tmp_data, 0, 0); - } - for(var i=LAYERS.length - 1; i > 0; i--){ - //delete layer - LAYER.layer_active = i; - LAYER.layer_remove(LAYER.layer_active); - } - LAYER.layer_renew(); - }; - - //===== Tools ========================================================== - - //sprites - this.tools_sprites = function(){ - POP.add({name: "param1", title: "Offset:", value: "50", values: ["0", "10", "50", "100"] }); - POP.show('Sprites', function(response){ - MAIN.save_state(); - var param1 = parseInt(response.param1); - TOOLS.generate_sprites(param1); - }); - }; - //show keypoints - this.tools_keypoints = function(){ - SIFT.generate_keypoints(canvas_active(true), true); - }; - //create panorama - this.tools_panorama = function(){ - SIFT.panorama(); - }; - //extract alpha channel - this.tools_color2alpha = function(){ - POP.add({name: "param1", title: "Color:", value: COLOUR, type: 'color' }); - POP.show('Color to alpha', function(user_response){ - MAIN.save_state(); - var param1 = user_response.param1; - TOOLS.convert_color_to_alpha(canvas_active(), WIDTH, HEIGHT, param1); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = user_response.param1; - TOOLS.convert_color_to_alpha(canvas_preview, w, h, param1); - }); - }; - //expands colors - this.tools_color_zoom = function(){ - POP.add({name: "param1", title: "Zoom:", value: "2", range: [2, 20], }); - POP.add({name: "param2", title: "Center:", value: "128", range: [0, 255] }); - POP.show('Color Zoom', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - - TOOLS.color_zoom(canvas_active(), WIDTH, HEIGHT, param1, param2); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - - TOOLS.color_zoom(canvas_preview, w, h, param1, param2); - }); - }; - //recover alpha channel values - this.tools_restore_alpha = function(){ - POP.add({name: "param", title: "Level:", value: "128", range: [0, 255] }); - POP.show('Recover alpha', function(user_response){ - MAIN.save_state(); - var param = parseInt(user_response.param); - - TOOLS.recover_alpha(canvas_active(), WIDTH, HEIGHT, param); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param = parseInt(user_response.param); - - TOOLS.recover_alpha(canvas_preview, w, h, param); - }); - }; - //adds borders - this.tools_borders = function(){ - POP.add({name: "param1", title: "Color:", value: COLOUR, type: 'color' }); - POP.add({name: "param2", title: "Size:", value: "5", range: [1, 100] }); - POP.show('Borders', function(user_response){ - MAIN.save_state(); - var param1 = user_response.param1; - var param2 = parseInt(user_response.param2); - - MENU.add_layer(); - TOOLS.add_borders(canvas_active(), WIDTH, HEIGHT, param1, param2); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = user_response.param1; - var param2 = parseInt(user_response.param2); - - TOOLS.add_borders(canvas_preview, w, h, param1, param2); - }); - }; - - //===== Effects ======================================================== - - this.effects_bw = function(){ - var default_level = TOOLS.thresholding('otsu', canvas_active(), WIDTH, HEIGHT, true); - POP.add({name: "param1", title: "Level:", value: default_level, range: [0, 255] }); - POP.add({name: "param2", title: "Dithering:", values: ['No', 'Yes'], onchange: "MENU.effects_bw_onchange()" }); - POP.effects = true; - POP.show('Black and White', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - var param2 = false; - if(user_response.param2 == 'Yes') - param2 = true; - - DRAW.effect_bw(canvas_active(), WIDTH, HEIGHT, param1, param2); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - var param2 = false; - if(user_response.param2 == 'Yes') - param2 = true; - - DRAW.effect_bw(canvas_preview, w, h, param1, param2); - }); - }; - this.effects_bw_onchange = function(){ - var levels = document.getElementById("pop_data_param1"); - var dithering_no = document.getElementById("pop_data_param2_poptmp0"); - var dithering_yes = document.getElementById("pop_data_param2_poptmp1"); - - if(dithering_no.checked == true) levels.disabled = false; - else if(dithering_yes.checked == true) levels.disabled = true; - - POP.view(); - }; - this.effects_BoxBlur = function(){ - POP.add({name: "param1", title: "H Radius:", value: "3", range: [1, 20] }); - POP.add({name: "param2", title: "V Radius:", value: "3", range: [1, 20] }); - POP.add({name: "param3", title: "Quality:", value: "2", range: [1, 10] }); - POP.effects = true; - POP.show('Blur-Box', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - var param3 = parseInt(user_response.param3); - - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.BoxBlur(imageData, param1, param2, param3); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - var param3 = parseInt(user_response.param3); - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.BoxBlur(imageData, param1, param2, param3); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_GaussianBlur = function(){ - POP.add({name: "param1", title: "Strength:", value: "2", range: [1, 4], step: 0.1 }); - POP.effects = true; - POP.show('Blur-Gaussian', function(user_response){ - MAIN.save_state(); - var param1 = parseFloat(user_response.param1); - - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.GaussianBlur(imageData, param1); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseFloat(user_response.param1); - - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.GaussianBlur(imageData, param1); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_StackBlur = function(){ - POP.add({name: "param1", title: "Radius:", value: "6", range: [1, 40] }); - POP.effects = true; - POP.show('Blur-Stack', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.StackBlur(imageData, param1); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.StackBlur(imageData, param1); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_zoomblur = function(){ - POP.add({name: "param1", title: "Strength:", value: "0.3", range: [0, 1], step: 0.01 }); - POP.add({name: "param2", title: "Center x:", value: round(WIDTH/2), range: [0, WIDTH] }); - POP.add({name: "param3", title: "Center y:", value: round(HEIGHT/2), range: [0, HEIGHT] }); - POP.effects = true; - POP.show('Blur-Zoom', function(user_response){ - MAIN.save_state(); - var param1 = parseFloat(user_response.param1); - var param2 = parseInt(user_response.param2); - var param3 = parseInt(user_response.param3); - - var texture = fx_filter.texture(canvas_active(true)); - fx_filter.draw(texture).zoomBlur(param2, param3, param1).update(); //effect - canvas_active().clearRect(0, 0, WIDTH, HEIGHT); - canvas_active().drawImage(fx_filter, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseFloat(user_response.param1); - var param2 = parseInt(user_response.param2); - var param3 = parseInt(user_response.param3); - - //recalc param by size - param2 = param2 / WIDTH * w; - param3 = param3 / HEIGHT * h; - - var texture = fx_filter.texture(canvas_preview.getImageData(0, 0, w, h)); - fx_filter.draw(texture).zoomBlur(param2, param3, param1).update(); //effect - canvas_preview.drawImage(fx_filter, 0, 0); - - //draw circle - canvas_preview.beginPath(); - canvas_preview.strokeStyle = "#ff0000"; - canvas_preview.lineWidth = 1; - canvas_preview.beginPath(); - canvas_preview.arc(param2, param3, 5, 0,Math.PI*2,true); - canvas_preview.stroke(); - }); - }; - this.effects_bulge_pinch = function(){ - POP.add({name: "param1", title: "Strength:", value: 1, range: [-1, 1], step: 0.1 }); - var default_value = Math.min(WIDTH, HEIGHT); - default_value = round(default_value/2); - POP.add({name: "param2", title: "Radius:", value: default_value, range: [0, 600] }); - POP.effects = true; - POP.show('Bulge/Pinch', function(user_response){ - MAIN.save_state(); - var param1 = parseFloat(user_response.param1); - var param2 = parseInt(user_response.param2); - - var texture = fx_filter.texture(canvas_active(true)); - fx_filter.draw(texture).bulgePinch(round(WIDTH/2), round(HEIGHT/2), param2, param1).update(); //effect - canvas_active().clearRect(0, 0, WIDTH, HEIGHT); - canvas_active().drawImage(fx_filter, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseFloat(user_response.param1); - var param2 = parseInt(user_response.param2); - - //recalc param by size - param2 = param2 / Math.min(WIDTH, HEIGHT) * Math.min(w, h); - - var texture = fx_filter.texture(canvas_preview.getImageData(0, 0, w, h)); - fx_filter.draw(texture).bulgePinch(round(w/2), round(h/2), param2, param1).update(); //effect - canvas_preview.drawImage(fx_filter, 0, 0); - }); - }; - this.effects_colorize = function(){ - var colorize_data; - - POP.add({name: "param1", title: "Power:", value: "3", range: [1, 10] }); - POP.add({name: "param2", title: "Limit:", value: "30", range: [10, 200] }); - POP.add({name: "param3", title: "Dithering:", values: ["Yes", "No"] }); - POP.preview_in_main = true; - POP.effects = true; - POP.show('Auto colorize', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - if(user_response.param3 == 'Yes') param3 = true; else param3 = false; - - DRAW.colorize(canvas_active(), WIDTH, HEIGHT, param1, param2, param3, colorize_data); - DRAW.zoom(); - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - }, - function(user_response){ - POP.preview_in_main = true; - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - if(user_response.param3 == 'Yes') - param3 = true; - else - param3 = false; - - colorize_data = DRAW.colorize(false, WIDTH, HEIGHT, param1, param2, param3, true); - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.drawImage(canvas_active(true), 0, 0); - DRAW.colorize(canvas_front, WIDTH, HEIGHT, param1, param2, param3, colorize_data); - }); - }; - this.effects_denoise = function(){ - POP.add({name: "param1", title: "Exponent:", value: "20", range: [0, 50] }); - POP.effects = true; - POP.show('Denoise', function(user_response){ - MAIN.save_state(); - var param1 = parseFloat(user_response.param1); - - var texture = fx_filter.texture(canvas_active(true)); - fx_filter.draw(texture).denoise(param1).update(); //effect - canvas_active().clearRect(0, 0, WIDTH, HEIGHT); - canvas_active().drawImage(fx_filter, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseFloat(user_response.param1); - - var texture = fx_filter.texture(canvas_preview.getImageData(0, 0, w, h)); - fx_filter.draw(texture).denoise(param1).update(); //effect - canvas_preview.drawImage(fx_filter, 0, 0); - }); - }; - this.effects_Desaturate = function(){ - POP.effects = true; - POP.show('Desaturate', function(user_response){ - MAIN.save_state(); - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Desaturate(imageData); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.Desaturate(imageData); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_Dither = function(){ - POP.add({name: "param1", title: "Levels:", value: "8", range: [2, 32] }); - POP.effects = true; - POP.show('Dither', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Dither(imageData, param1); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.Dither(imageData, param1); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_dot_screen = function(){ - POP.add({name: "param2", title: "Size:", value: "3", range: [1, 20] }); - POP.effects = true; - POP.show('Dot Screen', function(user_response){ - MAIN.save_state(); - var param2 = parseInt(user_response.param2); - - var texture = fx_filter.texture(canvas_active(true)); - fx_filter.draw(texture).dotScreen(round(WIDTH/2), round(HEIGHT/2), 0, param2).update(); //effect - canvas_active().clearRect(0, 0, WIDTH, HEIGHT); - canvas_active().drawImage(fx_filter, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param2 = parseInt(user_response.param2); - - var texture = fx_filter.texture(canvas_preview.getImageData(0, 0, w, h)); - fx_filter.draw(texture).dotScreen(round(w/2), round(h/2), 0, param2).update(); //effect - canvas_preview.drawImage(fx_filter, 0, 0); - }); - }; - this.effects_Edge = function(){ - POP.effects = true; - POP.show('Edge', function(user_response){ - MAIN.save_state(); - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Edge(imageData); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.Edge(imageData); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_Emboss = function(){ - POP.effects = true; - POP.show('Emboss', function(user_response){ - MAIN.save_state(); - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Emboss(imageData); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.Emboss(imageData); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_Enrich = function(){ - POP.effects = true; - POP.show('Enrich', function(user_response){ - MAIN.save_state(); - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Enrich(imageData); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.Enrich(imageData); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_Gamma = function(){ - POP.add({name: "param1", title: "Gamma:", value: "1", range: [0, 3], step: 0.1 }); - POP.effects = true; - POP.show('Gamma', function(user_response){ - MAIN.save_state(); - var param1 = parseFloat(user_response.param1); - - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Gamma(imageData, param1); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseFloat(user_response.param1); - - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.Gamma(imageData, param1); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_Grains = function(){ - POP.effects = true; - POP.add({name: "param1", title: "Level:", value: "30", range: [0, 50] }); - POP.show('Grains', function(user_response){ - var param1 = parseInt(user_response.param1); - MAIN.save_state(); - TOOLS.grains_effect(canvas_active(), WIDTH, HEIGHT, param1); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - TOOLS.grains_effect(canvas_preview, w, h, param1); - }); - }; - this.effects_heatmap = function(){ - POP.effects = true; - POP.show('Heatmap', function(user_response){ - MAIN.save_state(); - TOOLS.heatmap_effect(canvas_active(), WIDTH, HEIGHT); - }, - function(user_response, canvas_preview, w, h){ - TOOLS.heatmap_effect(canvas_preview, w, h); - }); - }; - this.effects_HSLAdjustment = function(){ - POP.add({name: "param1", title: "Hue:", value: "0", range: [-180, 180] }); - POP.add({name: "param2", title: "Saturation:", value: "0", range: [-100, 100] }); - POP.add({name: "param3", title: "Luminance:", value: "0", range: [-100, 100] }); - POP.effects = true; - POP.show('HSL Adjustment', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - var param3 = parseInt(user_response.param3); - - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.HSLAdjustment(imageData, param1, param2, param3); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - var param3 = parseInt(user_response.param3); - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.HSLAdjustment(imageData, param1, param2, param3); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - //ages photo saving it to jpg many times - this.effects_jpg_vintage = function(){ - POP.add({name: "param1", title: "Quality:", value: 80, range: [1, 100] }); - POP.effects = true; - POP.show('JPG Compression', function(user_response){ - MAIN.save_state(); - var quality = parseInt(user_response.param1); - if(quality>100 || quality < 1 || isNaN(quality)==true) - quality = 80; - quality = quality/100; - var data = canvas_active(true).toDataURL('image/jpeg', quality); - var img = new Image; - img.onload = function(){ - canvas_active().clearRect(0, 0, WIDTH, HEIGHT); - canvas_active().drawImage(img, 0, 0); - }; - img.src = data; - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var quality = parseInt(user_response.param1); - if(quality>100 || quality < 1 || isNaN(quality)==true) - quality = 80; - quality = quality/100; - var canvas_container = document.getElementById("pop_post"); - var data = canvas_container.toDataURL('image/jpeg', quality); - var img = new Image; - img.onload = function(){ - canvas_preview.clearRect(0, 0, w, h); - canvas_preview.drawImage(img, 0, 0); - }; - img.src = data; - }); - }; - this.effects_Mosaic = function(){ - POP.add({name: "param1", title: "Size:", value: "10", range: [1, 100] }); - POP.effects = true; - POP.show('Mosaic', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Mosaic(imageData, param1); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.Mosaic(imageData, param1); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_Oil = function(){ - POP.add({name: "param1", title: "Range:", value: "2", range: [1, 5] }); - POP.add({name: "param2", title: "Levels:", value: "32", range: [1, 256] }); - POP.effects = true; - POP.show('Oil', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Oil(imageData, param1, param2); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.Oil(imageData, param1, param2); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_perspective = function(){ - POP.add({name: "param1", title: "X1:", value: WIDTH/4, range: [0, WIDTH] }); - POP.add({name: "param2", title: "Y1:", value: HEIGHT/4, range: [0, HEIGHT] }); - POP.add({name: "param3", title: "X2:", value: WIDTH*3/4, range: [0, WIDTH] }); - POP.add({name: "param4", title: "Y2:", value: HEIGHT/4, range: [0, HEIGHT] }); - POP.add({name: "param5", title: "X3:", value: WIDTH*3/4, range: [0, WIDTH] }); - POP.add({name: "param6", title: "Y3:", value: HEIGHT*3/4, range: [0, HEIGHT] }); - POP.add({name: "param7", title: "X4:", value: WIDTH/4, range: [0, WIDTH] }); - POP.add({name: "param8", title: "Y4:", value: HEIGHT*3/4, range: [0, HEIGHT] }); - POP.preview_in_main = true; - POP.effects = true; - POP.show('Perspective', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - var param3 = parseInt(user_response.param3); - var param4 = parseInt(user_response.param4); - var param5 = parseInt(user_response.param5); - var param6 = parseInt(user_response.param6); - var param7 = parseInt(user_response.param7); - var param8 = parseInt(user_response.param8); - - var texture = fx_filter.texture(canvas_active(true)); - fx_filter.draw(texture).perspective([WIDTH/4, HEIGHT/4, WIDTH*3/4, HEIGHT/4, WIDTH*3/4, HEIGHT*3/4, WIDTH/4, HEIGHT*3/4], [param1,param2,param3,param4,param5,param6,param7,param8]).update(); //effect - canvas_active().clearRect(0, 0, WIDTH, HEIGHT); - canvas_active().drawImage(fx_filter, 0, 0); - DRAW.zoom(); - }, - function(user_response){ - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - var param3 = parseInt(user_response.param3); - var param4 = parseInt(user_response.param4); - var param5 = parseInt(user_response.param5); - var param6 = parseInt(user_response.param6); - var param7 = parseInt(user_response.param7); - var param8 = parseInt(user_response.param8); - - canvas_front.rect(0, 0, WIDTH, HEIGHT); - canvas_front.fillStyle = "#ffffff"; - canvas_front.fill(); - - var texture = fx_filter.texture(canvas_active(true)); - fx_filter.draw(texture).perspective([WIDTH/4, HEIGHT/4, WIDTH*3/4, HEIGHT/4, WIDTH*3/4, HEIGHT*3/4, WIDTH/4, HEIGHT*3/4], [param1,param2,param3,param4,param5,param6,param7,param8]).update(); //effect - canvas_front.drawImage(fx_filter, 0, 0); - - pers_square(param1, param2); - pers_square(param3, param4); - pers_square(param5, param6); - pers_square(param7, param8); - }); - - function pers_square(x, y){ - canvas_front.beginPath(); - canvas_front.rect(x-round(CON.sr_size/2), y-round(CON.sr_size/2), CON.sr_size, CON.sr_size); - canvas_front.fillStyle = "#0000c8"; - canvas_front.fill(); - } - }; - this.effects_Posterize = function(){ - POP.add({name: "param1", title: "Levels:", value: "8", range: [2, 32] }); - POP.effects = true; - POP.show('Posterize', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Posterize(imageData, param1); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.Posterize(imageData, param1); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_Sepia = function(){ - POP.effects = true; - POP.show('Sepia', function(user_response){ - MAIN.save_state(); - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Sepia(imageData); //add effect - canvas_active().putImageData(filtered, 0, 0); - }, - function(user_response, canvas_preview, w, h){ - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.Sepia(imageData); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_Sharpen = function(){ - POP.add({name: "param1", title: "Factor:", value: "3", range: [1, 10], step: 0.1 }); - POP.effects = true; - POP.show('Sharpen', function(user_response){ - MAIN.save_state(); - var param1 = parseFloat(user_response.param1); - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Sharpen(imageData, param1); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseFloat(user_response.param1); - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.Sharpen(imageData, param1); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_Solarize = function(){ - POP.effects = true; - POP.show('Solarize', function(user_response){ - MAIN.save_state(); - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Solarize(imageData); //add effect - canvas_active().putImageData(filtered, 0, 0); - }, - function(user_response, canvas_preview, w, h){ - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.Solarize(imageData); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_tilt_shift = function(){ - //extra - POP.add({name: "param7", title: "Saturation:", value: "5", range: [0, 100] }); - POP.add({name: "param8", title: "Sharpen:", value: "2", range: [1, 10] }); - //main - POP.add({name: "param1", title: "Blur Radius:", value: "15", range: [0, 50] }); - POP.add({name: "param2", title: "Gradient Radius:", value: "200", range: [0, 400] }); - //startX, startY, endX, endY - POP.add({name: "param3", title: "X start:", value: "0", range: [0, WIDTH] }); - POP.add({name: "param4", title: "Y start:", value: round(HEIGHT/2), range: [0, HEIGHT] }); - POP.add({name: "param5", title: "X end:", value: WIDTH, range: [0, WIDTH] }); - POP.add({name: "param6", title: "Y end:", value: round(HEIGHT/2), range: [0, HEIGHT] }); - POP.effects = true; - POP.show('Tilt Shift', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - var param3 = parseInt(user_response.param3); - var param4 = parseInt(user_response.param4); - var param5 = parseInt(user_response.param5); - var param6 = parseInt(user_response.param6); - var param7 = parseInt(user_response.param7); - var param8 = parseInt(user_response.param8); - - //main effect - var texture = fx_filter.texture(canvas_active(true)); - fx_filter.draw(texture).tiltShift(param3, param4, param5, param6, param1, param2).update(); //effect - canvas_active().clearRect(0, 0, WIDTH, HEIGHT); - canvas_active().drawImage(fx_filter, 0, 0); - - //saturation - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.HSLAdjustment(imageData, 0, param7, 0); - canvas_active().putImageData(filtered, 0, 0); - - //sharpen - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Sharpen(imageData, param8); - canvas_active().putImageData(filtered, 0, 0); - - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - var param3 = parseInt(user_response.param3); - var param4 = parseInt(user_response.param4); - var param5 = parseInt(user_response.param5); - var param6 = parseInt(user_response.param6); - var param7 = parseInt(user_response.param7); - var param8 = parseInt(user_response.param8); - - //recalc param by size - var param3 = param3 / WIDTH * w; - var param4 = param4 / HEIGHT * h; - var param5 = param5 / WIDTH * w; - var param6 = param6 / HEIGHT * h; - - //main effect - var texture = fx_filter.texture(canvas_preview.getImageData(0, 0, w, h)); - fx_filter.draw(texture).tiltShift(param3, param4, param5, param6, param1, param2).update(); //effect - canvas_preview.drawImage(fx_filter, 0, 0); - - //draw line - canvas_preview.beginPath(); - canvas_preview.strokeStyle = "#ff0000"; - canvas_preview.lineWidth = 1; - canvas_preview.moveTo(param3 + 0.5, param4 + 0.5); - canvas_preview.lineTo(param5 + 0.5, param6 + 0.5); - canvas_preview.stroke(); - }); - }; - this.effects_vignette = function(){ - POP.add({name: "param1", title: "Size:", value: "0.5", range: [0, 1], step: 0.01 }); - POP.add({name: "param2", title: "Amount:", value: "0.5", range: [0, 1], step: 0.01 }); - POP.effects = true; - POP.show('Vignette', function(user_response){ - MAIN.save_state(); - var param1 = parseFloat(user_response.param1); - var param2 = parseFloat(user_response.param2); - - var texture = fx_filter.texture(canvas_active(true)); - fx_filter.draw(texture).vignette(param1, param2).update(); //effect - canvas_active().clearRect(0, 0, WIDTH, HEIGHT); - canvas_active().drawImage(fx_filter, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseFloat(user_response.param1); - var param2 = parseFloat(user_response.param2); - - var texture = fx_filter.texture(canvas_preview.getImageData(0, 0, w, h)); - fx_filter.draw(texture).vignette(param1, param2).update(); //effect - canvas_preview.drawImage(fx_filter, 0, 0); - }); - }; - this.effects_vintage = function(){ - POP.add({name: "red_offset", title: "Color adjust:", value: "70", range: [0, 200] }); - POP.add({name: "contrast", title: "Contrast:", value: "15", range: [0, 50] }); - POP.add({name: "blur", title: "Blur:", value: "0", range: [0, 2], step: 0.1 }); - POP.add({name: "light_leak", title: "Light leak:", value: "90", range: [0, 150] }); - POP.add({name: "de_saturation", title: "Desaturation:", value: "40", range: [0, 100] }); - POP.add({name: "exposure", title: "Exposure level:", value: "80", range: [0, 150] }); - POP.add({name: "grains", title: "Grains level:", value: "20", range: [0, 50] }); - POP.add({name: "big_grains", title: "Big grains level:", value: "20", range: [0, 50] }); - POP.add({name: "vignette1", title: "Vignette size:", value: "0.3", range: [0, 0.5], step: 0.01 }); - POP.add({name: "vignette2", title: "Vignette amount:", value: "0.5", range: [0, 0.7], step: 0.01 }); - POP.add({name: "dust_level", title: "Dusts level:", value: "70", range: [0, 100] }); - POP.effects = true; - POP.show('Vintage', function(user_response){ - MAIN.save_state(); - var red_offset = parseInt(user_response.red_offset); - var contrast = parseInt(user_response.contrast); - var blur = parseFloat(user_response.blur); - var light_leak = parseInt(user_response.light_leak); - var de_saturation = parseInt(user_response.de_saturation); - var exposure = parseInt(user_response.exposure); - var grains = parseInt(user_response.grains); - var big_grains = parseInt(user_response.big_grains); - var vignette1 = parseFloat(user_response.vignette1); - var vignette2 = parseFloat(user_response.vignette2); - var dust_level = parseInt(user_response.dust_level); - - VINTAGE.adjust_color(canvas_active(), WIDTH, HEIGHT, red_offset); - VINTAGE.lower_contrast(canvas_active(), WIDTH, HEIGHT, contrast); - VINTAGE.blur(canvas_active(), WIDTH, HEIGHT, blur); - VINTAGE.light_leak(canvas_active(), WIDTH, HEIGHT, light_leak); - VINTAGE.chemicals(canvas_active(), WIDTH, HEIGHT, de_saturation); - VINTAGE.exposure(canvas_active(), WIDTH, HEIGHT, exposure); - VINTAGE.grains(canvas_active(), WIDTH, HEIGHT, grains); - VINTAGE.grains_big(canvas_active(), WIDTH, HEIGHT, big_grains); - VINTAGE.optics(canvas_active(), WIDTH, HEIGHT, vignette1, vignette2); - VINTAGE.dusts(canvas_active(), WIDTH, HEIGHT, dust_level); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var red_offset = parseInt(user_response.red_offset); - var contrast = parseInt(user_response.contrast); - var blur = parseFloat(user_response.blur); - var light_leak = parseInt(user_response.light_leak); - var de_saturation = parseInt(user_response.de_saturation); - var exposure = parseInt(user_response.exposure); - var grains = parseInt(user_response.grains); - var big_grains = parseInt(user_response.big_grains); - var vignette1 = parseFloat(user_response.vignette1); - var vignette2 = parseFloat(user_response.vignette2); - var dust_level = parseInt(user_response.dust_level); - - VINTAGE.adjust_color(canvas_preview, w, h, red_offset); - VINTAGE.lower_contrast(canvas_preview, w, h, contrast); - VINTAGE.blur(canvas_preview, w, h, blur); - VINTAGE.light_leak(canvas_preview, w, h, light_leak); - VINTAGE.chemicals(canvas_preview, w, h, de_saturation); - VINTAGE.exposure(canvas_preview, w, h, exposure); - VINTAGE.grains(canvas_preview, w, h, grains); - VINTAGE.grains_big(canvas_preview, w, h, big_grains); - VINTAGE.optics(canvas_preview, w, h, vignette1, vignette2); - VINTAGE.dusts(canvas_preview, w, h, dust_level); - }); - }; - - //===== Help =========================================================== - - //shortcuts - this.help_shortcuts = function(){ - POP.add({title: "D", value: 'Dublicate' }); - POP.add({title: "Del", value: 'Delete selection' }); - POP.add({title: "F", value: 'Auto adjust colors' }); - POP.add({title: "G", value: 'Grid on/off' }); - POP.add({title: "L", value: 'Rotate left' }); - POP.add({title: "N", value: 'New layer' }); - POP.add({title: "O", value: 'Open file(s)' }); - POP.add({title: "R", value: 'Resize' }); - POP.add({title: "S", value: 'Save' }); - POP.add({title: "T", value: 'Trim' }); - POP.add({title: "-", value: 'Zoom out' }); - POP.add({title: "+", value: 'Zoom in' }); - POP.add({title: "CTRL + Z", value: 'Undo' }); - POP.add({title: "CTRL + A", value: 'Select all' }); - POP.add({title: "CTRL + V", value: 'Paste' }); - POP.add({title: "Arrow keys", value: 'Move active layer by 10px' }); - POP.add({title: "CTRL + Arrow keys", value: 'Move active layer by 50px' }); - POP.add({title: "SHIFT + Arrow keys",value: 'Move active layer by 1px' }); - POP.add({title: "Drag & Drop", value: 'Imports images/xml data' }); - POP.show('Keyboard Shortcuts', ''); - }; - //credits - this.help_credits = function(){ - for(var i in CREDITS){ - if(CREDITS[i].link != undefined) - POP.add({title: CREDITS[i].title, html: ''+CREDITS[i].name+'' }); - else - POP.add({title: CREDITS[i].title, html: CREDITS[i].name }); - } - POP.show('Credits', ''); - }; - //about - this.help_about = function(){ - POP.add({title: "Name:", value: "miniPaint "+VERSION }); - POP.add({title: "Description:", value: 'online image editor' }); - POP.add({title: "Author:", value: AUTHOR }); - POP.add({title: "Email:", html: ''+EMAIL+'' }); - POP.add({title: "Source:", html: 'github.com/viliusle/miniPaint' }); - POP.show('About', ''); - }; - - //====================================================================== - - this.save_dialog = function(e){ - //find default format - var save_default = SAVE_TYPES[0]; //png - if(HELPER.getCookie('save_default') == 'jpg') - save_default = SAVE_TYPES[1]; //jpg - - POP.add({name: "name", title: "File name:", value: [SAVE_NAME] }); - POP.add({name: "type", title: "Save as type:", values: SAVE_TYPES, value: save_default }); - POP.add({name: "quality", title: "Quality (1-100):", value: 90, range: [1, 100] }); - POP.add({name: "layers", title: "Save layers:", values: ['All', 'Selected'] }); - POP.add({name: "trim", title: "Trim:", values: ['No', 'Yes'] }); - POP.show('Save as ...', MENU.save); - document.getElementById("pop_data_name").select(); - if(e != undefined) - e.preventDefault(); - }; - this.add_layer = function(){ - MAIN.save_state(); - - var tmp = false; - var last_layer = LAYER.layer_active; - if(TOOLS.select_data != false){ - tmp = document.createElement("canvas"); - tmp.width = TOOLS.select_data.w; - tmp.height = TOOLS.select_data.h; - tmp.getContext("2d").drawImage(canvas_active(true), TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h, 0, 0, TOOLS.select_data.w, TOOLS.select_data.h); - } - - //crete layer - LAYER.layer_add(); - - if(TOOLS.select_data != false){ - //copy user selected data to new layer - canvas_active().drawImage(tmp, 0, 0); - LAYER.layer_renew(); - - //clear selection - TOOLS.select_data = false; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - - //switch back to old layer - LAYER.layer_active = last_layer; - LAYER.layer_renew(); - } - - }; - this.resize_custom = function(user_response){ - MAIN.save_state(); - CON.autosize = false; - if(user_response.width != WIDTH || user_response.height != HEIGHT){ - WIDTH = user_response.width; - HEIGHT = user_response.height; - RATIO = WIDTH/HEIGHT; - LAYER.set_canvas_size(); - } - }; - //prepare rotation - increase doc dimensions if needed - this.rotate_resize_doc = function(angle, w, h){ - var o = angle*Math.PI/180; - var new_x = w * Math.abs(Math.cos(o)) + h * Math.abs(Math.sin(o)); - var new_y = w * Math.abs(Math.sin(o)) + h * Math.abs(Math.cos(o)); - new_x = Math.ceil(round(new_x*1000)/1000); - new_y = Math.ceil(round(new_y*1000)/1000); - - if(WIDTH != new_x || HEIGHT != new_y){ - MAIN.save_state(); - var dx = 0; - var dy = 0; - if(new_x > WIDTH){ - dx = Math.ceil(new_x - WIDTH)/2; - WIDTH = new_x; - } - if(new_y > HEIGHT){ - dy = Math.ceil(new_y - HEIGHT)/2; - HEIGHT = new_y; - } - RATIO = WIDTH/HEIGHT; - LAYER.set_canvas_size(); - - for(var i in LAYERS){ - var layer = document.getElementById(LAYERS[i].name).getContext("2d"); - - var tmp = layer.getImageData(0, 0, WIDTH, HEIGHT); - layer.clearRect(0, 0, WIDTH, HEIGHT); - layer.putImageData(tmp, dx, dy); - } - } - }; - //rotate layer - this.rotate_layer = function(user_response, canvas, w, h){ - var TO_RADIANS = Math.PI/180; - angle = user_response.angle; - var tempCanvas = document.createElement("canvas"); - var tempCtx = tempCanvas.getContext("2d"); - tempCanvas.width = w; - tempCanvas.height = h; - var imageData = canvas.getImageData(0, 0, w, h); - tempCtx.putImageData(imageData, 0, 0); - - //rotate - canvas.clearRect(0, 0, w, h); - canvas.save(); - canvas.translate(round(w/2), round(h/2)); - canvas.rotate(angle * TO_RADIANS); - canvas.drawImage(tempCanvas, -round(w/2), -round(h/2)); - canvas.restore(); - if(w == WIDTH) //if main canvas - DRAW.zoom(); - }; - this.copy_to_clipboard = function(){ - PASTE_DATA = false; - PASTE_DATA = document.createElement("canvas"); - PASTE_DATA.width = TOOLS.select_data.w; - PASTE_DATA.height = TOOLS.select_data.h; - PASTE_DATA.getContext("2d").drawImage(canvas_active(true), TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h, 0, 0, TOOLS.select_data.w, TOOLS.select_data.h); - }; - this.paste = function(type){ - if(PASTE_DATA == false){ - if(type == 'menu'){ - POP.add({title: "Error:", value: 'Empty data' }); - POP.add({title: "Notice:", value: 'To paste from clipboard, use Ctrl-V.' }); - POP.show('Notice', ''); - } - return false; - } - - tmp = new Array(); - var new_name = 'Layer #'+(LAYERS.length+1); - LAYER.create_canvas(new_name); - LAYERS.push({name: new_name, visible: true}); - LAYER.layer_active = LAYERS.length-1; - canvas_active().drawImage(PASTE_DATA, 0, 0); - LAYER.layer_renew(); - }; - this.resize_box = function(){ - POP.add({name: "width", title: "Enter new width:", value: '', placeholder:WIDTH }); - POP.add({name: "height",title: "Enter new height:", value: '', placeholder:HEIGHT }); - POP.add({name: "mode", title: "Mode:", value: "Resample - Hermite", values: ["Resize", "Resample - Hermite"]}); - POP.add({name: "preblur",title: "Pre-Blur:", values: ["Yes", "No"], value: "No" }); - POP.add({name: "sharpen",title: "Apply sharpen:", values: ["Yes", "No"], value: "No" }); - POP.show('Resize', MENU.resize_layer); - }; - this.resize_layer = function(user_response){ - MAIN.save_state(); - var width = parseInt(user_response.width); - var height = parseInt(user_response.height); - var preblur = user_response.preblur; - var sharpen = user_response.sharpen; - if( (isNaN(width) || width<1) && (isNaN(height) || height<1) ) return false; - if(width == WIDTH && height == HEIGHT) return false; - - //if only 1 dimension was provided - if(isNaN(width) || isNaN(height)){ - if(isNaN(width) || width<1) - width = Math.round(height * RATIO); - if(isNaN(height) || height<1) - height = Math.round(width / RATIO); - } - - //if increasing size - use simple way - its good enough - if(width > WIDTH || height > HEIGHT) - user_response.mode = "Resize"; - - //anti-artifacting? - if(preblur == 'Yes'){ - var ratio_w = WIDTH / width; - var ratio_h = HEIGHT / height; - var ratio_avg = Math.max(ratio_w, ratio_h); - var power = ratio_avg * 0.3; - if(power > 0.6){ - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.GaussianBlur(imageData, power); //add effect - canvas_active().putImageData(filtered, 0, 0); - } - } - if(width > WIDTH || height > HEIGHT) - user_response.mode = "Resize"; - //Hermite - good and fast - if(user_response.mode == "Resample - Hermite"){ - DRAW.resample_hermite(canvas_active(true), WIDTH, HEIGHT, width, height); - if(MENU.last_menu != 'layer_resize'){ - WIDTH = width; - HEIGHT = height; - if(WIDTH<1) WIDTH = 1; - if(HEIGHT<1) HEIGHT = 1; - RATIO = WIDTH/HEIGHT; - LAYER.set_canvas_size(); - } - DRAW.zoom(); - } - //simple resize - if(user_response.mode == "Resize"){ - //simple resize - FAST - tmp_data = document.createElement("canvas"); - tmp_data.width = WIDTH; - tmp_data.height = HEIGHT; - tmp_data.getContext("2d").drawImage(canvas_active(true), 0, 0); - - canvas_active().clearRect(0, 0, WIDTH, HEIGHT); - if(width <= WIDTH){ - canvas_active().drawImage(tmp_data, 0, 0, width, height); - } - else{ - WIDTH = round(width); - HEIGHT = round(height); - RATIO = WIDTH/HEIGHT; - LAYER.set_canvas_size(); - canvas_active().drawImage(tmp_data, 0, 0, width, height); - } - if(MENU.last_menu != 'layer_resize') - DRAW.trim(); - DRAW.zoom(); - } - //sharpen after? - if(sharpen == 'Yes'){ - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Sharpen(imageData, 1); //add effect - canvas_active().putImageData(filtered, 0, 0); - } - }; - this.save = function(user_response){ - fname = user_response.name; - var tempCanvas = document.createElement("canvas"); - var tempCtx = tempCanvas.getContext("2d"); - tempCanvas.width = WIDTH; - tempCanvas.height = HEIGHT; - - //save choosen type - var save_default = SAVE_TYPES[0]; //png - if(HELPER.getCookie('save_default') == 'jpg') - save_default = SAVE_TYPES[1]; //jpg - if(user_response.type != save_default && user_response.type == SAVE_TYPES[0]) - HELPER.setCookie('save_default', 'png' , 30); - else if(user_response.type != save_default && user_response.type == SAVE_TYPES[1]) - HELPER.setCookie('save_default', 'jpg' , 30); - else - - if(MAIN.TRANSPARENCY == false){ - tempCtx.beginPath(); - tempCtx.rect(0, 0, WIDTH, HEIGHT); - tempCtx.fillStyle = "#ffffff"; - tempCtx.fill(); - } - - //take data - for(var i in LAYERS){ - if(LAYERS[i].visible == false) continue; - if(user_response.layers == 'Selected' && user_response.type != 'XML' && i != LAYER.layer_active) continue; - tempCtx.drawImage(document.getElementById(LAYERS[i].name), 0, 0, WIDTH, HEIGHT); - } - - if(user_response.trim == 'Yes' && user_response.type != 'XML'){ - //trim - var trim_info = DRAW.trim_info(tempCanvas); - tmp_data = tempCtx.getImageData(0, 0, WIDTH, HEIGHT); - tempCtx.clearRect(0, 0, WIDTH, HEIGHT); - tempCanvas.width = WIDTH - trim_info.right - trim_info.left; - tempCanvas.height = HEIGHT - trim_info.bottom - trim_info.top; - tempCtx.putImageData(tmp_data, -trim_info.left, -trim_info.top); - - } - - //detect type - var parts = user_response.type.split(" "); - user_response.type = parts[0]; - - //auto detect? - if(HELPER.strpos(fname, '.png')==true) user_response.type = 'PNG'; - else if(HELPER.strpos(fname, '.jpg')==true) user_response.type = 'JPG'; - else if(HELPER.strpos(fname, '.xml')==true) user_response.type = 'XML'; - else if(HELPER.strpos(fname, '.bmp')==true) user_response.type = 'BMP'; - else if(HELPER.strpos(fname, '.webp')==true) user_response.type = 'WEBP'; - - //prepare data - if(user_response.type == 'PNG'){ - //png - default format - var data = tempCanvas.toDataURL("image/png"); - var data_header = "image/png"; - if(HELPER.strpos(fname, '.png')==false) - fname = fname+".png"; - } - else if(user_response.type == 'JPG'){ - //jpg - var quality = parseInt(user_response.quality); - if(quality>100 || quality < 1 || isNaN(quality)==true) - quality = 90; - quality = quality/100; - var data = tempCanvas.toDataURL('image/jpeg', quality); - var data_header = "image/jpeg"; - if(HELPER.strpos(fname, '.jpg')==false) - fname = fname+".jpg"; - } - else if(user_response.type == 'BMP'){ - //bmp - lets hope user really needs this - chrome do not support it - var data = tempCanvas.toDataURL("image/bmp"); - var data_header = "image/bmp"; - if(HELPER.strpos(fname, '.bmp')==false) - fname = fname+".bmp"; - } - else if(user_response.type == 'WEBP'){ - //WEBP - new format for chrome only - if(HELPER.strpos(fname, '.webp')==false) - fname = fname+".webp"; - var data_header = "image/webp"; - var data = tempCanvas.toDataURL("image/webp"); - } - else if(user_response.type == 'XML'){ - //xml - full data with layers - if(HELPER.strpos(fname, '.xml')==false) - fname = fname+".xml"; - var data_header = "text/plain"; - - var XML = ''; - //basic info - XML += "\n"; - XML += " \n"; - XML += " "+WIDTH+"\n"; - XML += " "+HEIGHT+"\n"; - XML += " \n"; - //add layers info - XML += " \n"; - for(var i in LAYERS){ - XML += " \n"; - XML += " "+LAYERS[i].name+"\n"; - if(LAYERS[i].visible == true) - XML += " 1\n"; - else - XML += " 0\n"; - XML += " "+LAYERS[i].opacity+"\n"; - XML += " \n"; - } - XML += " \n"; - //add data ??? - XML += " \n"; - for(var i in LAYERS){ - var data_tmp = document.getElementById(LAYERS[i].name).toDataURL("image/png"); - XML += " \n"; - XML += " "+LAYERS[i].name+"\n"; - XML += " "+data_tmp+"\n"; - XML += " \n"; - } - XML += " \n"; - XML += "\n"; - - var bb = new Blob([XML], {type: data_header}); - var data = window.URL.createObjectURL(bb); - } - else - return false; - - //check support - var actualType = data.replace(/^data:([^;]*).*/, '$1'); - if(data_header != actualType && data_header != "text/plain"){ - //error - no support - POP.add({title: "Error:", value: "Your browser do not support "+user_response.type }); - POP.show('Sorry', ''); - return false; - } - - //push data to user - window.URL = window.webkitURL || window.URL; - var a = document.createElement('a'); - if (typeof a.download != "undefined"){ - //a.download is supported - a.setAttribute("id", "save_data"); - a.download = fname; - a.href = data; - a.textContent = 'Downloading...'; - document.getElementById("tmp").appendChild(a); - - //release memory - a.onclick = function(e){ - MENU.save_cleanup(this); - }; - //force click - document.querySelector('#save_data').click(); - } - else{ - //poor browser or poor user - not sure here. No support - if(user_response.type == 'PNG') - window.open(data); - else if(user_response.type == 'JPG') - window.open(data, quality); - } - }; - this.save_cleanup = function(a){ - a.textContent = 'Downloaded'; - setTimeout(function(){ - a.href = ''; - var element = document.getElementById("save_data"); - element.parentNode.removeChild(element); - }, 1500); - }; - this.open = function(){ - document.getElementById("tmp").innerHTML = ''; - var a = document.createElement('input'); - a.setAttribute("id", "file_open"); - a.type = 'file'; - a.multiple = 'multiple '; - document.getElementById("tmp").appendChild(a); - document.getElementById('file_open').addEventListener('change', MENU.open_handler, false); - - //force click - document.querySelector('#file_open').click(); - }; - this.open_handler = function(e){ - var files = e.target.files; - for (var i = 0, f; i < files.length; i++){ - f = files[i]; - if(!f.type.match('image.*') && f.type != 'text/xml') continue; - if(files.length == 1) - SAVE_NAME = f.name.split('.')[f.name.split('.').length - 2]; - - var FR = new FileReader(); - FR.file = e.target.files[i]; - - FR.onload = function(event){ - if(this.file.type != 'text/xml'){ - //image - LAYER.layer_add(this.file.name, event.target.result, this.file.type); - EXIF.getData(this.file, TOOLS.save_EXIF); - } - else{ - //xml - var responce = MAIN.load_xml(event.target.result); - if(responce === true) - return false; - } - - //finish progress - var progress = document.getElementById('uploadprogress'); - progress.value = progress.innerHTML = 100; - progress.style.display='none'; - }; - FR.onprogress = (function(e){ - return function(e){ - var complete = (e.loaded / e.total * 100 | 0); - var progress = document.getElementById('uploadprogress'); - progress.value = progress.innerHTML = complete; - }; - })(f); - if(f.type == "text/plain") - FR.readAsText(f); - else if(f.type == "text/xml") - FR.readAsText(f); - else - FR.readAsDataURL(f); - } - }; - } +var MENU = new MENU_CLASS(); + +function MENU_CLASS(){ + this.last_menu = ''; + var PASTE_DATA = false; + var fx_filter = fx.canvas(); + + this.do_menu = function(name){ + $('#main_menu').find('.selected').click(); //close menu + MENU.last_menu = name; + + //exec + MENU[name](); + + DRAW.zoom(); + }; + + //===== File =========================================================== + + //new + this.file_new = function(){ + POP.add({name: "width", title: "Width:", value: WIDTH }); + POP.add({name: "height", title: "Height:", value: HEIGHT }); + POP.add({name: "transparency", title: "Transparent:", values: ['Yes', 'No']}); + POP.show('New file...', function(response){ + var width = parseInt(response.width); + var height = parseInt(response.height); + var transparency = response.transparency; + + if(response.transparency == 'Yes') + MAIN.TRANSPARENCY = true; + else + MAIN.TRANSPARENCY = false; + + ZOOM = 100; + WIDTH = width; + HEIGHT = height; + RATIO = WIDTH/HEIGHT; + MAIN.init(); + }); + }; + //open + this.file_open = function(){ + MENU.open(); + }; + //save + this.file_save = function(){ + MENU.save_dialog(); + }; + //print + this.file_print = function(){ + window.print(); + }; + + //===== Edit =========================================================== + + //undo + this.edit_undo = function(){ + MAIN.undo(); + }; + //cut + this.edit_cut = function(){ + MAIN.save_state(); + if(TOOLS.select_data != false){ + this.copy_to_clipboard(); + canvas_active().clearRect(TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h); + TOOLS.select_data = false; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + } + }; + //copy + this.edit_copy = function(){ + if(TOOLS.select_data != false) + this.copy_to_clipboard(); + }; + //paste + this.edit_paste = function(){ + MAIN.save_state(); + this.paste('menu'); + }; + //select all + this.edit_select = function(){ + TOOLS.select_data = { + x: 0, + y: 0, + w: WIDTH, + h: HEIGHT + }; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + TOOLS.draw_selected_area(); + }; + //clear selection + this.edit_clear = function(){ + TOOLS.select_data = false; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + }; + + //===== Image ========================================================== + + //information + this.image_information = function(){ + var colors = TOOLS.unique_colors_count(canvas_active(true)); + colors = HELPER.number_format(colors, 0); + + POP.add({title: "Width:", value: WIDTH }); + POP.add({title: "Height:", value: HEIGHT }); + POP.add({title: "Unique colors:", value: colors }); + //exif + for(var i in TOOLS.EXIF) + POP.add({title: i+":", value: TOOLS.EXIF[i] }); + POP.show('Information', ''); + }; + //size + this.image_size = function(){ + POP.add({name: "width", title: "Width:", value: WIDTH }); + POP.add({name: "height", title: "Height:", value: HEIGHT }); + POP.show('Attributes', this.resize_custom); + }; + //trim + this.image_trim = function(){ + MAIN.save_state(); + DRAW.trim(); + }; + //crop + this.image_crop = function(){ + MAIN.save_state(); + if(TOOLS.select_data == false){ + POP.add({html: 'Select area first' }); + POP.show('Error', ''); + } + else{ + for(var i in LAYERS){ + var layer = document.getElementById(LAYERS[i].name).getContext("2d"); + + var tmp = layer.getImageData(TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h); + layer.clearRect(0, 0, WIDTH, HEIGHT); + layer.putImageData(tmp, 0, 0); + } + + //resize + MAIN.save_state(); + WIDTH = TOOLS.select_data.w; + HEIGHT = TOOLS.select_data.h; + RATIO = WIDTH/HEIGHT; + LAYER.set_canvas_size(); + + TOOLS.select_data = false; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + } + }; + //resize + this.image_resize = function(){ + MENU.resize_box(); + }; + //rotate left + this.image_rotate_left = function(){ + MAIN.save_state(); + MENU.rotate_resize_doc(270, WIDTH, HEIGHT); + MENU.rotate_layer({angle: 270}, canvas_active(), WIDTH, HEIGHT); + }; + //rotate right + this.image_rotate_right = function(){ + MAIN.save_state(); + MENU.rotate_resize_doc(90, WIDTH, HEIGHT); + MENU.rotate_layer({angle: 90}, canvas_active(), WIDTH, HEIGHT); + }; + //rotate + this.image_rotate = function(){ + POP.add({name: "angle", title: "Enter angle (0-360):", value: 0, range: [0, 360] }); + POP.show('Rotate', function(response){ + MAIN.save_state(); + MENU.rotate_resize_doc(response.angle, WIDTH, HEIGHT); + MENU.rotate_layer(response, canvas_active(), WIDTH, HEIGHT); + }, + function(response, canvas_preview, w, h){ + MENU.rotate_layer(response, canvas_preview, w, h); + }); + }; + //vertical flip + this.image_vflip = function(){ + MAIN.save_state(); + var tempCanvas = document.createElement("canvas"); + var tempCtx = tempCanvas.getContext("2d"); + tempCanvas.width = WIDTH; + tempCanvas.height = HEIGHT; + tempCtx.drawImage(canvas_active(true), 0, 0, WIDTH, HEIGHT); + //flip + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + canvas_active().save(); + canvas_active().scale(-1, 1); + canvas_active().drawImage(tempCanvas, -WIDTH, 0); + canvas_active().restore(); + }; + //horizontal flip + this.image_hflip = function(){ + MAIN.save_state(); + var tempCanvas = document.createElement("canvas"); + var tempCtx = tempCanvas.getContext("2d"); + tempCanvas.width = WIDTH; + tempCanvas.height = HEIGHT; + tempCtx.drawImage(canvas_active(true), 0, 0, WIDTH, HEIGHT); + //flip + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + canvas_active().save(); + canvas_active().scale(1, -1); + canvas_active().drawImage(tempCanvas, 0, -HEIGHT); + canvas_active().restore(); + }; + //color corrections + this.image_colors = function(){ + POP.add({name: "param1", title: "Brightness:", value: "0", range: [-100, 100] }); + POP.add({name: "param2", title: "Contrast:", value: "0", range: [-100, 100] }); + POP.add({name: "param_red", title: "Red channel:", value: "0", range: [-255, 255] }); + POP.add({name: "param_green", title: "Green channel:", value: "0", range: [-255, 255] }); + POP.add({name: "param_blue", title: "Blue channel:", value: "0", range: [-255, 255] }); + POP.add({name: "param_red", title: "Red offset:", value: "0", range: [-255, 255] }); + POP.add({name: "param_green", title: "Green offset:", value: "0", range: [-255, 255] }); + POP.add({name: "param_blue", title: "Blue offset:", value: "0", range: [-255, 255] }); + POP.add({name: "param_h", title: "Hue:", value: "0", range: [-180, 180] }); + POP.add({name: "param_s", title: "Saturation:", value: "0", range: [-100, 100] }); + POP.add({name: "param_l", title: "Luminance:", value: "0", range: [-100, 100] }); + + POP.show('Brightness Contrast', function(user_response){ + MAIN.save_state(); + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + var param_red = parseInt(user_response.param_red); + var param_green = parseInt(user_response.param_green); + var param_blue = parseInt(user_response.param_blue); + var param_h = parseInt(user_response.param_h); + var param_s = parseInt(user_response.param_s); + var param_l = parseInt(user_response.param_l); + + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + //Brightness/Contrast + var filtered = ImageFilters.BrightnessContrastPhotoshop(imageData, param1, param2); + //RGB corrections + var filtered = ImageFilters.ColorTransformFilter(filtered, 1, 1, 1, 1, param_red, param_green, param_blue, 1); + //hue/saturation/luminance + var filtered = ImageFilters.HSLAdjustment(filtered, param_h, param_s, param_l); + canvas_active().putImageData(filtered, 0, 0); + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + var param_red = parseInt(user_response.param_red); + var param_green = parseInt(user_response.param_green); + var param_blue = parseInt(user_response.param_blue); + var param_h = parseInt(user_response.param_h); + var param_s = parseInt(user_response.param_s); + var param_l = parseInt(user_response.param_l); + + var imageData = canvas_preview.getImageData(0, 0, w, h); + //Brightness/Contrast + var filtered = ImageFilters.BrightnessContrastPhotoshop(imageData, param1, param2); //add effect + //RGB corrections + var filtered = ImageFilters.ColorTransformFilter(filtered, 1, 1, 1, 1, param_red, param_green, param_blue, 1); + //hue/saturation/luminance + var filtered = ImageFilters.HSLAdjustment(filtered, param_h, param_s, param_l); + canvas_preview.putImageData(filtered, 0, 0); + }); + }; + //auto adjust colors + this.image_auto_adjust = function(){ + MAIN.save_state(); + DRAW.auto_adjust(canvas_active(), WIDTH, HEIGHT); + }; + //convert to grayscale + this.image_GrayScale = function(){ + MAIN.save_state(); + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.GrayScale(imageData); //add effect + canvas_active().putImageData(filtered, 0, 0); + }; + //enchance colors + this.image_decrease_colors = function(){ + POP.add({name: "param1", title: "Colors:", value: "10", range: [2, 100] }); + POP.add({name: "param2", title: "Dithering:", values: ["No", "Yes"], }); + POP.add({name: "param3", title: "Greyscale:", values: ["No", "Yes"], }); + POP.show('Decrease colors', function(user_response){ + MAIN.save_state(); + var param1 = parseInt(user_response.param1); + if(user_response.param2 == 'Yes') param2 = true; else param2 = false; + if(user_response.param3 == 'Yes') param3 = true; else param3 = false; + + DRAW.decrease_colors(canvas_active(true), canvas_active(true), WIDTH, HEIGHT, param1, param2, param3); + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var param1 = parseInt(user_response.param1); + if(user_response.param2 == 'Yes') param2 = true; else param2 = false; + if(user_response.param3 == 'Yes') param3 = true; else param3 = false; + + DRAW.decrease_colors(canvas_active(true), document.getElementById("pop_post"), w, h, param1, param2, param3); + }); + }; + //negative + this.image_negative = function(){ + MAIN.save_state(); + if(TOOLS.select_data == false) + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + else + var imageData = canvas_active().getImageData(TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h); + var pixels = imageData.data; + for (var i = 0; i < pixels.length; i += 4){ + pixels[i] = 255 - pixels[i]; // red + pixels[i+1] = 255 - pixels[i+1]; // green + pixels[i+2] = 255 - pixels[i+2]; // blue + } + //save + if(TOOLS.select_data == false) + canvas_active().putImageData(imageData, 0, 0); + else + canvas_active().putImageData(imageData, TOOLS.select_data.x, TOOLS.select_data.y); + }; + //grid + this.image_grid = function(){ + POP.add({name: "visible", title: "Visible:", value: "Yes", values: ["Yes", "No"] }); + POP.add({name: "gap_x", title: "Horizontal gap:", value: DRAW.grid_size[0] }); + POP.add({name: "gap_y", title: "Vertical gap:", value: DRAW.grid_size[1] }); + POP.show('Grid', function(response){ + if(response.visible == "Yes"){ + MAIN.grid = true; + gap_x = response.gap_x; + gap_y = response.gap_y; + DRAW.draw_grid(gap_x, gap_y); + } + else{ + MAIN.grid = false; + DRAW.draw_grid(); + } + }); + }; + //histogram + this.image_histogram = function(){ + TOOLS.histogram(); + }; + + //===== Layer ========================================================== + + //new layer + this.layer_new = function(){ + MENU.add_layer(); + }; + //dublicate + this.layer_dublicate = function(){ + MAIN.save_state(); + if(TOOLS.select_data != false){ + //selection + this.copy_to_clipboard(); + TOOLS.select_data = false; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + var tmp = LAYER.layer_active; + this.paste('menu'); + LAYER.layer_active = tmp; + LAYER.layer_renew(); + } + else{ + //copy all layer + tmp_data = document.createElement("canvas"); + tmp_data.width = WIDTH; + tmp_data.height = HEIGHT; + tmp_data.getContext("2d").drawImage(canvas_active(true), 0, 0); + + //create + var new_name = 'Layer #'+(LAYERS.length+1); + LAYER.create_canvas(new_name); + LAYERS.push({name: new_name, visible: true}); + LAYER.layer_active = LAYERS.length-1; + canvas_active().drawImage(tmp_data, 0, 0); + LAYER.layer_renew(); + } + }; + //show / hide + this.layer_show_hide = function(){ + LAYER.layer_visibility(LAYER.layer_active); + }; + //crop + this.layer_crop = function(){ + MAIN.save_state(); + if(TOOLS.select_data == false){ + POP.add({html: 'Select area first'}); + POP.show('Error', ''); + } + else{ + var layer = LAYER.canvas_active(); + + var tmp = layer.getImageData(TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h); + layer.clearRect(0, 0, WIDTH, HEIGHT); + layer.putImageData(tmp, 0, 0); + + TOOLS.select_data = false; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + } + }; + //delete + this.layer_delete = function(){ + MAIN.save_state(); + LAYER.layer_remove(LAYER.layer_active); + }; + //move up + this.layer_move_up = function(){ + MAIN.save_state(); + LAYER.move_layer('up'); + }; + //move down + this.layer_move_down = function(){ + MAIN.save_state(); + LAYER.move_layer('down'); + }; + //opacity + this.layer_opacity = function(){ + LAYER.set_alpha(); + }; + //trim + this.layer_trim = function(){ + MAIN.save_state(); + DRAW.trim(LAYERS[LAYER.layer_active].name, true); + }; + //resize + this.layer_resize = function(){ + MENU.resize_box(); + }; + //clear + this.layer_clear = function(){ + MAIN.save_state(); + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + }; + //show differences + this.layer_differences = function(){ + if(parseInt(LAYER.layer_active) + 1 >= LAYERS.length){ + POP.add({html: 'This can not be last layer' }); + POP.show('Error', ''); + return false; + } + + POP.add({name: "param1", title: "Sensitivity:", value: "0", range: [0, 255] }); + POP.show('Differences', function(response){ + var param1 = parseInt(response.param1); + TOOLS.calc_differences(param1); + }, + function(user_response, canvas_preview, w, h){ + var param1 = parseInt(user_response.param1); + TOOLS.calc_differences(param1, canvas_preview, w, h); + }); + }; + //merge + this.layer_merge_down = function(){ + var compositions = ["source-over", "source-in", "source-out", "source-atop", + "destination-over", "destination-in", "destination-out", "destination-atop", + "lighter", "darker", "copy", "xor"]; + + var blend_modes = ["normal", "multiply", "screen", "overlay", "darken", "lighten", + "color-dodge", "color-burn", "hard-light", "soft-light", "difference", + "exclusion", "hue", "saturation", "color", "luminosity"]; + + if(parseInt(LAYER.layer_active) + 1 >= LAYERS.length){ + POP.add({html: 'This can not be last layer.' }); + POP.show('Error', ''); + return false; + } + POP.add({name: "param1", title: "Composition:", values: compositions }); + POP.add({name: "param2", title: "Blend:", values: blend_modes }); + POP.add({name: "param3", title: "Mode:", values: ["Composite", "Blend"] }); + POP.show('Merge', function(response){ + var param1 = response.param1; + var param2 = response.param2; + var param3 = response.param3; + + MAIN.save_state(); + //copy + LAYER.layer_active++; + var tmp_data = document.createElement("canvas"); + tmp_data.width = WIDTH; + tmp_data.height = HEIGHT; + tmp_data.getContext("2d").drawImage(LAYER.canvas_active(true), 0, 0); + + //paste + LAYER.layer_active--; + LAYER.canvas_active().save(); + if(param3 == "Composite") + LAYER.canvas_active().globalCompositeOperation = param1; + else + LAYER.canvas_active().globalCompositeOperation = param2; + LAYER.canvas_active().drawImage(tmp_data, 0, 0); + LAYER.canvas_active().restore(); + + //remove next layer + LAYER.layer_remove(LAYER.layer_active+1); + LAYER.layer_renew(); + }, + function(response, canvas_preview, w, h){ + var param1 = response.param1; + var param2 = response.param2; + var param3 = response.param3; + + //copy + LAYER.layer_active++; + var tmp_data = document.createElement("canvas"); + tmp_data.width = w; + tmp_data.height = h; + tmp_data.getContext("2d").drawImage(LAYER.canvas_active(true), 0, 0, WIDTH, HEIGHT, 0, 0, w, h); + + //paste + LAYER.layer_active--; + canvas_preview.save(); + if(param3 == "Composite") + canvas_preview.globalCompositeOperation = param1; + else + canvas_preview.globalCompositeOperation = param2; + canvas_preview.drawImage(tmp_data, 0, 0); + canvas_preview.restore(); + }); + }; + //flatten all + this.layer_flatten = function(){ + MAIN.save_state(); + if(LAYERS.length == 1) return false; + tmp_data = document.createElement("canvas"); + tmp_data.width = WIDTH; + tmp_data.height = HEIGHT; + for(var i=1; i < LAYERS.length; i++){ + //copy + LAYER.layer_active = i; + tmp_data.getContext("2d").clearRect(0, 0, WIDTH, HEIGHT); + tmp_data.getContext("2d").drawImage(canvas_active(true), 0, 0); + + //paste + LAYER.layer_active = 0; + canvas_active().drawImage(tmp_data, 0, 0); + } + for(var i=LAYERS.length - 1; i > 0; i--){ + //delete layer + LAYER.layer_active = i; + LAYER.layer_remove(LAYER.layer_active); + } + LAYER.layer_renew(); + }; + + //===== Tools ========================================================== + + //sprites + this.tools_sprites = function(){ + POP.add({name: "param1", title: "Offset:", value: "50", values: ["0", "10", "50", "100"] }); + POP.show('Sprites', function(response){ + MAIN.save_state(); + var param1 = parseInt(response.param1); + TOOLS.generate_sprites(param1); + }); + }; + //show keypoints + this.tools_keypoints = function(){ + SIFT.generate_keypoints(canvas_active(true), true); + }; + //create panorama + this.tools_panorama = function(){ + SIFT.panorama(); + }; + //extract alpha channel + this.tools_color2alpha = function(){ + POP.add({name: "param1", title: "Color:", value: COLOUR, type: 'color' }); + POP.show('Color to alpha', function(user_response){ + MAIN.save_state(); + var param1 = user_response.param1; + TOOLS.convert_color_to_alpha(canvas_active(), WIDTH, HEIGHT, param1); + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var param1 = user_response.param1; + TOOLS.convert_color_to_alpha(canvas_preview, w, h, param1); + }); + }; + //expands colors + this.tools_color_zoom = function(){ + POP.add({name: "param1", title: "Zoom:", value: "2", range: [2, 20], }); + POP.add({name: "param2", title: "Center:", value: "128", range: [0, 255] }); + POP.show('Color Zoom', function(user_response){ + MAIN.save_state(); + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + + TOOLS.color_zoom(canvas_active(), WIDTH, HEIGHT, param1, param2); + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + + TOOLS.color_zoom(canvas_preview, w, h, param1, param2); + }); + }; + //recover alpha channel values + this.tools_restore_alpha = function(){ + POP.add({name: "param", title: "Level:", value: "128", range: [0, 255] }); + POP.show('Recover alpha', function(user_response){ + MAIN.save_state(); + var param = parseInt(user_response.param); + + TOOLS.recover_alpha(canvas_active(), WIDTH, HEIGHT, param); + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var param = parseInt(user_response.param); + + TOOLS.recover_alpha(canvas_preview, w, h, param); + }); + }; + //adds borders + this.tools_borders = function(){ + POP.add({name: "param1", title: "Color:", value: COLOUR, type: 'color' }); + POP.add({name: "param2", title: "Size:", value: "5", range: [1, 100] }); + POP.show('Borders', function(user_response){ + MAIN.save_state(); + var param1 = user_response.param1; + var param2 = parseInt(user_response.param2); + + MENU.add_layer(); + TOOLS.add_borders(canvas_active(), WIDTH, HEIGHT, param1, param2); + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var param1 = user_response.param1; + var param2 = parseInt(user_response.param2); + + TOOLS.add_borders(canvas_preview, w, h, param1, param2); + }); + }; + + //===== Effects ======================================================== + + this.effects_bw = function(){ + var default_level = TOOLS.thresholding('otsu', canvas_active(), WIDTH, HEIGHT, true); + POP.add({name: "param1", title: "Level:", value: default_level, range: [0, 255] }); + POP.add({name: "param2", title: "Dithering:", values: ['No', 'Yes'], onchange: "MENU.effects_bw_onchange()" }); + POP.effects = true; + POP.show('Black and White', function(user_response){ + MAIN.save_state(); + var param1 = parseInt(user_response.param1); + var param2 = false; + if(user_response.param2 == 'Yes') + param2 = true; + + DRAW.effect_bw(canvas_active(), WIDTH, HEIGHT, param1, param2); + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var param1 = parseInt(user_response.param1); + var param2 = false; + if(user_response.param2 == 'Yes') + param2 = true; + + DRAW.effect_bw(canvas_preview, w, h, param1, param2); + }); + }; + this.effects_bw_onchange = function(){ + var levels = document.getElementById("pop_data_param1"); + var dithering_no = document.getElementById("pop_data_param2_poptmp0"); + var dithering_yes = document.getElementById("pop_data_param2_poptmp1"); + + if(dithering_no.checked == true) levels.disabled = false; + else if(dithering_yes.checked == true) levels.disabled = true; + + POP.view(); + }; + this.effects_BoxBlur = function(){ + POP.add({name: "param1", title: "H Radius:", value: "3", range: [1, 20] }); + POP.add({name: "param2", title: "V Radius:", value: "3", range: [1, 20] }); + POP.add({name: "param3", title: "Quality:", value: "2", range: [1, 10] }); + POP.effects = true; + POP.show('Blur-Box', function(user_response){ + MAIN.save_state(); + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + var param3 = parseInt(user_response.param3); + + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.BoxBlur(imageData, param1, param2, param3); //add effect + canvas_active().putImageData(filtered, 0, 0); + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + var param3 = parseInt(user_response.param3); + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.BoxBlur(imageData, param1, param2, param3); //add effect + canvas_preview.putImageData(filtered, 0, 0); + }); + }; + this.effects_GaussianBlur = function(){ + POP.add({name: "param1", title: "Strength:", value: "2", range: [1, 4], step: 0.1 }); + POP.effects = true; + POP.show('Blur-Gaussian', function(user_response){ + MAIN.save_state(); + var param1 = parseFloat(user_response.param1); + + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.GaussianBlur(imageData, param1); //add effect + canvas_active().putImageData(filtered, 0, 0); + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var param1 = parseFloat(user_response.param1); + + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.GaussianBlur(imageData, param1); //add effect + canvas_preview.putImageData(filtered, 0, 0); + }); + }; + this.effects_StackBlur = function(){ + POP.add({name: "param1", title: "Radius:", value: "6", range: [1, 40] }); + POP.effects = true; + POP.show('Blur-Stack', function(user_response){ + MAIN.save_state(); + var param1 = parseInt(user_response.param1); + + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.StackBlur(imageData, param1); //add effect + canvas_active().putImageData(filtered, 0, 0); + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var param1 = parseInt(user_response.param1); + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.StackBlur(imageData, param1); //add effect + canvas_preview.putImageData(filtered, 0, 0); + }); + }; + this.effects_zoomblur = function(){ + POP.add({name: "param1", title: "Strength:", value: "0.3", range: [0, 1], step: 0.01 }); + POP.add({name: "param2", title: "Center x:", value: round(WIDTH/2), range: [0, WIDTH] }); + POP.add({name: "param3", title: "Center y:", value: round(HEIGHT/2), range: [0, HEIGHT] }); + POP.effects = true; + POP.show('Blur-Zoom', function(user_response){ + MAIN.save_state(); + var param1 = parseFloat(user_response.param1); + var param2 = parseInt(user_response.param2); + var param3 = parseInt(user_response.param3); + + var texture = fx_filter.texture(canvas_active(true)); + fx_filter.draw(texture).zoomBlur(param2, param3, param1).update(); //effect + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + canvas_active().drawImage(fx_filter, 0, 0); + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var param1 = parseFloat(user_response.param1); + var param2 = parseInt(user_response.param2); + var param3 = parseInt(user_response.param3); + + //recalc param by size + param2 = param2 / WIDTH * w; + param3 = param3 / HEIGHT * h; + + var texture = fx_filter.texture(canvas_preview.getImageData(0, 0, w, h)); + fx_filter.draw(texture).zoomBlur(param2, param3, param1).update(); //effect + canvas_preview.drawImage(fx_filter, 0, 0); + + //draw circle + canvas_preview.beginPath(); + canvas_preview.strokeStyle = "#ff0000"; + canvas_preview.lineWidth = 1; + canvas_preview.beginPath(); + canvas_preview.arc(param2, param3, 5, 0,Math.PI*2,true); + canvas_preview.stroke(); + }); + }; + this.effects_bulge_pinch = function(){ + POP.add({name: "param1", title: "Strength:", value: 1, range: [-1, 1], step: 0.1 }); + var default_value = Math.min(WIDTH, HEIGHT); + default_value = round(default_value/2); + POP.add({name: "param2", title: "Radius:", value: default_value, range: [0, 600] }); + POP.effects = true; + POP.show('Bulge/Pinch', function(user_response){ + MAIN.save_state(); + var param1 = parseFloat(user_response.param1); + var param2 = parseInt(user_response.param2); + + var texture = fx_filter.texture(canvas_active(true)); + fx_filter.draw(texture).bulgePinch(round(WIDTH/2), round(HEIGHT/2), param2, param1).update(); //effect + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + canvas_active().drawImage(fx_filter, 0, 0); + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var param1 = parseFloat(user_response.param1); + var param2 = parseInt(user_response.param2); + + //recalc param by size + param2 = param2 / Math.min(WIDTH, HEIGHT) * Math.min(w, h); + + var texture = fx_filter.texture(canvas_preview.getImageData(0, 0, w, h)); + fx_filter.draw(texture).bulgePinch(round(w/2), round(h/2), param2, param1).update(); //effect + canvas_preview.drawImage(fx_filter, 0, 0); + }); + }; + this.effects_colorize = function(){ + var colorize_data; + + POP.add({name: "param1", title: "Power:", value: "3", range: [1, 10] }); + POP.add({name: "param2", title: "Limit:", value: "30", range: [10, 200] }); + POP.add({name: "param3", title: "Dithering:", values: ["Yes", "No"] }); + POP.preview_in_main = true; + POP.effects = true; + POP.show('Auto colorize', function(user_response){ + MAIN.save_state(); + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + if(user_response.param3 == 'Yes') param3 = true; else param3 = false; + + DRAW.colorize(canvas_active(), WIDTH, HEIGHT, param1, param2, param3, colorize_data); + DRAW.zoom(); + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + }, + function(user_response){ + POP.preview_in_main = true; + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + if(user_response.param3 == 'Yes') + param3 = true; + else + param3 = false; + + colorize_data = DRAW.colorize(false, WIDTH, HEIGHT, param1, param2, param3, true); + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + canvas_front.drawImage(canvas_active(true), 0, 0); + DRAW.colorize(canvas_front, WIDTH, HEIGHT, param1, param2, param3, colorize_data); + }); + }; + this.effects_denoise = function(){ + POP.add({name: "param1", title: "Exponent:", value: "20", range: [0, 50] }); + POP.effects = true; + POP.show('Denoise', function(user_response){ + MAIN.save_state(); + var param1 = parseFloat(user_response.param1); + + var texture = fx_filter.texture(canvas_active(true)); + fx_filter.draw(texture).denoise(param1).update(); //effect + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + canvas_active().drawImage(fx_filter, 0, 0); + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var param1 = parseFloat(user_response.param1); + + var texture = fx_filter.texture(canvas_preview.getImageData(0, 0, w, h)); + fx_filter.draw(texture).denoise(param1).update(); //effect + canvas_preview.drawImage(fx_filter, 0, 0); + }); + }; + this.effects_Desaturate = function(){ + POP.effects = true; + POP.show('Desaturate', function(user_response){ + MAIN.save_state(); + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Desaturate(imageData); //add effect + canvas_active().putImageData(filtered, 0, 0); + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.Desaturate(imageData); //add effect + canvas_preview.putImageData(filtered, 0, 0); + }); + }; + this.effects_Dither = function(){ + POP.add({name: "param1", title: "Levels:", value: "8", range: [2, 32] }); + POP.effects = true; + POP.show('Dither', function(user_response){ + MAIN.save_state(); + var param1 = parseInt(user_response.param1); + + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Dither(imageData, param1); //add effect + canvas_active().putImageData(filtered, 0, 0); + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var param1 = parseInt(user_response.param1); + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.Dither(imageData, param1); //add effect + canvas_preview.putImageData(filtered, 0, 0); + }); + }; + this.effects_dot_screen = function(){ + POP.add({name: "param2", title: "Size:", value: "3", range: [1, 20] }); + POP.effects = true; + POP.show('Dot Screen', function(user_response){ + MAIN.save_state(); + var param2 = parseInt(user_response.param2); + + var texture = fx_filter.texture(canvas_active(true)); + fx_filter.draw(texture).dotScreen(round(WIDTH/2), round(HEIGHT/2), 0, param2).update(); //effect + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + canvas_active().drawImage(fx_filter, 0, 0); + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var param2 = parseInt(user_response.param2); + + var texture = fx_filter.texture(canvas_preview.getImageData(0, 0, w, h)); + fx_filter.draw(texture).dotScreen(round(w/2), round(h/2), 0, param2).update(); //effect + canvas_preview.drawImage(fx_filter, 0, 0); + }); + }; + this.effects_Edge = function(){ + POP.effects = true; + POP.show('Edge', function(user_response){ + MAIN.save_state(); + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Edge(imageData); //add effect + canvas_active().putImageData(filtered, 0, 0); + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.Edge(imageData); //add effect + canvas_preview.putImageData(filtered, 0, 0); + }); + }; + this.effects_Emboss = function(){ + POP.effects = true; + POP.show('Emboss', function(user_response){ + MAIN.save_state(); + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Emboss(imageData); //add effect + canvas_active().putImageData(filtered, 0, 0); + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.Emboss(imageData); //add effect + canvas_preview.putImageData(filtered, 0, 0); + }); + }; + this.effects_Enrich = function(){ + POP.effects = true; + POP.show('Enrich', function(user_response){ + MAIN.save_state(); + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Enrich(imageData); //add effect + canvas_active().putImageData(filtered, 0, 0); + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.Enrich(imageData); //add effect + canvas_preview.putImageData(filtered, 0, 0); + }); + }; + this.effects_Gamma = function(){ + POP.add({name: "param1", title: "Gamma:", value: "1", range: [0, 3], step: 0.1 }); + POP.effects = true; + POP.show('Gamma', function(user_response){ + MAIN.save_state(); + var param1 = parseFloat(user_response.param1); + + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Gamma(imageData, param1); //add effect + canvas_active().putImageData(filtered, 0, 0); + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var param1 = parseFloat(user_response.param1); + + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.Gamma(imageData, param1); //add effect + canvas_preview.putImageData(filtered, 0, 0); + }); + }; + this.effects_Grains = function(){ + POP.effects = true; + POP.add({name: "param1", title: "Level:", value: "30", range: [0, 50] }); + POP.show('Grains', function(user_response){ + var param1 = parseInt(user_response.param1); + MAIN.save_state(); + TOOLS.grains_effect(canvas_active(), WIDTH, HEIGHT, param1); + }, + function(user_response, canvas_preview, w, h){ + var param1 = parseInt(user_response.param1); + TOOLS.grains_effect(canvas_preview, w, h, param1); + }); + }; + this.effects_heatmap = function(){ + POP.effects = true; + POP.show('Heatmap', function(user_response){ + MAIN.save_state(); + TOOLS.heatmap_effect(canvas_active(), WIDTH, HEIGHT); + }, + function(user_response, canvas_preview, w, h){ + TOOLS.heatmap_effect(canvas_preview, w, h); + }); + }; + this.effects_HSLAdjustment = function(){ + POP.add({name: "param1", title: "Hue:", value: "0", range: [-180, 180] }); + POP.add({name: "param2", title: "Saturation:", value: "0", range: [-100, 100] }); + POP.add({name: "param3", title: "Luminance:", value: "0", range: [-100, 100] }); + POP.effects = true; + POP.show('HSL Adjustment', function(user_response){ + MAIN.save_state(); + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + var param3 = parseInt(user_response.param3); + + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.HSLAdjustment(imageData, param1, param2, param3); //add effect + canvas_active().putImageData(filtered, 0, 0); + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + var param3 = parseInt(user_response.param3); + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.HSLAdjustment(imageData, param1, param2, param3); //add effect + canvas_preview.putImageData(filtered, 0, 0); + }); + }; + //ages photo saving it to jpg many times + this.effects_jpg_vintage = function(){ + POP.add({name: "param1", title: "Quality:", value: 80, range: [1, 100] }); + POP.effects = true; + POP.show('JPG Compression', function(user_response){ + MAIN.save_state(); + var quality = parseInt(user_response.param1); + if(quality>100 || quality < 1 || isNaN(quality)==true) + quality = 80; + quality = quality/100; + var data = canvas_active(true).toDataURL('image/jpeg', quality); + var img = new Image; + img.onload = function(){ + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + canvas_active().drawImage(img, 0, 0); + }; + img.src = data; + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var quality = parseInt(user_response.param1); + if(quality>100 || quality < 1 || isNaN(quality)==true) + quality = 80; + quality = quality/100; + var canvas_container = document.getElementById("pop_post"); + var data = canvas_container.toDataURL('image/jpeg', quality); + var img = new Image; + img.onload = function(){ + canvas_preview.clearRect(0, 0, w, h); + canvas_preview.drawImage(img, 0, 0); + }; + img.src = data; + }); + }; + this.effects_Mosaic = function(){ + POP.add({name: "param1", title: "Size:", value: "10", range: [1, 100] }); + POP.effects = true; + POP.show('Mosaic', function(user_response){ + MAIN.save_state(); + var param1 = parseInt(user_response.param1); + + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Mosaic(imageData, param1); //add effect + canvas_active().putImageData(filtered, 0, 0); + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var param1 = parseInt(user_response.param1); + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.Mosaic(imageData, param1); //add effect + canvas_preview.putImageData(filtered, 0, 0); + }); + }; + this.effects_Oil = function(){ + POP.add({name: "param1", title: "Range:", value: "2", range: [1, 5] }); + POP.add({name: "param2", title: "Levels:", value: "32", range: [1, 256] }); + POP.effects = true; + POP.show('Oil', function(user_response){ + MAIN.save_state(); + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Oil(imageData, param1, param2); //add effect + canvas_active().putImageData(filtered, 0, 0); + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.Oil(imageData, param1, param2); //add effect + canvas_preview.putImageData(filtered, 0, 0); + }); + }; + this.effects_perspective = function(){ + POP.add({name: "param1", title: "X1:", value: WIDTH/4, range: [0, WIDTH] }); + POP.add({name: "param2", title: "Y1:", value: HEIGHT/4, range: [0, HEIGHT] }); + POP.add({name: "param3", title: "X2:", value: WIDTH*3/4, range: [0, WIDTH] }); + POP.add({name: "param4", title: "Y2:", value: HEIGHT/4, range: [0, HEIGHT] }); + POP.add({name: "param5", title: "X3:", value: WIDTH*3/4, range: [0, WIDTH] }); + POP.add({name: "param6", title: "Y3:", value: HEIGHT*3/4, range: [0, HEIGHT] }); + POP.add({name: "param7", title: "X4:", value: WIDTH/4, range: [0, WIDTH] }); + POP.add({name: "param8", title: "Y4:", value: HEIGHT*3/4, range: [0, HEIGHT] }); + POP.preview_in_main = true; + POP.effects = true; + POP.show('Perspective', function(user_response){ + MAIN.save_state(); + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + var param3 = parseInt(user_response.param3); + var param4 = parseInt(user_response.param4); + var param5 = parseInt(user_response.param5); + var param6 = parseInt(user_response.param6); + var param7 = parseInt(user_response.param7); + var param8 = parseInt(user_response.param8); + + var texture = fx_filter.texture(canvas_active(true)); + fx_filter.draw(texture).perspective([WIDTH/4, HEIGHT/4, WIDTH*3/4, HEIGHT/4, WIDTH*3/4, HEIGHT*3/4, WIDTH/4, HEIGHT*3/4], [param1,param2,param3,param4,param5,param6,param7,param8]).update(); //effect + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + canvas_active().drawImage(fx_filter, 0, 0); + DRAW.zoom(); + }, + function(user_response){ + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + var param3 = parseInt(user_response.param3); + var param4 = parseInt(user_response.param4); + var param5 = parseInt(user_response.param5); + var param6 = parseInt(user_response.param6); + var param7 = parseInt(user_response.param7); + var param8 = parseInt(user_response.param8); + + canvas_front.rect(0, 0, WIDTH, HEIGHT); + canvas_front.fillStyle = "#ffffff"; + canvas_front.fill(); + + var texture = fx_filter.texture(canvas_active(true)); + fx_filter.draw(texture).perspective([WIDTH/4, HEIGHT/4, WIDTH*3/4, HEIGHT/4, WIDTH*3/4, HEIGHT*3/4, WIDTH/4, HEIGHT*3/4], [param1,param2,param3,param4,param5,param6,param7,param8]).update(); //effect + canvas_front.drawImage(fx_filter, 0, 0); + + pers_square(param1, param2); + pers_square(param3, param4); + pers_square(param5, param6); + pers_square(param7, param8); + }); + + function pers_square(x, y){ + canvas_front.beginPath(); + canvas_front.rect(x-round(CON.sr_size/2), y-round(CON.sr_size/2), CON.sr_size, CON.sr_size); + canvas_front.fillStyle = "#0000c8"; + canvas_front.fill(); + } + }; + this.effects_Posterize = function(){ + POP.add({name: "param1", title: "Levels:", value: "8", range: [2, 32] }); + POP.effects = true; + POP.show('Posterize', function(user_response){ + MAIN.save_state(); + var param1 = parseInt(user_response.param1); + + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Posterize(imageData, param1); //add effect + canvas_active().putImageData(filtered, 0, 0); + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var param1 = parseInt(user_response.param1); + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.Posterize(imageData, param1); //add effect + canvas_preview.putImageData(filtered, 0, 0); + }); + }; + this.effects_Sepia = function(){ + POP.effects = true; + POP.show('Sepia', function(user_response){ + MAIN.save_state(); + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Sepia(imageData); //add effect + canvas_active().putImageData(filtered, 0, 0); + }, + function(user_response, canvas_preview, w, h){ + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.Sepia(imageData); //add effect + canvas_preview.putImageData(filtered, 0, 0); + }); + }; + this.effects_Sharpen = function(){ + POP.add({name: "param1", title: "Factor:", value: "3", range: [1, 10], step: 0.1 }); + POP.effects = true; + POP.show('Sharpen', function(user_response){ + MAIN.save_state(); + var param1 = parseFloat(user_response.param1); + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Sharpen(imageData, param1); //add effect + canvas_active().putImageData(filtered, 0, 0); + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var param1 = parseFloat(user_response.param1); + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.Sharpen(imageData, param1); //add effect + canvas_preview.putImageData(filtered, 0, 0); + }); + }; + this.effects_Solarize = function(){ + POP.effects = true; + POP.show('Solarize', function(user_response){ + MAIN.save_state(); + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Solarize(imageData); //add effect + canvas_active().putImageData(filtered, 0, 0); + }, + function(user_response, canvas_preview, w, h){ + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.Solarize(imageData); //add effect + canvas_preview.putImageData(filtered, 0, 0); + }); + }; + this.effects_tilt_shift = function(){ + //extra + POP.add({name: "param7", title: "Saturation:", value: "5", range: [0, 100] }); + POP.add({name: "param8", title: "Sharpen:", value: "2", range: [1, 10] }); + //main + POP.add({name: "param1", title: "Blur Radius:", value: "15", range: [0, 50] }); + POP.add({name: "param2", title: "Gradient Radius:", value: "200", range: [0, 400] }); + //startX, startY, endX, endY + POP.add({name: "param3", title: "X start:", value: "0", range: [0, WIDTH] }); + POP.add({name: "param4", title: "Y start:", value: round(HEIGHT/2), range: [0, HEIGHT] }); + POP.add({name: "param5", title: "X end:", value: WIDTH, range: [0, WIDTH] }); + POP.add({name: "param6", title: "Y end:", value: round(HEIGHT/2), range: [0, HEIGHT] }); + POP.effects = true; + POP.show('Tilt Shift', function(user_response){ + MAIN.save_state(); + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + var param3 = parseInt(user_response.param3); + var param4 = parseInt(user_response.param4); + var param5 = parseInt(user_response.param5); + var param6 = parseInt(user_response.param6); + var param7 = parseInt(user_response.param7); + var param8 = parseInt(user_response.param8); + + //main effect + var texture = fx_filter.texture(canvas_active(true)); + fx_filter.draw(texture).tiltShift(param3, param4, param5, param6, param1, param2).update(); //effect + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + canvas_active().drawImage(fx_filter, 0, 0); + + //saturation + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.HSLAdjustment(imageData, 0, param7, 0); + canvas_active().putImageData(filtered, 0, 0); + + //sharpen + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Sharpen(imageData, param8); + canvas_active().putImageData(filtered, 0, 0); + + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + var param3 = parseInt(user_response.param3); + var param4 = parseInt(user_response.param4); + var param5 = parseInt(user_response.param5); + var param6 = parseInt(user_response.param6); + var param7 = parseInt(user_response.param7); + var param8 = parseInt(user_response.param8); + + //recalc param by size + var param3 = param3 / WIDTH * w; + var param4 = param4 / HEIGHT * h; + var param5 = param5 / WIDTH * w; + var param6 = param6 / HEIGHT * h; + + //main effect + var texture = fx_filter.texture(canvas_preview.getImageData(0, 0, w, h)); + fx_filter.draw(texture).tiltShift(param3, param4, param5, param6, param1, param2).update(); //effect + canvas_preview.drawImage(fx_filter, 0, 0); + + //draw line + canvas_preview.beginPath(); + canvas_preview.strokeStyle = "#ff0000"; + canvas_preview.lineWidth = 1; + canvas_preview.moveTo(param3 + 0.5, param4 + 0.5); + canvas_preview.lineTo(param5 + 0.5, param6 + 0.5); + canvas_preview.stroke(); + }); + }; + this.effects_vignette = function(){ + POP.add({name: "param1", title: "Size:", value: "0.5", range: [0, 1], step: 0.01 }); + POP.add({name: "param2", title: "Amount:", value: "0.5", range: [0, 1], step: 0.01 }); + POP.effects = true; + POP.show('Vignette', function(user_response){ + MAIN.save_state(); + var param1 = parseFloat(user_response.param1); + var param2 = parseFloat(user_response.param2); + + var texture = fx_filter.texture(canvas_active(true)); + fx_filter.draw(texture).vignette(param1, param2).update(); //effect + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + canvas_active().drawImage(fx_filter, 0, 0); + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var param1 = parseFloat(user_response.param1); + var param2 = parseFloat(user_response.param2); + + var texture = fx_filter.texture(canvas_preview.getImageData(0, 0, w, h)); + fx_filter.draw(texture).vignette(param1, param2).update(); //effect + canvas_preview.drawImage(fx_filter, 0, 0); + }); + }; + this.effects_vintage = function(){ + POP.add({name: "red_offset", title: "Color adjust:", value: "70", range: [0, 200] }); + POP.add({name: "contrast", title: "Contrast:", value: "15", range: [0, 50] }); + POP.add({name: "blur", title: "Blur:", value: "0", range: [0, 2], step: 0.1 }); + POP.add({name: "light_leak", title: "Light leak:", value: "90", range: [0, 150] }); + POP.add({name: "de_saturation", title: "Desaturation:", value: "40", range: [0, 100] }); + POP.add({name: "exposure", title: "Exposure level:", value: "80", range: [0, 150] }); + POP.add({name: "grains", title: "Grains level:", value: "20", range: [0, 50] }); + POP.add({name: "big_grains", title: "Big grains level:", value: "20", range: [0, 50] }); + POP.add({name: "vignette1", title: "Vignette size:", value: "0.3", range: [0, 0.5], step: 0.01 }); + POP.add({name: "vignette2", title: "Vignette amount:", value: "0.5", range: [0, 0.7], step: 0.01 }); + POP.add({name: "dust_level", title: "Dusts level:", value: "70", range: [0, 100] }); + POP.effects = true; + POP.show('Vintage', function(user_response){ + MAIN.save_state(); + var red_offset = parseInt(user_response.red_offset); + var contrast = parseInt(user_response.contrast); + var blur = parseFloat(user_response.blur); + var light_leak = parseInt(user_response.light_leak); + var de_saturation = parseInt(user_response.de_saturation); + var exposure = parseInt(user_response.exposure); + var grains = parseInt(user_response.grains); + var big_grains = parseInt(user_response.big_grains); + var vignette1 = parseFloat(user_response.vignette1); + var vignette2 = parseFloat(user_response.vignette2); + var dust_level = parseInt(user_response.dust_level); + + VINTAGE.adjust_color(canvas_active(), WIDTH, HEIGHT, red_offset); + VINTAGE.lower_contrast(canvas_active(), WIDTH, HEIGHT, contrast); + VINTAGE.blur(canvas_active(), WIDTH, HEIGHT, blur); + VINTAGE.light_leak(canvas_active(), WIDTH, HEIGHT, light_leak); + VINTAGE.chemicals(canvas_active(), WIDTH, HEIGHT, de_saturation); + VINTAGE.exposure(canvas_active(), WIDTH, HEIGHT, exposure); + VINTAGE.grains(canvas_active(), WIDTH, HEIGHT, grains); + VINTAGE.grains_big(canvas_active(), WIDTH, HEIGHT, big_grains); + VINTAGE.optics(canvas_active(), WIDTH, HEIGHT, vignette1, vignette2); + VINTAGE.dusts(canvas_active(), WIDTH, HEIGHT, dust_level); + DRAW.zoom(); + }, + function(user_response, canvas_preview, w, h){ + var red_offset = parseInt(user_response.red_offset); + var contrast = parseInt(user_response.contrast); + var blur = parseFloat(user_response.blur); + var light_leak = parseInt(user_response.light_leak); + var de_saturation = parseInt(user_response.de_saturation); + var exposure = parseInt(user_response.exposure); + var grains = parseInt(user_response.grains); + var big_grains = parseInt(user_response.big_grains); + var vignette1 = parseFloat(user_response.vignette1); + var vignette2 = parseFloat(user_response.vignette2); + var dust_level = parseInt(user_response.dust_level); + + VINTAGE.adjust_color(canvas_preview, w, h, red_offset); + VINTAGE.lower_contrast(canvas_preview, w, h, contrast); + VINTAGE.blur(canvas_preview, w, h, blur); + VINTAGE.light_leak(canvas_preview, w, h, light_leak); + VINTAGE.chemicals(canvas_preview, w, h, de_saturation); + VINTAGE.exposure(canvas_preview, w, h, exposure); + VINTAGE.grains(canvas_preview, w, h, grains); + VINTAGE.grains_big(canvas_preview, w, h, big_grains); + VINTAGE.optics(canvas_preview, w, h, vignette1, vignette2); + VINTAGE.dusts(canvas_preview, w, h, dust_level); + }); + }; + + //===== Help =========================================================== + + //shortcuts + this.help_shortcuts = function(){ + POP.add({title: "D", value: 'Dublicate' }); + POP.add({title: "Del", value: 'Delete selection' }); + POP.add({title: "F", value: 'Auto adjust colors' }); + POP.add({title: "G", value: 'Grid on/off' }); + POP.add({title: "L", value: 'Rotate left' }); + POP.add({title: "N", value: 'New layer' }); + POP.add({title: "O", value: 'Open file(s)' }); + POP.add({title: "R", value: 'Resize' }); + POP.add({title: "S", value: 'Save' }); + POP.add({title: "T", value: 'Trim' }); + POP.add({title: "-", value: 'Zoom out' }); + POP.add({title: "+", value: 'Zoom in' }); + POP.add({title: "CTRL + Z", value: 'Undo' }); + POP.add({title: "CTRL + A", value: 'Select all' }); + POP.add({title: "CTRL + V", value: 'Paste' }); + POP.add({title: "Arrow keys", value: 'Move active layer by 10px' }); + POP.add({title: "CTRL + Arrow keys", value: 'Move active layer by 50px' }); + POP.add({title: "SHIFT + Arrow keys",value: 'Move active layer by 1px' }); + POP.add({title: "Drag & Drop", value: 'Imports images/xml data' }); + POP.show('Keyboard Shortcuts', ''); + }; + //credits + this.help_credits = function(){ + for(var i in CREDITS){ + if(CREDITS[i].link != undefined) + POP.add({title: CREDITS[i].title, html: ''+CREDITS[i].name+'' }); + else + POP.add({title: CREDITS[i].title, html: CREDITS[i].name }); + } + POP.show('Credits', ''); + }; + //about + this.help_about = function(){ + POP.add({title: "Name:", value: "miniPaint "+VERSION }); + POP.add({title: "Description:", value: 'online image editor' }); + POP.add({title: "Author:", value: AUTHOR }); + POP.add({title: "Email:", html: ''+EMAIL+'' }); + POP.add({title: "Source:", html: 'github.com/viliusle/miniPaint' }); + POP.show('About', ''); + }; + + //====================================================================== + + this.save_dialog = function(e){ + //find default format + var save_default = SAVE_TYPES[0]; //png + if(HELPER.getCookie('save_default') == 'jpg') + save_default = SAVE_TYPES[1]; //jpg + + POP.add({name: "name", title: "File name:", value: [SAVE_NAME] }); + POP.add({name: "type", title: "Save as type:", values: SAVE_TYPES, value: save_default }); + POP.add({name: "quality", title: "Quality (1-100):", value: 90, range: [1, 100] }); + POP.add({name: "layers", title: "Save layers:", values: ['All', 'Selected'] }); + POP.add({name: "trim", title: "Trim:", values: ['No', 'Yes'] }); + POP.show('Save as ...', MENU.save); + document.getElementById("pop_data_name").select(); + if(e != undefined) + e.preventDefault(); + }; + this.add_layer = function(){ + MAIN.save_state(); + + var tmp = false; + var last_layer = LAYER.layer_active; + if(TOOLS.select_data != false){ + tmp = document.createElement("canvas"); + tmp.width = TOOLS.select_data.w; + tmp.height = TOOLS.select_data.h; + tmp.getContext("2d").drawImage(canvas_active(true), TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h, 0, 0, TOOLS.select_data.w, TOOLS.select_data.h); + } + + //crete layer + LAYER.layer_add(); + + if(TOOLS.select_data != false){ + //copy user selected data to new layer + canvas_active().drawImage(tmp, 0, 0); + LAYER.layer_renew(); + + //clear selection + TOOLS.select_data = false; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + + //switch back to old layer + LAYER.layer_active = last_layer; + LAYER.layer_renew(); + } + + }; + this.resize_custom = function(user_response){ + MAIN.save_state(); + CON.autosize = false; + if(user_response.width != WIDTH || user_response.height != HEIGHT){ + WIDTH = user_response.width; + HEIGHT = user_response.height; + RATIO = WIDTH/HEIGHT; + LAYER.set_canvas_size(); + } + }; + //prepare rotation - increase doc dimensions if needed + this.rotate_resize_doc = function(angle, w, h){ + var o = angle*Math.PI/180; + var new_x = w * Math.abs(Math.cos(o)) + h * Math.abs(Math.sin(o)); + var new_y = w * Math.abs(Math.sin(o)) + h * Math.abs(Math.cos(o)); + new_x = Math.ceil(round(new_x*1000)/1000); + new_y = Math.ceil(round(new_y*1000)/1000); + + if(WIDTH != new_x || HEIGHT != new_y){ + MAIN.save_state(); + var dx = 0; + var dy = 0; + if(new_x > WIDTH){ + dx = Math.ceil(new_x - WIDTH)/2; + WIDTH = new_x; + } + if(new_y > HEIGHT){ + dy = Math.ceil(new_y - HEIGHT)/2; + HEIGHT = new_y; + } + RATIO = WIDTH/HEIGHT; + LAYER.set_canvas_size(); + + for(var i in LAYERS){ + var layer = document.getElementById(LAYERS[i].name).getContext("2d"); + + var tmp = layer.getImageData(0, 0, WIDTH, HEIGHT); + layer.clearRect(0, 0, WIDTH, HEIGHT); + layer.putImageData(tmp, dx, dy); + } + } + }; + //rotate layer + this.rotate_layer = function(user_response, canvas, w, h){ + var TO_RADIANS = Math.PI/180; + angle = user_response.angle; + var tempCanvas = document.createElement("canvas"); + var tempCtx = tempCanvas.getContext("2d"); + tempCanvas.width = w; + tempCanvas.height = h; + var imageData = canvas.getImageData(0, 0, w, h); + tempCtx.putImageData(imageData, 0, 0); + + //rotate + canvas.clearRect(0, 0, w, h); + canvas.save(); + canvas.translate(round(w/2), round(h/2)); + canvas.rotate(angle * TO_RADIANS); + canvas.drawImage(tempCanvas, -round(w/2), -round(h/2)); + canvas.restore(); + if(w == WIDTH) //if main canvas + DRAW.zoom(); + }; + this.copy_to_clipboard = function(){ + PASTE_DATA = false; + PASTE_DATA = document.createElement("canvas"); + PASTE_DATA.width = TOOLS.select_data.w; + PASTE_DATA.height = TOOLS.select_data.h; + PASTE_DATA.getContext("2d").drawImage(canvas_active(true), TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h, 0, 0, TOOLS.select_data.w, TOOLS.select_data.h); + }; + this.paste = function(type){ + if(PASTE_DATA == false){ + if(type == 'menu'){ + POP.add({title: "Error:", value: 'Empty data' }); + POP.add({title: "Notice:", value: 'To paste from clipboard, use Ctrl-V.' }); + POP.show('Notice', ''); + } + return false; + } + + tmp = new Array(); + var new_name = 'Layer #'+(LAYERS.length+1); + LAYER.create_canvas(new_name); + LAYERS.push({name: new_name, visible: true}); + LAYER.layer_active = LAYERS.length-1; + canvas_active().drawImage(PASTE_DATA, 0, 0); + LAYER.layer_renew(); + }; + this.resize_box = function(){ + POP.add({name: "width", title: "Enter new width:", value: '', placeholder:WIDTH }); + POP.add({name: "height",title: "Enter new height:", value: '', placeholder:HEIGHT }); + POP.add({name: "mode", title: "Mode:", value: "Resample - Hermite", values: ["Resize", "Resample - Hermite"]}); + POP.add({name: "preblur",title: "Pre-Blur:", values: ["Yes", "No"], value: "No" }); + POP.add({name: "sharpen",title: "Apply sharpen:", values: ["Yes", "No"], value: "No" }); + POP.show('Resize', MENU.resize_layer); + }; + this.resize_layer = function(user_response){ + MAIN.save_state(); + var width = parseInt(user_response.width); + var height = parseInt(user_response.height); + var preblur = user_response.preblur; + var sharpen = user_response.sharpen; + if( (isNaN(width) || width<1) && (isNaN(height) || height<1) ) return false; + if(width == WIDTH && height == HEIGHT) return false; + + //if only 1 dimension was provided + if(isNaN(width) || isNaN(height)){ + if(isNaN(width) || width<1) + width = Math.round(height * RATIO); + if(isNaN(height) || height<1) + height = Math.round(width / RATIO); + } + + //if increasing size - use simple way - its good enough + if(width > WIDTH || height > HEIGHT) + user_response.mode = "Resize"; + + //anti-artifacting? + if(preblur == 'Yes'){ + var ratio_w = WIDTH / width; + var ratio_h = HEIGHT / height; + var ratio_avg = Math.max(ratio_w, ratio_h); + var power = ratio_avg * 0.3; + if(power > 0.6){ + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.GaussianBlur(imageData, power); //add effect + canvas_active().putImageData(filtered, 0, 0); + } + } + if(width > WIDTH || height > HEIGHT) + user_response.mode = "Resize"; + //Hermite - good and fast + if(user_response.mode == "Resample - Hermite"){ + DRAW.resample_hermite(canvas_active(true), WIDTH, HEIGHT, width, height); + if(MENU.last_menu != 'layer_resize'){ + WIDTH = width; + HEIGHT = height; + if(WIDTH<1) WIDTH = 1; + if(HEIGHT<1) HEIGHT = 1; + RATIO = WIDTH/HEIGHT; + LAYER.set_canvas_size(); + } + DRAW.zoom(); + } + //simple resize + if(user_response.mode == "Resize"){ + //simple resize - FAST + tmp_data = document.createElement("canvas"); + tmp_data.width = WIDTH; + tmp_data.height = HEIGHT; + tmp_data.getContext("2d").drawImage(canvas_active(true), 0, 0); + + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + if(width <= WIDTH){ + canvas_active().drawImage(tmp_data, 0, 0, width, height); + } + else{ + WIDTH = round(width); + HEIGHT = round(height); + RATIO = WIDTH/HEIGHT; + LAYER.set_canvas_size(); + canvas_active().drawImage(tmp_data, 0, 0, width, height); + } + if(MENU.last_menu != 'layer_resize') + DRAW.trim(); + DRAW.zoom(); + } + //sharpen after? + if(sharpen == 'Yes'){ + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Sharpen(imageData, 1); //add effect + canvas_active().putImageData(filtered, 0, 0); + } + }; + this.save = function(user_response){ + fname = user_response.name; + var tempCanvas = document.createElement("canvas"); + var tempCtx = tempCanvas.getContext("2d"); + tempCanvas.width = WIDTH; + tempCanvas.height = HEIGHT; + + //save choosen type + var save_default = SAVE_TYPES[0]; //png + if(HELPER.getCookie('save_default') == 'jpg') + save_default = SAVE_TYPES[1]; //jpg + if(user_response.type != save_default && user_response.type == SAVE_TYPES[0]) + HELPER.setCookie('save_default', 'png' , 30); + else if(user_response.type != save_default && user_response.type == SAVE_TYPES[1]) + HELPER.setCookie('save_default', 'jpg' , 30); + + if(MAIN.TRANSPARENCY == false){ + tempCtx.beginPath(); + tempCtx.rect(0, 0, WIDTH, HEIGHT); + tempCtx.fillStyle = "#ffffff"; + tempCtx.fill(); + } + + //take data + for(var i in LAYERS){ + if(LAYERS[i].visible == false) continue; + if(user_response.layers == 'Selected' && user_response.type != 'XML' && i != LAYER.layer_active) continue; + tempCtx.drawImage(document.getElementById(LAYERS[i].name), 0, 0, WIDTH, HEIGHT); + } + + if(user_response.trim == 'Yes' && user_response.type != 'XML'){ + //trim + var trim_info = DRAW.trim_info(tempCanvas); + tmp_data = tempCtx.getImageData(0, 0, WIDTH, HEIGHT); + tempCtx.clearRect(0, 0, WIDTH, HEIGHT); + tempCanvas.width = WIDTH - trim_info.right - trim_info.left; + tempCanvas.height = HEIGHT - trim_info.bottom - trim_info.top; + tempCtx.putImageData(tmp_data, -trim_info.left, -trim_info.top); + } + + //detect type + var parts = user_response.type.split(" "); + user_response.type = parts[0]; + + //auto detect? + if(HELPER.strpos(fname, '.png') !== false) user_response.type = 'PNG'; + else if(HELPER.strpos(fname, '.jpg') !== false) user_response.type = 'JPG'; + else if(HELPER.strpos(fname, '.xml') !== false) user_response.type = 'XML'; + else if(HELPER.strpos(fname, '.bmp') !== false) user_response.type = 'BMP'; + else if(HELPER.strpos(fname, '.webp') !== false) user_response.type = 'WEBP'; + + //prepare data + if(user_response.type == 'PNG'){ + //png - default format + var data = tempCanvas.toDataURL("image/png"); + var data_header = "image/png"; + if(HELPER.strpos(fname, '.png')==false) + fname = fname+".png"; + } + else if(user_response.type == 'JPG'){ + //jpg + var quality = parseInt(user_response.quality); + if(quality>100 || quality < 1 || isNaN(quality)==true) + quality = 90; + quality = quality/100; + var data = tempCanvas.toDataURL('image/jpeg', quality); + var data_header = "image/jpeg"; + if(HELPER.strpos(fname, '.jpg')==false) + fname = fname+".jpg"; + } + else if(user_response.type == 'BMP'){ + //bmp - lets hope user really needs this - chrome do not support it + var data = tempCanvas.toDataURL("image/bmp"); + var data_header = "image/bmp"; + if(HELPER.strpos(fname, '.bmp')==false) + fname = fname+".bmp"; + } + else if(user_response.type == 'WEBP'){ + //WEBP - new format for chrome only + if(HELPER.strpos(fname, '.webp')==false) + fname = fname+".webp"; + var data_header = "image/webp"; + var data = tempCanvas.toDataURL("image/webp"); + } + else if(user_response.type == 'XML'){ + //xml - full data with layers + if(HELPER.strpos(fname, '.xml')==false) + fname = fname+".xml"; + var data_header = "text/plain"; + + var XML = ''; + //basic info + XML += "\n"; + XML += " \n"; + XML += " "+WIDTH+"\n"; + XML += " "+HEIGHT+"\n"; + XML += " \n"; + //add layers info + XML += " \n"; + for(var i in LAYERS){ + XML += " \n"; + XML += " "+LAYERS[i].name+"\n"; + if(LAYERS[i].visible == true) + XML += " 1\n"; + else + XML += " 0\n"; + XML += " "+LAYERS[i].opacity+"\n"; + XML += " \n"; + } + XML += " \n"; + //add data ??? + XML += " \n"; + for(var i in LAYERS){ + var data_tmp = document.getElementById(LAYERS[i].name).toDataURL("image/png"); + XML += " \n"; + XML += " "+LAYERS[i].name+"\n"; + XML += " "+data_tmp+"\n"; + XML += " \n"; + } + XML += " \n"; + XML += "\n"; + + var bb = new Blob([XML], {type: data_header}); + var data = window.URL.createObjectURL(bb); + } + else + return false; + + //check support + var actualType = data.replace(/^data:([^;]*).*/, '$1'); + if(data_header != actualType && data_header != "text/plain"){ + //error - no support + POP.add({title: "Error:", value: "Your browser do not support "+user_response.type }); + POP.show('Sorry', ''); + return false; + } + + //push data to user + window.URL = window.webkitURL || window.URL; + var a = document.createElement('a'); + if (typeof a.download != "undefined"){ + //a.download is supported + a.setAttribute("id", "save_data"); + a.download = fname; + a.href = data; + a.textContent = 'Downloading...'; + document.getElementById("tmp").appendChild(a); + + //release memory + a.onclick = function(e){ + MENU.save_cleanup(this); + }; + //force click + document.querySelector('#save_data').click(); + } + else{ + //poor browser or poor user - not sure here. No support + if(user_response.type == 'PNG') + window.open(data); + else if(user_response.type == 'JPG') + window.open(data, quality); + } + }; + this.save_cleanup = function(a){ + a.textContent = 'Downloaded'; + setTimeout(function(){ + a.href = ''; + var element = document.getElementById("save_data"); + element.parentNode.removeChild(element); + }, 1500); + }; + this.open = function(){ + document.getElementById("tmp").innerHTML = ''; + var a = document.createElement('input'); + a.setAttribute("id", "file_open"); + a.type = 'file'; + a.multiple = 'multiple '; + document.getElementById("tmp").appendChild(a); + document.getElementById('file_open').addEventListener('change', MENU.open_handler, false); + + //force click + document.querySelector('#file_open').click(); + }; + this.open_handler = function(e){ + var files = e.target.files; + for (var i = 0, f; i < files.length; i++){ + f = files[i]; + if(!f.type.match('image.*') && f.type != 'text/xml') continue; + if(files.length == 1) + SAVE_NAME = f.name.split('.')[f.name.split('.').length - 2]; + + var FR = new FileReader(); + FR.file = e.target.files[i]; + + FR.onload = function(event){ + if(this.file.type != 'text/xml'){ + //image + LAYER.layer_add(this.file.name, event.target.result, this.file.type); + EXIF.getData(this.file, TOOLS.save_EXIF); + } + else{ + //xml + var responce = MAIN.load_xml(event.target.result); + if(responce === true) + return false; + } + + //finish progress + var progress = document.getElementById('uploadprogress'); + progress.value = progress.innerHTML = 100; + progress.style.display='none'; + }; + FR.onprogress = (function(e){ + return function(e){ + var complete = (e.loaded / e.total * 100 | 0); + var progress = document.getElementById('uploadprogress'); + progress.value = progress.innerHTML = complete; + }; + })(f); + if(f.type == "text/plain") + FR.readAsText(f); + else if(f.type == "text/xml") + FR.readAsText(f); + else + FR.readAsDataURL(f); + } + }; + } diff --git a/js/settings.js b/js/settings.js index 7a5625a..6e21716 100644 --- a/js/settings.js +++ b/js/settings.js @@ -1,90 +1,90 @@ -//canvas layers -var canvas_back = document.getElementById("canvas_back").getContext("2d"); //layer for grid/transparency -var canvas_main = document.getElementById("Background").getContext("2d"); //background -//new layers insert convas here -var canvas_front = document.getElementById("canvas_front").getContext("2d"); //tmp layer -var canvas_grid = document.getElementById("canvas_grid").getContext("2d"); //grid layer -var canvas_preview = document.getElementById("canvas_preview").getContext("2d"); //mini preview - -//settings -var AUTHOR = 'ViliusL'; -var EMAIL = 'www.viliusl@gmail.com'; -var VERSION = '2.1'; -var WIDTH = 1152; //canvas midth -var HEIGHT = 648; //canvas height -var RATIO = WIDTH/HEIGHT; //width & height ratio -var LAYERS = []; //layers data -var ACTION = 'select_tool'; ///default action -var COLOUR = '#0000ff'; //current color -var ZOOM = 100; //zoom level 10 - infinity -var ALPHA = 255; //default alpha -var SAVE_NAME = 'example'; //default save name - -var SAVE_TYPES = [ - "PNG - Portable Network Graphics", //default - "JPG - JPG/JPEG Format", //autodetect on photos where png useless? - "XML - Full layers data", //aka PSD - "BMP - Windows Bitmap", //firefox only, useless? - "WEBP - Weppy File Format", //chrome only - ]; - -var ACTION_DATA = [ - {name: 'select_tool', title: 'Select object tool', icon: ['all.png', 0+7, 2], attributes: {} }, - {name: 'select_square', title: 'Select area tool', icon: ['all.png', -50+4, 5], attributes: {} }, - {name: 'magic_wand', title: 'Magic Wand Tool', icon: ['all.png', -150+1, -50+2], attributes: {sensitivity: 40, anti_aliasing: true} }, - {name: 'erase', title: 'Erase', icon: ['all.png', -100+3, 4], attributes: {size: 20, circle: true, strict: true} }, - {name: 'fill', title: 'Fill', icon: ['all.png', -150+3, 3], attributes: {sensitivity: 0, anti_aliasing: false} }, - {name: 'pick_color', title: 'Pick Color', icon: ['all.png', -200+3, 3], attributes: {} }, - {name: 'pencil', title: 'Pencil', icon: ['all.png', -250+3, 3], attributes: {} }, - {name: 'line', title: 'Draw line', icon: ['all.png', -300+3, 3], attributes: {size: 1, type_values: ['Simple', 'Multi-line', 'Arrow', 'Curve'] } }, - {name: 'letters', title: 'Draw letters', icon: ['all.png', -350+3, 4], attributes: {} }, - {name: 'draw_square', title: 'Draw rectangle', icon: ['all.png', -400+3, 5], attributes: {fill: false, square: false, round: 0} }, - {name: 'draw_circle', title: 'Draw circle', icon: ['all.png', -450+3, 5], attributes: {fill: false, circle: false} }, - {name: 'brush', title: 'Brush', icon: ['all.png', -500+6, 3], attributes: {type: 'Brush', type_values: ['Brush', 'BezierCurve', 'Chrome', 'Fur', 'Grouped', 'Shaded', 'Sketchy'], size: 5, anti_alias: false }, on_update: 'update_brush', }, - {name: 'blur_tool', title: 'Blur tool', icon: ['all.png', -250+5, -50+2], attributes: {size: 30, strength: 1} }, - {name: 'sharpen_tool', title: 'Sharpen tool', icon: ['all.png', -300+5, -50+2], attributes: {size: 30, strength: 0.5} }, - {name: 'burn_dodge_tool', title: 'Burn/Dodge tool', icon: ['all.png', -500+3, -50+4], attributes: {burn: true, size: 30, power: 50} }, - {name: 'desaturate_tool', title: 'Desaturate', icon: ['all.png', -550+3, -00+4], attributes: {size: 50, anti_alias: true} }, - {name: 'clone_tool', title: 'Clone tool', icon: ['all.png', -350+4, -50+3], attributes: {size: 30, anti_alias: true} }, - {name: 'gradient_tool', title: 'Gradient', icon: ['all.png', -400+3, -50+4], attributes: {radial: false, power: 50} }, - {name: 'crop_tool', title: 'Crop', icon: ['all.png', -450+2, -50+2], attributes: { } }, - ]; - -var CREDITS = [ - {title: 'Brush styles', name: 'Harmony', link: 'http://ricardocabello.com/blog/post/689' }, - {title: 'Effects library', name: 'glfx.js', link: 'http://evanw.github.io/glfx.js/' }, - {title: 'EXIF', name: 'exif.js', link: 'https://github.com/jseidelin/exif-js' }, - {title: 'Image filters', name: 'ImageFilters.js',link: 'https://github.com/arahaya/ImageFilters.js' }, - {title: 'KD-tree', name: 'kdtree.js', link: 'http://jsdo.it/peko/wKvk' }, - ]; - -var FILTERS_LIST = [ - {title: 'Black and White', name: 'effects_bw' }, - {title: 'Blur-Box', name: 'effects_BoxBlur' }, - {title: 'Blur-Gaussian', name: 'effects_GaussianBlur' }, - {title: 'Blur-Stack', name: 'effects_StackBlur' }, - {title: 'Blur-Zoom', name: 'effects_zoomblur' }, - {title: 'Bulge/Pinch', name: 'effects_bulge_pinch' }, - {title: 'Colorize', name: 'effects_colorize' }, - {title: 'Denoise', name: 'effects_denoise' }, - {title: 'Desaturate', name: 'effects_Desaturate' }, - {title: 'Dither', name: 'effects_Dither' }, - {title: 'Dot Screen', name: 'effects_dot_screen' }, - {title: 'Edge', name: 'effects_Edge' }, - {title: 'Emboss', name: 'effects_Emboss' }, - {title: 'Enrich', name: 'effects_Enrich' }, - {title: 'Gamma', name: 'effects_Gamma' }, - {title: 'Grains', name: 'effects_Grains' }, - {title: 'Heatmap', name: 'effects_heatmap' }, - {title: 'HSL Adjustment', name: 'effects_HSLAdjustment' }, - {title: 'JPG Compression', name: 'effects_jpg_vintage' }, - {title: 'Mosaic', name: 'effects_Mosaic' }, - {title: 'Oil', name: 'effects_Oil' }, - {title: 'Posterize', name: 'effects_Posterize' }, - {title: 'Sepia', name: 'effects_Sepia' }, - {title: 'Sharpen', name: 'effects_Sharpen' }, - {title: 'Solarize', name: 'effects_Solarize' }, - {title: 'Tilt Shift', name: 'effects_tilt_shift' }, - {title: 'Vignette', name: 'effects_vignette' }, - {title: 'Vintage', name: 'effects_vintage' }, - ]; +//canvas layers +var canvas_back = document.getElementById("canvas_back").getContext("2d"); //layer for grid/transparency +var canvas_main = document.getElementById("Background").getContext("2d"); //background +//new layers insert convas here +var canvas_front = document.getElementById("canvas_front").getContext("2d"); //tmp layer +var canvas_grid = document.getElementById("canvas_grid").getContext("2d"); //grid layer +var canvas_preview = document.getElementById("canvas_preview").getContext("2d"); //mini preview + +//settings +var AUTHOR = 'ViliusL'; +var EMAIL = 'www.viliusl@gmail.com'; +var VERSION = '2.2.1'; +var WIDTH = 800; //canvas midth +var HEIGHT = 600; //canvas height +var RATIO = WIDTH/HEIGHT; //width & height ratio +var LAYERS = []; //layers data +var ACTION = 'select_tool'; ///default action +var COLOUR = '#0000ff'; //current color +var ZOOM = 100; //zoom level 10 - infinity +var ALPHA = 255; //default alpha +var SAVE_NAME = 'example'; //default save name + +var SAVE_TYPES = [ + "PNG - Portable Network Graphics", //default + "JPG - JPG/JPEG Format", //autodetect on photos where png useless? + "XML - Full layers data", //aka PSD + "BMP - Windows Bitmap", //firefox only, useless? + "WEBP - Weppy File Format", //chrome only + ]; + +var ACTION_DATA = [ + {name: 'select_tool', title: 'Select object tool', icon: ['all.png', 0+7, 2], attributes: {} }, + {name: 'select_square', title: 'Select area tool', icon: ['all.png', -50+4, 5], attributes: {} }, + {name: 'magic_wand', title: 'Magic Wand Tool', icon: ['all.png', -150+1, -50+2], attributes: {sensitivity: 40, anti_aliasing: true} }, + {name: 'erase', title: 'Erase', icon: ['all.png', -100+3, 4], attributes: {size: 20, circle: true, strict: true} }, + {name: 'fill', title: 'Fill', icon: ['all.png', -150+3, 3], attributes: {sensitivity: 0, anti_aliasing: false} }, + {name: 'pick_color', title: 'Pick Color', icon: ['all.png', -200+3, 3], attributes: {} }, + {name: 'pencil', title: 'Pencil', icon: ['all.png', -250+3, 3], attributes: {} }, + {name: 'line', title: 'Draw line', icon: ['all.png', -300+3, 3], attributes: {size: 1, type_values: ['Simple', 'Multi-line', 'Arrow', 'Curve'] } }, + {name: 'letters', title: 'Draw letters', icon: ['all.png', -350+3, 4], attributes: {} }, + {name: 'draw_square', title: 'Draw rectangle', icon: ['all.png', -400+3, 5], attributes: {fill: false, square: false, round: 0} }, + {name: 'draw_circle', title: 'Draw circle', icon: ['all.png', -450+3, 5], attributes: {fill: false, circle: false} }, + {name: 'brush', title: 'Brush', icon: ['all.png', -500+6, 3], attributes: {type: 'Brush', type_values: ['Brush', 'BezierCurve', 'Chrome', 'Fur', 'Grouped', 'Shaded', 'Sketchy'], size: 5, anti_alias: false }, on_update: 'update_brush', }, + {name: 'blur_tool', title: 'Blur tool', icon: ['all.png', -250+5, -50+2], attributes: {size: 30, strength: 1} }, + {name: 'sharpen_tool', title: 'Sharpen tool', icon: ['all.png', -300+5, -50+2], attributes: {size: 30, strength: 0.5} }, + {name: 'burn_dodge_tool', title: 'Burn/Dodge tool', icon: ['all.png', -500+3, -50+4], attributes: {burn: true, size: 30, power: 50} }, + {name: 'desaturate_tool', title: 'Desaturate', icon: ['all.png', -550+3, -00+4], attributes: {size: 50, anti_alias: true} }, + {name: 'clone_tool', title: 'Clone tool', icon: ['all.png', -350+4, -50+3], attributes: {size: 30, anti_alias: true} }, + {name: 'gradient_tool', title: 'Gradient', icon: ['all.png', -400+3, -50+4], attributes: {radial: false, power: 50} }, + {name: 'crop_tool', title: 'Crop', icon: ['all.png', -450+2, -50+2], attributes: { } }, + ]; + +var CREDITS = [ + {title: 'Brush styles', name: 'Harmony', link: 'http://ricardocabello.com/blog/post/689' }, + {title: 'Effects library', name: 'glfx.js', link: 'http://evanw.github.io/glfx.js/' }, + {title: 'EXIF', name: 'exif.js', link: 'https://github.com/jseidelin/exif-js' }, + {title: 'Image filters', name: 'ImageFilters.js',link: 'https://github.com/arahaya/ImageFilters.js' }, + {title: 'KD-tree', name: 'kdtree.js', link: 'http://jsdo.it/peko/wKvk' }, + ]; + +var FILTERS_LIST = [ + {title: 'Black and White', name: 'effects_bw' }, + {title: 'Blur-Box', name: 'effects_BoxBlur' }, + {title: 'Blur-Gaussian', name: 'effects_GaussianBlur' }, + {title: 'Blur-Stack', name: 'effects_StackBlur' }, + {title: 'Blur-Zoom', name: 'effects_zoomblur' }, + {title: 'Bulge/Pinch', name: 'effects_bulge_pinch' }, + {title: 'Colorize', name: 'effects_colorize' }, + {title: 'Denoise', name: 'effects_denoise' }, + {title: 'Desaturate', name: 'effects_Desaturate' }, + {title: 'Dither', name: 'effects_Dither' }, + {title: 'Dot Screen', name: 'effects_dot_screen' }, + {title: 'Edge', name: 'effects_Edge' }, + {title: 'Emboss', name: 'effects_Emboss' }, + {title: 'Enrich', name: 'effects_Enrich' }, + {title: 'Gamma', name: 'effects_Gamma' }, + {title: 'Grains', name: 'effects_Grains' }, + {title: 'Heatmap', name: 'effects_heatmap' }, + {title: 'HSL Adjustment', name: 'effects_HSLAdjustment' }, + {title: 'JPG Compression', name: 'effects_jpg_vintage' }, + {title: 'Mosaic', name: 'effects_Mosaic' }, + {title: 'Oil', name: 'effects_Oil' }, + {title: 'Posterize', name: 'effects_Posterize' }, + {title: 'Sepia', name: 'effects_Sepia' }, + {title: 'Sharpen', name: 'effects_Sharpen' }, + {title: 'Solarize', name: 'effects_Solarize' }, + {title: 'Tilt Shift', name: 'effects_tilt_shift' }, + {title: 'Vignette', name: 'effects_vignette' }, + {title: 'Vintage', name: 'effects_vintage' }, + ]; diff --git a/js/tools.js b/js/tools.js index 2cc3a2d..559bde0 100644 --- a/js/tools.js +++ b/js/tools.js @@ -1,2138 +1,2145 @@ -var TOOLS = new TOOLS_CLASS(); - -function TOOLS_CLASS(){ - this.select_square_action = ''; - this.select_data = false; - this.EXIF = false; - this.last_line_x; - this.last_line_y; - var clone_data = false; - var COLOUR_copy; - var curve_points = []; - - this.draw_helpers = function(){ - //left menu - var html = ''; - for(var i in ACTION_DATA){ - html += ''+"\n"; - } - html += '
'+"\n"; - } - document.getElementById("all_colors").innerHTML = html; - }; - this.update_attribute = function(object, next_value){ - var max_value = 500; - for(var k in this.action_data().attributes){ - if(k != object.id) continue; - if(this.action_data().attributes[k]===true || this.action_data().attributes[k]===false){ - //true / false - var value; - if(next_value == 0) - value=true; - else - value=false; - //save - this.action_data().attributes[k] = value; - this.show_action_attributes(); - } - else if(typeof this.action_data().attributes[k] == 'object'){ - //select - var key = k.replace("_values",""); - this.action_data().attributes[key] = object.value; - } - else if(this.action_data().attributes[k][0] == '#'){ - //color - var key = k.replace("_values",""); - this.action_data().attributes[key] = object.value; - } - else{ - //numbers - if(next_value != undefined){ - if(next_value > 0){ - if(parseInt(this.action_data().attributes[k]) == 0) - object.value = 1; - else if(parseInt(this.action_data().attributes[k]) == 1) - object.value = 5; - else if(parseInt(this.action_data().attributes[k]) == 5) - object.value = 10; - else - object.value = parseInt(this.action_data().attributes[k]) + next_value; - } - else if(next_value < 0){ - if(parseInt(this.action_data().attributes[k]) == 1) - object.value = 0; - else if(parseInt(this.action_data().attributes[k]) <= 5) - object.value = 1; - else if(parseInt(this.action_data().attributes[k]) <= 10) - object.value = 5; - else if(parseInt(this.action_data().attributes[k]) <= 20) - object.value = 10; - else - object.value = parseInt(this.action_data().attributes[k]) + next_value; - } - - if(object.value < 0) object.value = 0; - if(object.value > max_value) object.value = max_value; - } - else{ - if(object.value.length==0) return false; - object.value = parseInt(object.value); - object.value = Math.abs(object.value); - if(object.value==0 || isNaN(object.value) || value > max_value) - object.value = this.action_data().attributes[k]; - } - if(k == 'power' && object.value > 100) - object.value = 100; - - //save - this.action_data().attributes[k] = object.value; - - document.getElementById(k).value = object.value; - } - if(this.action_data().on_update != undefined) - TOOLS[this.action_data().on_update](object.value); - } - }; - this.action = function(key){ - TOOLS[key]('init', {valid:true}); - if(ACTION == key) return false; - - //change - if(ACTION != '') - document.getElementById(ACTION).className = ""; - ACTION = key; - document.getElementById(key).className = "active"; - this.show_action_attributes(); - - return false; - }; - this.action_data = function(){ - for(var i in ACTION_DATA){ - if(ACTION_DATA[i].name == ACTION) - return ACTION_DATA[i]; - } - }; - this.show_action_attributes = function(){ - html = ''; - var step = 10; - for(var k in this.action_data().attributes){ - var title = k[0].toUpperCase() + k.slice(1); - title = title.replace("_"," "); - if(TOOLS.action_data().attributes[k+"_values"] != undefined) continue; - if(this.action_data().attributes[k]===true || this.action_data().attributes[k]===false){ - //true / false - if(this.action_data().attributes[k]==true) - html += '
'+title+'
'; - else - html += '
'+title+'
'; - } - else if(typeof TOOLS.action_data().attributes[k] == 'object'){ - //drop down select - html += ''; - } - else if(TOOLS.action_data().attributes[k][0] == '#'){ - //color - html += ''; //table for 100% width - html += ''; - html += ''; - html += ''; - html += ''; - html += '
'+title+':
'; - } - else{ - //numbers - html += '
'; - html += ''; //table for 100% width - html += ''; - html += ''; - html += ''; - html += ''; - html += '
'+title+':
'; - html += '
+
'; - html += '
-
'; - html += '
'; - } - } - document.getElementById("action_attributes").innerHTML = html; - }; - this.set_color = function(object){ - if(HELPER.chech_input_color_support('main_colour') == true && object.id == 'main_colour') - COLOUR = object.value; - else - COLOUR = HELPER.rgb2hex_all(object.style.backgroundColor); - COLOUR_copy = COLOUR; - - if(HELPER.chech_input_color_support('main_colour') == true) - document.getElementById("main_colour").value = COLOUR; //supported - else - document.getElementById("main_colour_alt").style.backgroundColor = COLOUR; //not supported - - document.getElementById("color_hex").value = COLOUR; - var colours = HELPER.hex2rgb(COLOUR); - document.getElementById("rgb_r").value = colours.r; - document.getElementById("rgb_g").value = colours.g; - document.getElementById("rgb_b").value = colours.b; - }; - this.set_color_manual = function(object){ - if(object.value.length == 7){ - COLOUR = object.value; - this.sync_colors(); - } - else if(object.value.length > 7) - object.value = COLOUR; - }; - this.set_color_rgb = function(object, c){ - var colours = HELPER.hex2rgb(COLOUR); - if(object.value.length > 3){ - object.value = colours[c]; - } - else if(object.value.length > 0){ - value = object.value; - value = parseInt(value); - if(isNaN(value) || value != object.value || value > 255 || value < 0){ - object.value = colours[c]; - return false; - } - COLOUR = "#" + ("000000" + HELPER.rgbToHex(document.getElementById("rgb_r").value, document.getElementById("rgb_g").value, document.getElementById("rgb_b").value)).slice(-6); - ALPHA = document.getElementById("rgb_a").value; - document.getElementById("rgb_a").value = ALPHA; - this.sync_colors(); - } - }; - this.sync_colors = function(){ - document.getElementById("color_hex").value = COLOUR; - - if(HELPER.chech_input_color_support('main_colour') == true) - document.getElementById("main_colour").value = COLOUR; //supported - else - document.getElementById("main_colour_alt").style.backgroundColor = COLOUR; //not supported - - var colours = HELPER.hex2rgb(COLOUR); - document.getElementById("rgb_r").value = colours.r; - document.getElementById("rgb_g").value = colours.g; - document.getElementById("rgb_b").value = colours.b; - }; - this.toggle_color_select = function(){ - if(POP.active == false){ - POP.add({title: 'Colour:', function: function(){ - COLOUR_copy = COLOUR; - - var html = ''; - html += ''; - html += ''; - html += ' '; - html += ' '; - html += ' '; - html += ''; - html += ''; - html += ' '; - html += ' '; - html += ' '; - html += ''; - html += '
Lum:0
Alpha:'+ALPHA+'
'; - return html; - }}); - POP.show('Select color', function(user_response){ - var param1 = parseInt(user_response.param1); - }, undefined, this.toggle_color_select_onload); - } - else - POP.hide(); - }; - this.change_lum = function(lumi){ - lumi = parseInt(lumi); - var c3 = HELPER.hex2rgb(COLOUR_copy); - c3.r += lumi; - c3.g += lumi; - c3.b += lumi; - - if(c3.r < 0) c3.r = 0; - if(c3.g < 0) c3.g = 0; - if(c3.b < 0) c3.b = 0; - if(c3.r > 255) c3.r = 255; - if(c3.g > 255) c3.g = 255; - if(c3.b > 255) c3.b = 255; - - COLOUR = "#" + ("000000" + HELPER.rgbToHex(c3.r, c3.g, c3.b)).slice(-6); - this.sync_colors(); - }; - this.change_alpha = function(value){ - ALPHA = parseInt(value); - document.getElementById("rgb_a").value = ALPHA; - }; - this.toggle_color_select_onload = function(){ - var img = new Image(); - img.onload = function(){ - document.getElementById("c_all").getContext("2d").drawImage(img, 0, 0); - document.getElementById("c_all").onmousedown = function(event){ - if(event.offsetX) { - mouse_x = event.offsetX; - mouse_y = event.offsetY; - } - else if(event.layerX) { - mouse_x = event.layerX; - mouse_y = event.layerY; - } - var c = document.getElementById("c_all").getContext("2d").getImageData(mouse_x, mouse_y, 1, 1).data; - COLOUR = "#" + ("000000" + HELPER.rgbToHex(c[0], c[1], c[2])).slice(-6); - TOOLS.sync_colors(); - COLOUR_copy = COLOUR; - document.getElementById("lum_ranger").value = 0; - }; - }; - img.src = 'img/colorwheel.png'; - }; - //type = click, right_click, drag, move, release - this.select_tool = function(type, mouse, event){ - if(mouse == undefined) return false; - if(mouse.valid == false) return true; - if(mouse.click_valid == false) return true; - if(event != undefined && event.target.id == "canvas_preview") return true; - if(type == 'drag'){ - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.drawImage(canvas_active(true), mouse.x - mouse.click_x, mouse.y - mouse.click_y); - } - else if(type == 'release'){ - if(mouse.valid == false || mouse.click_x === false) return false; - if(mouse.x - mouse.click_x == 0 || mouse.y - mouse.click_y == 0) return false; - MAIN.save_state(); - var tmp = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - canvas_active().clearRect(0, 0, WIDTH, HEIGHT); - canvas_active().putImageData(tmp, mouse.x - mouse.click_x, mouse.y - mouse.click_y); - } - }; - this.magic_wand = function(type, mouse, event){ - if(mouse.valid == false) return true; - if(type == 'click'){ - MAIN.save_state(); - DRAW.tool_magic_wand(canvas_active(), WIDTH, HEIGHT, mouse.x, mouse.y, TOOLS.action_data().attributes.sensitivity, TOOLS.action_data().attributes.anti_aliasing); - } - }; - this.erase = function(type, mouse, event){ - if(mouse.valid == false) return true; - var strict = TOOLS.action_data().attributes.strict; - var size = TOOLS.action_data().attributes.size; - var is_circle = TOOLS.action_data().attributes.circle; - - if(type == 'click'){ - MAIN.save_state(); - if(is_circle == false){ - canvas_active().save(); - canvas_active().globalCompositeOperation = 'destination-out'; - canvas_active().fillStyle = "rgba(255, 255, 255, "+ALPHA/255+")"; - canvas_active().fillRect(mouse.x - Math.ceil(size/2)+1, mouse.y - Math.ceil(size/2)+1, size, size); - canvas_active().restore(); - } - else{ - - if(strict == false){ - var radgrad = canvas_active().createRadialGradient( - mouse.x, mouse.y, size/8, - mouse.x, mouse.y, size/2); - radgrad.addColorStop(0, "rgba(255, 255, 255, "+ALPHA/255+")"); - radgrad.addColorStop(1, "rgba(255, 255, 255, 0)"); - } - - //set Composite - canvas_active().save(); - canvas_active().globalCompositeOperation = 'destination-out'; - if(strict == true) - canvas_active().fillStyle = "rgba(255, 255, 255, "+ALPHA/255+")"; - else - canvas_active().fillStyle = radgrad; - canvas_active().beginPath(); - canvas_active().arc(mouse.x, mouse.y, size/2, 0,Math.PI*2,true); - canvas_active().fill(); - canvas_active().restore(); - } - } - else if(type == 'drag'){ - if(is_circle == false){ - canvas_active().save(); - canvas_active().globalCompositeOperation = 'destination-out'; - if(ALPHA < 255) - canvas_active().fillStyle = "rgba(255, 255, 255, "+ALPHA/255/10+")"; - else - canvas_active().fillStyle = COLOUR; - canvas_active().fillRect(mouse.x - Math.ceil(size/2)+1, mouse.y - Math.ceil(size/2)+1, size, size); - canvas_active().restore(); - } - else{ - if(strict == false){ - var radgrad = canvas_active().createRadialGradient( - mouse.x, mouse.y, size/10, - mouse.x, mouse.y, size/2); - if(ALPHA < 255) - radgrad.addColorStop(0, "rgba(255, 255, 255, "+ALPHA/255/10+")"); - else - radgrad.addColorStop(0, "rgba(255, 255, 255, 1)"); - radgrad.addColorStop(1, "rgba(255, 255, 255, 0)"); - } - //set Composite - canvas_active().save(); - canvas_active().globalCompositeOperation = 'destination-out'; - if(strict == true){ - if(ALPHA < 255) - canvas_active().fillStyle = "rgba(255, 255, 255, "+ALPHA/255/10+")"; - else - canvas_active().fillStyle = COLOUR; - } - else - canvas_active().fillStyle = radgrad; - canvas_active().beginPath(); - canvas_active().arc(mouse.x, mouse.y, size/2, 0,Math.PI*2,true); - canvas_active().fill(); - canvas_active().restore(); - } - DRAW.zoom(undefined, false); - } - else if(type == 'move'){ - var size1 = Math.floor((size)/2); - var size2 = Math.floor((size)/2); - if(size%2 == 0) size2--; - else{ - size1--; - } - - //show size - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.lineWidth = 1; - if(is_circle == false){ - HELPER.dashedRect(canvas_front, mouse.x - Math.ceil(size/2) + 1, mouse.y - Math.ceil(size/2) + 1, mouse.x + Math.floor(size/2), mouse.y + Math.floor(size/2), 1, '#000000'); - } - else{ - canvas_front.beginPath(); - canvas_front.strokeStyle = "#000000"; - canvas_front.arc(mouse.x, mouse.y, size/2, 0,Math.PI*2,true); - canvas_front.stroke(); - } - } - }; - this.fill = function(type, mouse, event){ - if(mouse.valid == false) return true; - if(type == 'click'){ - MAIN.save_state(); - var color_to = HELPER.hex2rgb(COLOUR); - color_to.a = ALPHA; - DRAW.toolFiller(canvas_active(), WIDTH, HEIGHT, mouse.x, mouse.y, color_to, TOOLS.action_data().attributes.sensitivity, TOOLS.action_data().attributes.anti_aliasing); - } - }; - this.pick_color = function(type, mouse, event){ - if(mouse.valid == false) return true; - if(type == 'click'){ - var c = canvas_active().getImageData(mouse.x, mouse.y, 1, 1).data; - COLOUR = "#" + ("000000" + HELPER.rgbToHex(c[0], c[1], c[2])).slice(-6); - - //set alpha - ALPHA = c[3]; - document.getElementById("rgb_a").value = ALPHA; - - TOOLS.sync_colors(); - } - }; - this.pencil = function(type, mouse, event){ - if(mouse.valid == false) return true; - var color_rgb = HELPER.hex2rgb(COLOUR); - if(type == 'click'){ - MAIN.save_state(); - } - else if(type == 'drag'){ - //why no simple lines? this way turns off aliasing - if(mouse.last_x != false && mouse.last_y != false){ - //saving - dist_x = mouse.last_x - mouse.x; - dist_y = mouse.last_y - mouse.y; - distance = Math.sqrt((dist_x*dist_x)+(dist_y*dist_y)); - radiance = Math.atan2(dist_y, dist_x); - for(var i=0; i 0){ - canvas.fillStyle = HELPER.darkenColor(COLOUR, -30); - alpha_tmp = ALPHA; - if(alpha_tmp < 255) - alpha_tmp /= 10; - - color_rgb.r -= 50; - color_rgb.g -= 50; - color_rgb.b -= 50; - if(color_rgb.r < 0) color_rgb.r *= -1; - if(color_rgb.g < 0) color_rgb.g *= -1; - if(color_rgb.b < 0) color_rgb.b *= -1; - - canvas.fillStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+alpha_tmp/255+")"; - for (cnt = 0; cnt < dpth; cnt++) - canvas.fillText(text, xx + dx * cnt, yy + letters_height + dy * cnt); - color_rgb = HELPER.hex2rgb(COLOUR); - } - - //main text - canvas.fillStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas.strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas.lineWidth = stroke_size; - if(fill_style == 'Fill' || fill_style == 'Both') - canvas.fillText(text, xx, yy + letters_height); - if(fill_style == 'Stroke' || fill_style == 'Both') - canvas.strokeText(text, xx, yy + letters_height); - - DRAW.zoom(); - }; - this.draw_square = function(type, mouse, event){ - if(mouse.click_valid == false) return true; - var color_rgb = HELPER.hex2rgb(COLOUR); - if(type == 'drag'){ - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.beginPath(); - - var start_x = mouse.click_x; - var start_y = mouse.click_y; - var dx = mouse.x - mouse.click_x; - var dy = mouse.y - mouse.click_y; - if(TOOLS.action_data().attributes.square==true){ - dx = Math.max(Math.abs(dx), Math.abs(dy)); - dy = Math.max(Math.abs(dx), Math.abs(dy)); - if(mouse.x < mouse.click_x) start_x = start_x - dx; - if(mouse.y < mouse.click_y) start_y = start_y - dy; - } - - canvas_front.fillStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_front.strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_front.lineWidth = 1; - if(TOOLS.action_data().attributes.fill==true) - HELPER.roundRect(canvas_front, start_x + 0.5, start_y + 0.5, - dx, dy, - TOOLS.action_data().attributes.round, true, false); - else - HELPER.roundRect(canvas_front, start_x + 0.5, start_y + 0.5, - dx, dy, - TOOLS.action_data().attributes.round, false, true); - } - else if(type == 'release'){ - MAIN.save_state(); - canvas_active().beginPath(); - var start_x = mouse.click_x; - var start_y = mouse.click_y; - var dx = mouse.x - mouse.click_x; - var dy = mouse.y - mouse.click_y; - if(TOOLS.action_data().attributes.square==true){ - dx = Math.max(Math.abs(dx), Math.abs(dy)); - dy = Math.max(Math.abs(dx), Math.abs(dy)); - if(mouse.x < mouse.click_x) start_x = start_x - dx; - if(mouse.y < mouse.click_y) start_y = start_y - dy; - } - - canvas_active().fillStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_active().strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_active().lineWidth = 1; - if(TOOLS.action_data().attributes.fill==true) - HELPER.roundRect(canvas_active(), start_x + 0.5, start_y + 0.5, - dx, dy, - TOOLS.action_data().attributes.round, true, false); - else - HELPER.roundRect(canvas_active(), start_x + 0.5, start_y + 0.5, - dx, dy, - TOOLS.action_data().attributes.round, false, true); - } - }; - this.draw_circle = function(type, mouse, event){ - if(mouse.click_valid == false) return true; - var color_rgb = HELPER.hex2rgb(COLOUR); - if(type == 'drag'){ - dist_x = mouse.x - mouse.click_x; - dist_y = mouse.y - mouse.click_y; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - if(TOOLS.action_data().attributes.circle==true) - dist_x = dist_y = Math.min(dist_x, dist_y); - if(TOOLS.action_data().attributes.fill==true) - HELPER.drawEllipseByCenter(canvas_front, mouse.click_x, mouse.click_y, dist_x*2, dist_y*2, "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")", true); - else - HELPER.drawEllipseByCenter(canvas_front, mouse.click_x, mouse.click_y, dist_x*2, dist_y*2, "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"); - } - else if(type == 'release'){ - MAIN.save_state(); - dist_x = mouse.x - mouse.click_x; - dist_y = mouse.y - mouse.click_y; - if(TOOLS.action_data().attributes.circle==true) - dist_x = dist_y = Math.min(dist_x, dist_y); - canvas_active().lineWidth = 1; - if(TOOLS.action_data().attributes.fill==true) - HELPER.drawEllipseByCenter(canvas_active(), mouse.click_x, mouse.click_y, dist_x*2, dist_y*2, "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")", true); - else - HELPER.drawEllipseByCenter(canvas_active(), mouse.click_x, mouse.click_y, dist_x*2, dist_y*2, "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"); - } - }; - this.update_brush = function(){ - document.getElementById('blur').style.display=''; - if(TOOLS.action_data().attributes.type != 'Brush') - document.getElementById('blur').style.display='none'; - }; - this.desaturate_tool = function(type, mouse, event){ - if(mouse.valid == false) return true; - var size = TOOLS.action_data().attributes.size; - var size_half = Math.round(size/2); - var xx = mouse.x - size/2; - var yy = mouse.y - size/2; - if(xx < 0) xx = 0; - if(yy < 0) yy = 0; - - if(type == 'click'){ - MAIN.save_state(); - var imageData = canvas_active().getImageData(xx, yy, size, size); - var filtered = ImageFilters.GrayScale(imageData); //add effect - HELPER.drawImage_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front"), TOOLS.action_data().attributes.anti_alias); - } - else if(type == 'drag'){ - var imageData = canvas_active().getImageData(xx, yy, size, size); - var filtered = ImageFilters.GrayScale(imageData); //add effect - HELPER.drawImage_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front"), TOOLS.action_data().attributes.anti_alias); - } - if(type == 'move' || type == 'drag'){ - //show size - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.beginPath(); - canvas_front.strokeStyle = "#000000"; - canvas_front.lineWidth = 1; - canvas_front.arc(mouse.x, mouse.y, size_half, 0, Math.PI*2, true); - canvas_front.stroke(); - } - }; - this.brush = function(type, mouse, event){ - if(mouse.valid == false) return true; - var brush_type = TOOLS.action_data().attributes.type; - var color_rgb = HELPER.hex2rgb(COLOUR); - - if(type == 'click') - MAIN.save_state(); - - if(brush_type == 'Brush'){ - if(type == 'click'){ - //init settings - canvas_active().beginPath(); - canvas_active().strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_active().lineWidth = TOOLS.action_data().attributes.size; - canvas_active().lineCap = 'round'; - canvas_active().lineJoin = 'round'; - - if(ALPHA < 255){ - canvas_front.beginPath(); - canvas_front.strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_front.lineWidth = TOOLS.action_data().attributes.size; - canvas_front.lineCap = 'round'; - canvas_front.lineJoin = 'round'; - } - - //blur - canvas_active().shadowBlur = 0; - if(TOOLS.action_data().attributes.anti_alias == true){ - canvas_active().shadowColor = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_active().shadowBlur = Math.round(TOOLS.action_data().attributes.size); - } - } - else if(type == 'drag' && mouse.last_x != false && mouse.last_y != false){ - if(ALPHA == 255) - canvas_active().beginPath(); - canvas_active().moveTo(mouse.last_x, mouse.last_y); - canvas_active().lineTo(mouse.x, mouse.y); - if(ALPHA == 255) - canvas_active().stroke(); - - //now draw preview - if(ALPHA < 255){ - canvas_front.beginPath(); - //clean from last line - canvas_front.globalCompositeOperation = "destination-out"; - canvas_front.strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", 1)"; - canvas_front.moveTo(mouse.last_x, mouse.last_y); - canvas_front.lineTo(mouse.x, mouse.y); - canvas_front.stroke(); - //reset - canvas_front.strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_front.globalCompositeOperation = "source-over"; - //draw new line segment - canvas_front.moveTo(mouse.last_x, mouse.last_y); - canvas_front.lineTo(mouse.x, mouse.y); - canvas_front.stroke(); - } - } - else if(type == 'release'){ - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - //paint everything - canvas_active().stroke(); - - //if mouse was not moved - if(mouse.click_x == mouse.x && mouse.click_y == mouse.y){ - canvas_active().beginPath(); - canvas_active().arc(mouse.x, mouse.y, TOOLS.action_data().attributes.size/2, 0, 2 * Math.PI, false); - canvas_active().fillStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_active().fill(); - } - canvas_active().shadowBlur = 0; - } - else if(type == 'move'){ - //show size - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.beginPath(); - canvas_front.strokeStyle = "#000000"; - canvas_front.lineWidth = 1; - canvas_front.arc(mouse.x, mouse.y, TOOLS.action_data().attributes.size/2, 0, Math.PI*2, true); - canvas_front.stroke(); - } - } - else if(brush_type == 'BezierCurve'){ - if(type == 'click') - BezierCurveBrush.startCurve(mouse.x, mouse.y); - else if(type == 'drag' && mouse.last_x != false && mouse.last_y != false){ - var color_rgb = HELPER.hex2rgb(COLOUR); - canvas_active().strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_active().lineWidth = 0.5; - - BezierCurveBrush.draw(canvas_active(), color_rgb, mouse.x, mouse.y, TOOLS.action_data().attributes.size); - } - } - else if(brush_type == 'Chrome'){ - if(type == 'click'){ - chrome_brush.init(canvas_active()); - chrome_brush.strokeStart(mouse.x, mouse.y); - } - else if(type == 'drag' && mouse.last_x != false && mouse.last_y != false){ - var color_rgb = HELPER.hex2rgb(COLOUR); - canvas_active().strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_active().lineWidth = 1; - - chrome_brush.stroke(color_rgb, mouse.x, mouse.y, TOOLS.action_data().attributes.size); - } - } - else if(brush_type == 'Fur'){ - if(type == 'click'){ - points = new Array(); - prevMouseX = mouse.x; - prevMouseY = mouse.y; - count = 0; - } - else if(type == 'drag' && mouse.last_x != false && mouse.last_y != false){ - var color_rgb = HELPER.hex2rgb(COLOUR); - canvas_active().strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", 0.1)"; - canvas_active().lineWidth = 1; - - f = mouse.x; - c = mouse.y; - var e, b, a, g; - points.push([f, c]); - canvas_active().beginPath(); - canvas_active().moveTo(prevMouseX, prevMouseY); - canvas_active().lineTo(f, c); - canvas_active().stroke(); - for (e = 0; e < points.length; e++) { - b = points[e][0] - points[count][0]; - a = points[e][1] - points[count][1]; - g = b * b + a * a; - var g_size = Math.round(400 * TOOLS.action_data().attributes.size); - if (g < g_size && Math.random() > g / g_size) { - canvas_active().beginPath(); - canvas_active().moveTo(f + (b * 0.5), c + (a * 0.5)); - canvas_active().lineTo(f - (b * 0.5), c - (a * 0.5)); - canvas_active().stroke(); - } - } - prevMouseX = f; - prevMouseY = c; - count++; - } - } - else if(brush_type == 'Grouped'){ - groups_n = TOOLS.action_data().attributes.size; - gsize = 10; - random_power = 5; - - if(type == 'click'){ - chrome_brush.init(canvas_active()); - chrome_brush.strokeStart(mouse.x, mouse.y); - groups = []; - - for(var g=0; g < groups_n; g++){ - groups[g] = {}; - groups[g].x = HELPER.getRandomInt(-gsize, gsize); - groups[g].y = HELPER.getRandomInt(-gsize, gsize); - } - } - else if(type == 'drag' && mouse.last_x != false && mouse.last_y != false){ - canvas_active().strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_active().lineWidth = 0.5; - - for(var g in groups){ - canvas_active().beginPath(); - canvas_active().moveTo(mouse.last_x + groups[g].x, mouse.last_y + groups[g].y); - - //randomize here - groups[g].x += HELPER.getRandomInt(-random_power, random_power); - groups[g].y += HELPER.getRandomInt(-random_power, random_power); - if(groups[g].x < -gsize) groups[g].x = -gsize + random_power; - if(groups[g].y < -gsize) groups[g].y = -gsize + random_power; - if(groups[g].x > gsize) groups[g].x = gsize - random_power; - if(groups[g].y > gsize) groups[g].y = gsize - random_power; - - canvas_active().lineTo(mouse.x + groups[g].x, mouse.y + groups[g].y); - canvas_active().stroke(); - } - } - } - else if(brush_type == 'Shaded'){ - if(type == 'click'){ - shaded_brush.init(canvas_active()); - shaded_brush.strokeStart(mouse.x, mouse.y); - } - else if(type == 'drag' && mouse.last_x != false && mouse.last_y != false){ - var color_rgb = HELPER.hex2rgb(COLOUR); - canvas_active().strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_active().lineWidth = 1; - - shaded_brush.stroke(color_rgb, mouse.x, mouse.y, TOOLS.action_data().attributes.size); - } - } - else if(brush_type == 'Sketchy'){ - if(type == 'click'){ - sketchy_brush.init(canvas_active()); - sketchy_brush.strokeStart(mouse.x, mouse.y); - } - else if(type == 'drag' && mouse.last_x != false && mouse.last_y != false){ - var color_rgb = HELPER.hex2rgb(COLOUR); - canvas_active().strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_active().lineWidth = 1; - - sketchy_brush.stroke(color_rgb, mouse.x, mouse.y, TOOLS.action_data().attributes.size); - } - } - }; - this.gradient_tool = function(type, mouse, event){ - if(mouse != undefined && mouse.valid == false && type != 'init') return true; - var power = TOOLS.action_data().attributes.power; - if(power > 99) power = 99; - //var color1, color2; - - if(type == 'init'){ - POP.add({name: "param1", title: "Color #1:", value: '#000000', type: 'color' }); - POP.add({name: "param2", title: "Transparency #1:", value: '255', range:[0, 255] }); - POP.add({name: "param3", title: "Color #2:", value: '#ffffff', type: 'color' }); - POP.add({name: "param4", title: "Transparency #2:", value: '255', range:[0, 255] }); - POP.preview_in_main = true; - POP.show('Text', function(user_response){ - MAIN.save_state(); - color1 = HELPER.hex2rgb(user_response.param1); - color1.a = parseInt(user_response.param2); - - color2 = HELPER.hex2rgb(user_response.param3); - color2.a = parseInt(user_response.param4); - }); - } - else if(type == 'drag'){ - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - - if(TOOLS.action_data().attributes.radial == false){ - //linear - canvas_front.rect(0, 0, WIDTH, HEIGHT); - if(mouse.x > mouse.click_x){ - var grd = canvas_front.createLinearGradient( - mouse.click_x, mouse.click_y, - mouse.x, mouse.y); - } - else{ - var grd = canvas_front.createLinearGradient( - mouse.x, mouse.y, - mouse.click_x, mouse.click_y); - } - grd.addColorStop(0, "rgba("+color1.r+", "+color1.g+", "+color1.b+", "+color1.a/255+")"); - grd.addColorStop(1, "rgba("+color2.r+", "+color2.g+", "+color2.b+", "+color2.a/255+")"); - canvas_front.fillStyle = grd; - canvas_front.fill(); - } - else{ - //radial - var dist_x = mouse.click_x - mouse.x; - var dist_y = mouse.click_y - mouse.y; - var distance = Math.sqrt((dist_x*dist_x)+(dist_y*dist_y)); - var radgrad = canvas_front.createRadialGradient( - mouse.click_x, mouse.click_y, distance*power/100, - mouse.click_x, mouse.click_y, distance); - radgrad.addColorStop(0, "rgba("+color1.r+", "+color1.g+", "+color1.b+", "+color1.a/255+")"); - radgrad.addColorStop(1, "rgba("+color2.r+", "+color2.g+", "+color2.b+", "+color2.a/255+")"); - - canvas_front.fillStyle = radgrad; - canvas_front.fillRect(0,0,WIDTH,HEIGHT); - } - //draw line - canvas_front.beginPath(); - canvas_front.strokeStyle = "#ff0000"; - canvas_front.lineWidth = 1; - var xx = mouse.x; - var yy = mouse.y; - canvas_front.moveTo(mouse.click_x + 0.5, mouse.click_y + 0.5); - canvas_front.lineTo(xx + 0.5, yy + 0.5); - canvas_front.stroke(); - } - else if(type == 'release'){ - MAIN.save_state(); - if(TOOLS.action_data().attributes.radial == false){ - //linear - canvas_active().rect(0, 0, WIDTH, HEIGHT); - if(mouse.x > mouse.click_x){ - var grd = canvas_active().createLinearGradient( - mouse.click_x, mouse.click_y, - mouse.x, mouse.y); - } - else{ - var grd = canvas_active().createLinearGradient( - mouse.x, mouse.y, - mouse.click_x, mouse.click_y); - } - grd.addColorStop(0, "rgba("+color1.r+", "+color1.g+", "+color1.b+", "+color1.a/255+")"); - grd.addColorStop(1, "rgba("+color2.r+", "+color2.g+", "+color2.b+", "+color2.a/255+")"); - canvas_active().fillStyle = grd; - canvas_active().fill(); - } - else{ - //radial - var dist_x = mouse.click_x - mouse.x; - var dist_y = mouse.click_y - mouse.y; - var distance = Math.sqrt((dist_x*dist_x)+(dist_y*dist_y)); - var radgrad = canvas_active().createRadialGradient( - mouse.click_x, mouse.click_y, distance*power/100, - mouse.click_x, mouse.click_y, distance); - radgrad.addColorStop(0, "rgba("+color1.r+", "+color1.g+", "+color1.b+", "+color1.a/255+")"); - radgrad.addColorStop(1, "rgba("+color2.r+", "+color2.g+", "+color2.b+", "+color2.a/255+")"); - - canvas_active().fillStyle = radgrad; - canvas_active().fillRect(0,0,WIDTH,HEIGHT); - } - } - }; - this.blur_tool = function(type, mouse, event){ - if(mouse.valid == false) return true; - var size = TOOLS.action_data().attributes.size; - var size_half = Math.round(size/2); - var xx = mouse.x - size/2; - var yy = mouse.y - size/2; - if(xx < 0) xx = 0; - if(yy < 0) yy = 0; - if(type == 'click'){ - MAIN.save_state(); - var param1 = TOOLS.action_data().attributes.strength; - var imageData = canvas_active().getImageData(xx, yy, size, size); - var filtered = ImageFilters.StackBlur(imageData, param1); //add effect - HELPER.drawImage_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front")); - } - else if(type == 'drag'){ - var param1 = TOOLS.action_data().attributes.strength; - var imageData = canvas_active().getImageData(xx, yy, size, size); - var filtered = ImageFilters.StackBlur(imageData, param1); //add effect - HELPER.drawImage_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front")); - } - else if(type == 'move'){ - //show size - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.beginPath(); - canvas_front.strokeStyle = "#000000"; - canvas_front.lineWidth = 1; - canvas_front.arc(mouse.x, mouse.y, size_half, 0, Math.PI*2, true); - canvas_front.stroke(); - } - }; - this.sharpen_tool = function(type, mouse, event){ - if(mouse.valid == false) return true; - var size = TOOLS.action_data().attributes.size; - var size_half = Math.round(size/2); - var xx = mouse.x - size/2; - var yy = mouse.y - size/2; - if(xx < 0) xx = 0; - if(yy < 0) yy = 0; - - if(type == 'click'){ - MAIN.save_state(); - var param1 = TOOLS.action_data().attributes.strength; - var imageData = canvas_active().getImageData(xx, yy, size, size); - var filtered = ImageFilters.Sharpen(imageData, param1); //add effect - HELPER.drawImage_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front")); - } - else if(type == 'drag'){ - var param1 = TOOLS.action_data().attributes.strength; - var imageData = canvas_active().getImageData(xx, yy, size, size); - var filtered = ImageFilters.Sharpen(imageData, param1); //add effect - HELPER.drawImage_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front")); - } - else if(type == 'move'){ - //show size - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.beginPath(); - canvas_front.strokeStyle = "#000000"; - canvas_front.lineWidth = 1; - canvas_front.arc(mouse.x, mouse.y, size_half, 0, Math.PI*2, true); - canvas_front.stroke(); - } - }; - this.burn_dodge_tool = function(type, mouse, event){ - if(mouse.valid == false) return true; - var size = TOOLS.action_data().attributes.size; - var power = TOOLS.action_data().attributes.power*2.5; - - if(type == 'click'){ - MAIN.save_state(); - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.save(); - CON.clear_front_on_release = false; - - //init settings - canvas_active().beginPath(); - canvas_active().lineWidth = TOOLS.action_data().attributes.size; - canvas_active().lineCap = 'round'; - canvas_active().lineJoin = 'round'; - - canvas_front.beginPath(); - if(TOOLS.action_data().attributes.burn == true) - canvas_front.strokeStyle = "rgba(0, 0, 0, "+power/255+")"; - else - canvas_front.strokeStyle = "rgba(255, 255, 255, "+power/255+")"; - canvas_front.lineWidth = TOOLS.action_data().attributes.size; - canvas_front.lineCap = 'round'; - canvas_front.lineJoin = 'round'; - } - else if(type == 'drag' && mouse.last_x != false && mouse.last_y != false){ - //now draw preview - canvas_front.beginPath(); - //clean from last line - canvas_front.globalCompositeOperation = "destination-out"; - canvas_front.moveTo(mouse.last_x, mouse.last_y); - canvas_front.lineTo(mouse.x, mouse.y); - canvas_front.stroke(); - //reset - canvas_front.globalCompositeOperation = "source-over"; - //draw new line segment - canvas_front.moveTo(mouse.last_x, mouse.last_y); - canvas_front.lineTo(mouse.x, mouse.y); - canvas_front.stroke(); - } - else if(type == 'release'){ - //todo: use screen+multiply or burn+dodge - canvas_active().globalCompositeOperation = "soft-light"; - canvas_active().shadowBlur = 5; - canvas_active().drawImage(document.getElementById("canvas_front"), 0, 0); - canvas_active().globalCompositeOperation = "source-over"; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - CON.clear_front_on_release = true; - - //if mouse was not moved - if(mouse.click_x == mouse.x && mouse.click_y == mouse.y){ - canvas_active().globalCompositeOperation = "soft-light"; - canvas_active().beginPath(); - canvas_active().arc(mouse.x, mouse.y, TOOLS.action_data().attributes.size/2, 0, 2 * Math.PI, false); - if(TOOLS.action_data().attributes.burn == true){ - canvas_active().fillStyle = "rgba(0, 0, 0, "+power/255+")"; - } - else{ - canvas_active().fillStyle = "rgba(255, 255, 255, "+power/255+")"; - } - canvas_active().shadowBlur = 5; - canvas_active().fill(); - canvas_active().globalCompositeOperation = "source-over"; - } - canvas_active().shadowBlur = 0; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.restore(); - } - else if(type == 'move' && CON.isDrag == false){ - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.beginPath(); - canvas_front.strokeStyle = "#000000"; - canvas_front.arc(mouse.x, mouse.y, size/2, 0, Math.PI*2, true); - canvas_front.stroke(); - } - }; - this.crop_tool = function(type, mouse, event){ - if(mouse.click_valid == false) return true; - if(type == 'drag'){ - if(mouse.x < 0) mouse.x = 0; - if(mouse.y < 0) mouse.y = 0; - if(mouse.x >= WIDTH) mouse.x = WIDTH-1; - if(mouse.y >= HEIGHT) mouse.y = HEIGHT-1; - if(mouse.click_x >= WIDTH) mouse.click_x = WIDTH-1; - if(mouse.click_y >= HEIGHT) mouse.click_y = HEIGHT-1; - if(TOOLS.select_square_action == ''){ - document.body.style.cursor = "crosshair"; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.fillStyle = "rgba(0, 255, 0, 0.3)"; - canvas_front.fillRect(mouse.click_x, mouse.click_y, mouse.x - mouse.click_x, mouse.y - mouse.click_y); - } - } - else if(type == 'move' && TOOLS.select_data != false){ - if(CON.isDrag == true) return true; - canvas_front.lineWidth = 1; - border_size = 5; - TOOLS.select_square_action = ''; - - if(TOOLS.select_square_action == '' - && mouse.x > TOOLS.select_data.x && mouse.y > TOOLS.select_data.y - && mouse.x < TOOLS.select_data.x + TOOLS.select_data.w && mouse.y < TOOLS.select_data.y + TOOLS.select_data.h){ - TOOLS.select_square_action = 'move'; - document.body.style.cursor = 'pointer'; - } - if(TOOLS.select_square_action == '' && mouse.valid == true) - document.body.style.cursor = "auto"; - } - else if(type == 'release'){ - if(mouse.x < 0) mouse.x = 0; - if(mouse.y < 0) mouse.y = 0; - if(mouse.x >= WIDTH) mouse.x = WIDTH-1; - if(mouse.y >= HEIGHT) mouse.y = HEIGHT-1; - if(mouse.click_x >= WIDTH) mouse.click_x = WIDTH-1; - if(mouse.click_y >= HEIGHT) mouse.click_y = HEIGHT-1; - - if(TOOLS.select_square_action == ''){ - if(mouse.x != mouse.click_x && mouse.y != mouse.click_y){ - TOOLS.select_data = { - x: Math.min(mouse.x, mouse.click_x), - y: Math.min(mouse.y, mouse.click_y), - w: Math.abs(mouse.x - mouse.click_x), - h: Math.abs(mouse.y - mouse.click_y) - }; - } - } - TOOLS.draw_selected_area(true); - - LAYER.update_info_block(); - } - else if(type == 'click' && TOOLS.select_data != false){ - document.body.style.cursor = "auto"; - if(mouse.x > TOOLS.select_data.x && mouse.y > TOOLS.select_data.y - && mouse.x < TOOLS.select_data.x + TOOLS.select_data.w && mouse.y < TOOLS.select_data.y + TOOLS.select_data.h){ - MAIN.save_state(); - for(var i in LAYERS){ - var layer = document.getElementById(LAYERS[i].name).getContext("2d"); - - var tmp = layer.getImageData(TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h); - layer.clearRect(0, 0, WIDTH, HEIGHT); - layer.putImageData(tmp, 0, 0); - } - - //resize - MAIN.save_state(); - WIDTH = TOOLS.select_data.w; - HEIGHT = TOOLS.select_data.h; - RATIO = WIDTH/HEIGHT; - LAYER.set_canvas_size(); - - TOOLS.select_data = false; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - } - } - }; - this.clone_tool = function(type, mouse, event){ - if(mouse.valid == false) return true; - var size = TOOLS.action_data().attributes.size; - var size_half = Math.round(size/2); - - if(type == 'click'){ - MAIN.save_state(); - - if(clone_data === false){ - POP.add({html: 'Source is empty, right click on image first.' }); - POP.show('Error', ''); - } - else{ - //draw rounded image - HELPER.drawImage_round(canvas_active(), mouse.x, mouse.y, size, clone_data, document.getElementById("canvas_front"), TOOLS.action_data().attributes.anti_alias); - } - } - else if(type == 'right_click'){ - //save clone source - clone_data = document.createElement("canvas"); - clone_data.width = size; - clone_data.height = size; - var xx = mouse.x - size_half; - var yy = mouse_y - size_half; - if(xx < 0) xx = 0; - if(yy < 0) yy = 0; - clone_data.getContext("2d").drawImage(canvas_active(true), xx, yy, size, size, 0, 0, size, size); - return false; - } - else if(type == 'drag'){ - if(event.which == 3) return true; - if(clone_data === false) return false; //no source - - //draw rounded image - HELPER.drawImage_round(canvas_active(), mouse.x, mouse.y, size, clone_data, document.getElementById("canvas_front"), TOOLS.action_data().attributes.anti_alias); - } - else if(type == 'move'){ - //show size - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.beginPath(); - canvas_front.strokeStyle = "#000000"; - canvas_front.lineWidth = 1; - canvas_front.arc(mouse.x, mouse.y, size_half, 0, Math.PI*2, true); - canvas_front.stroke(); - } - }; - this.select_square = function(type, mouse, event){ - if(mouse.click_valid == false) return true; - if(type == 'drag'){ - if(mouse.x < 0) mouse.x = 0; - if(mouse.y < 0) mouse.y = 0; - if(mouse.x >= WIDTH) mouse.x = WIDTH-1; - if(mouse.y >= HEIGHT) mouse.y = HEIGHT-1; - if(mouse.click_x >= WIDTH) mouse.click_x = WIDTH-1; - if(mouse.click_y >= HEIGHT) mouse.click_y = HEIGHT-1; - if(TOOLS.select_square_action == ''){ - document.body.style.cursor = "crosshair"; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.fillStyle = "rgba(0, 255, 0, 0.3)"; - canvas_front.fillRect(mouse.click_x, mouse.click_y, mouse.x - mouse.click_x, mouse.y - mouse.click_y); - } - else{ - if(TOOLS.select_square_action == 'move'){ - //move - try{ - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.drawImage( canvas_active(true), - TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h, - mouse.x - mouse.click_x + TOOLS.select_data.x, - mouse.y - mouse.click_y + TOOLS.select_data.y, - TOOLS.select_data.w, - TOOLS.select_data.h ); - canvas_front.restore(); - } - catch(err){ - console.log("Error: "+err.message); - } - } - else{ - //resize - var s_x = TOOLS.select_data.x; - var s_y = TOOLS.select_data.y; - var d_x = TOOLS.select_data.w; - var d_y = TOOLS.select_data.h; - if(TOOLS.select_square_action == 'resize-left'){ - s_x += mouse.x - mouse.click_x; - d_x -= mouse.x - mouse.click_x; - } - else if(TOOLS.select_square_action == 'resize-right') - d_x += mouse.x - mouse.click_x; - else if(TOOLS.select_square_action == 'resize-top'){ - s_y += mouse.y - mouse.click_y; - d_y -= mouse.y - mouse.click_y; - } - else if(TOOLS.select_square_action == 'resize-bottom') - d_y += mouse.y - mouse.click_y; - else if(TOOLS.select_square_action == 'resize-1'){ - s_x += mouse.x - mouse.click_x; - s_y += mouse.y - mouse.click_y; - d_x -= mouse.x - mouse.click_x; - d_y -= mouse.y - mouse.click_y; - } - else if(TOOLS.select_square_action == 'resize-2'){ - d_x += mouse.x - mouse.click_x; - s_y += mouse.y - mouse.click_y; - d_y -= mouse.y - mouse.click_y; - } - else if(TOOLS.select_square_action == 'resize-3'){ - d_x += mouse.x - mouse.click_x; - d_y += mouse.y - mouse.click_y; - } - else if(TOOLS.select_square_action == 'resize-4'){ - s_x += mouse.x - mouse.click_x; - d_x -= mouse.x - mouse.click_x; - d_y += mouse.y - mouse.click_y; - } - var s_x = Math.max(s_x, 0); - var s_y = Math.max(s_y, 0); - var d_x = Math.max(d_x, 0); - var d_y = Math.max(d_y, 0); - - canvas_front.save(); - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.mozImageSmoothingEnabled = false; - canvas_front.drawImage(canvas_active(true), - TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h, - s_x, s_y, d_x, d_y); - canvas_front.restore(); - } - } - } - else if(type == 'move' && TOOLS.select_data != false){ - if(CON.isDrag == true) return true; - canvas_front.lineWidth = 1; - border_size = 5; - TOOLS.select_square_action = ''; - var is_left = false; - var is_right = false; - var is_top = false; - var is_bottom = false; - var sr_size = Math.ceil(CON.sr_size/ZOOM*100); - - //left - if(TOOLS.check_mouse_pos(TOOLS.select_data.x, TOOLS.select_data.y + TOOLS.select_data.h/2, sr_size, mouse.x, mouse.y)==true){ - document.body.style.cursor = "w-resize"; - TOOLS.select_square_action = 'resize-left'; - is_left = true; - } - //top - else if(TOOLS.check_mouse_pos(TOOLS.select_data.x + TOOLS.select_data.w/2, TOOLS.select_data.y, sr_size, mouse.x, mouse.y)==true){ - document.body.style.cursor = "n-resize"; - TOOLS.select_square_action = 'resize-top'; - is_top = true; - } - //right - else if(TOOLS.check_mouse_pos(TOOLS.select_data.x + TOOLS.select_data.w - sr_size, TOOLS.select_data.y + TOOLS.select_data.h/2, sr_size, mouse.x, mouse.y)==true){ - document.body.style.cursor = "w-resize"; - TOOLS.select_square_action = 'resize-right'; - is_right = true; - } - //bottom - else if(TOOLS.check_mouse_pos(TOOLS.select_data.x + TOOLS.select_data.w/2, TOOLS.select_data.y + TOOLS.select_data.h - sr_size, sr_size, mouse.x, mouse.y)==true){ - document.body.style.cursor = "n-resize"; - TOOLS.select_square_action = 'resize-bottom'; - is_bottom = true; - } - - //corner 1 - if(TOOLS.check_mouse_pos(TOOLS.select_data.x, TOOLS.select_data.y, sr_size, mouse.x, mouse.y)==true){ - document.body.style.cursor = "nw-resize"; - TOOLS.select_square_action = 'resize-1'; - } - //corner 2 - else if(TOOLS.check_mouse_pos(TOOLS.select_data.x + TOOLS.select_data.w - sr_size, TOOLS.select_data.y, sr_size, mouse.x, mouse.y)==true){ - document.body.style.cursor = "ne-resize"; - TOOLS.select_square_action = 'resize-2'; - } - //corner 3 - else if(TOOLS.check_mouse_pos(TOOLS.select_data.x + TOOLS.select_data.w - sr_size, TOOLS.select_data.y + TOOLS.select_data.h - sr_size, sr_size, mouse.x, mouse.y)==true){ - document.body.style.cursor = "nw-resize"; - TOOLS.select_square_action = 'resize-3'; - } - //corner 4 - else if(TOOLS.check_mouse_pos(TOOLS.select_data.x, TOOLS.select_data.y + TOOLS.select_data.h - sr_size, sr_size, mouse.x, mouse.y)==true){ - document.body.style.cursor = "ne-resize"; - TOOLS.select_square_action = 'resize-4'; - } - - if(TOOLS.select_square_action == '' - && mouse.x > TOOLS.select_data.x && mouse.y > TOOLS.select_data.y - && mouse.x < TOOLS.select_data.x + TOOLS.select_data.w && mouse.y < TOOLS.select_data.y + TOOLS.select_data.h){ - TOOLS.select_square_action = 'move'; - document.body.style.cursor = "move"; - } - if(TOOLS.select_square_action == '' && mouse.valid == true) - document.body.style.cursor = "auto"; - } - else if(type == 'release'){ - if(mouse.x < 0) mouse.x = 0; - if(mouse.y < 0) mouse.y = 0; - if(mouse.x >= WIDTH) mouse.x = WIDTH-1; - if(mouse.y >= HEIGHT) mouse.y = HEIGHT-1; - if(mouse.click_x >= WIDTH) mouse.click_x = WIDTH-1; - if(mouse.click_y >= HEIGHT) mouse.click_y = HEIGHT-1; - - if(TOOLS.select_square_action == ''){ - if(mouse.x != mouse.click_x && mouse.y != mouse.click_y){ - TOOLS.select_data = { - x: Math.min(mouse.x, mouse.click_x), - y: Math.min(mouse.y, mouse.click_y), - w: Math.abs(mouse.x - mouse.click_x), - h: Math.abs(mouse.y - mouse.click_y) - }; - } - } - else{ - MAIN.save_state(); - if(TOOLS.select_square_action=='move'){ - if(TOOLS.select_data != false){ - select_data_tmp = canvas_active().getImageData(TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h); - canvas_active().clearRect(TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h); - canvas_active().putImageData(select_data_tmp, mouse.x - mouse.click_x + TOOLS.select_data.x, mouse.y - mouse.click_y + TOOLS.select_data.y); - } - TOOLS.select_data.x += mouse.x - mouse.click_x; - TOOLS.select_data.y += mouse.y - mouse.click_y; - } - else{ - var s_x = TOOLS.select_data.x; - var s_y = TOOLS.select_data.y; - var d_x = TOOLS.select_data.w; - var d_y = TOOLS.select_data.h; - - if(TOOLS.select_square_action == 'resize-left'){ - s_x += mouse.x - mouse.click_x; - d_x -= mouse.x - mouse.click_x; - } - else if(TOOLS.select_square_action == 'resize-right') - d_x += mouse.x - mouse.click_x; - else if(TOOLS.select_square_action == 'resize-top'){ - s_y += mouse.y - mouse.click_y; - d_y -= mouse.y - mouse.click_y; - } - else if(TOOLS.select_square_action == 'resize-bottom') - d_y += mouse.y - mouse.click_y; - else if(TOOLS.select_square_action == 'resize-1'){ - s_x += mouse.x - mouse.click_x; - s_y += mouse.y - mouse.click_y; - d_x -= mouse.x - mouse.click_x; - d_y -= mouse.y - mouse.click_y; - } - else if(TOOLS.select_square_action == 'resize-2'){ - d_x += mouse.x - mouse.click_x; - s_y += mouse.y - mouse.click_y; - d_y -= mouse.y - mouse.click_y; - } - else if(TOOLS.select_square_action == 'resize-3'){ - d_x += mouse.x - mouse.click_x; - d_y += mouse.y - mouse.click_y; - } - else if(TOOLS.select_square_action == 'resize-4'){ - s_x += mouse.x - mouse.click_x; - d_x -= mouse.x - mouse.click_x; - d_y += mouse.y - mouse.click_y; - } - var s_x = Math.max(s_x, 0); - var s_y = Math.max(s_y, 0); - var d_x = Math.max(d_x, 0); - var d_y = Math.max(d_y, 0); - - var tempCanvas = document.createElement("canvas"); - var tempCtx = tempCanvas.getContext("2d"); - tempCanvas.width = Math.max(d_x, TOOLS.select_data.w); - tempCanvas.height = Math.max(d_y, TOOLS.select_data.h); - tempCtx.drawImage(canvas_active(true), TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h, 0, 0, TOOLS.select_data.w, TOOLS.select_data.h); - - canvas_active().clearRect(s_x, s_y, d_x, d_y); - canvas_active().drawImage(tempCanvas, 0, 0, TOOLS.select_data.w, TOOLS.select_data.h, s_x, s_y, d_x, d_y); - - TOOLS.select_data.x = s_x; - TOOLS.select_data.y = s_y; - TOOLS.select_data.w = d_x; - TOOLS.select_data.h = d_y; - } - } - TOOLS.draw_selected_area(); - LAYER.update_info_block(); - } - }; - this.check_mouse_pos = function(x, y, size, mouse_x, mouse_y){ - if(mouse_x > x-round(size) && mouse_x < x+round(size)) - if(mouse_y > y-round(size) && mouse_y < y+round(size)) - return true; - return false; - }; - this.draw_selected_area = function(no_resize){ - if(TOOLS.select_data == false) return false; - //draw area - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - var x = TOOLS.select_data.x; - var y = TOOLS.select_data.y; - var w = TOOLS.select_data.w; - var h = TOOLS.select_data.h; - if(ZOOM != 100){ - x = round(x); - y = round(y); - w = round(w); - h = round(h); - } - - //fill - canvas_front.fillStyle = "rgba(0, 255, 0, 0.3)"; - canvas_front.fillRect(x, y, w, h); - if(ZOOM <= 100){ - //borders - canvas_front.strokeStyle = "rgba(0, 255, 0, 1)"; - canvas_front.lineWidth = 1; - canvas_front.strokeRect(x+0.5, y+0.5, w, h); - } - if(no_resize == true) return true; - - //draw carners - square(x, y, 0, 0); - square(x+w, y, -1, 0); - square(x, y+h, 0, -1); - square(x+w, y+h, -1, -1); - - //draw centers - square(x+w/2, y, 0, 0); - square(x, y+h/2, 0, 0); - square(x+w/2, y+h, 0, -1); - square(x+w, y+h/2, -1, 0); - - function square(x, y, mx, my){ - var sr_size = Math.ceil(CON.sr_size/ZOOM*100); - x = round(x); - y = round(y); - canvas_front.beginPath(); - canvas_front.rect(x + mx * round(sr_size), y + my * round(sr_size), sr_size, sr_size); - canvas_front.fillStyle = "#0000ff"; - canvas_front.fill(); - } - }; - this.save_EXIF = function(){ - TOOLS.EXIF = this.exifdata; - //check length - var n = 0; - for(var i in TOOLS.EXIF) - n++; - if(n == 0) - TOOLS.EXIF = false; - }; - this.histogram = function(){ - POP.add({name: "param1", title: "Channel:", values: ["Gray", "Red", "Green", "Blue"], onchange: "TOOLS.histogram_onload()" }); - POP.add({title: 'Histogram:', function: function(){ - var html = ''; - return html; - }}); - POP.add({title: "Total pixels:", value: "" }); - POP.add({title: "Average:", value: "" }); - POP.show('Histogram', function(user_response){ - var param1 = parseInt(user_response.param1); - }, undefined, this.histogram_onload); - }; - this.histogram_onload = function(user_response){ - var img = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var imgData = img.data; - var channel_grey = document.getElementById("pop_data_param1_poptmp0"); - var channel_r = document.getElementById("pop_data_param1_poptmp1"); - var channel_g = document.getElementById("pop_data_param1_poptmp2"); - var channel_b = document.getElementById("pop_data_param1_poptmp3"); - - if(channel_grey.checked == true) channel = channel_grey.value; - else if(channel_r.checked == true) channel = channel_r.value; - else if(channel_g.checked == true) channel = channel_g.value; - else if(channel_b.checked == true) channel = channel_b.value; - - //collect data - var hist_data = []; - for(var i=0; i<= 255; i++) - hist_data[i] = 0; - var total = imgData.length/4; - var sum = 0; - var grey; - - if(channel == 'Gray'){ - for(var i = 0; i < imgData.length; i += 4){ - grey = round((imgData[i] + imgData[i+1] + imgData[i+2]) / 3); - hist_data[grey]++; - sum = sum + imgData[i] + imgData[i+1] + imgData[i+2]; - } - } - else if(channel == 'Red'){ - for(var i = 0; i < imgData.length; i += 4){ - hist_data[imgData[i]]++; - sum = sum + imgData[i] * 3; - } - } - else if(channel == 'Green'){ - for(var i = 0; i < imgData.length; i += 4){ - hist_data[imgData[i+1]]++; - sum = sum + imgData[i+1] * 3; - } - } - else if(channel == 'Blue'){ - for(var i = 0; i < imgData.length; i += 4){ - hist_data[imgData[i+2]]++; - sum = sum + imgData[i+2] * 3; - } - } - - //draw histogram - var c = document.getElementById("c_h").getContext("2d"); - c.rect(0, 0, 255, 100); - c.fillStyle = "#ffffff"; - c.fill(); - for(var i = 0; i <= 255; i++){ - if(hist_data[i] == 0) continue; - c.beginPath(); - c.strokeStyle = "#000000"; - c.lineWidth = 1; - c.moveTo(i + 0.5, 100 + 0.5); - c.lineTo(i + 0.5, 100 - round(hist_data[i]*255*100/total/6) + 0.5); - c.stroke(); - } - - document.getElementById("pop_data_totalpixel").value = HELPER.number_format(total, 0); - if(total > 0) - average = round(sum * 10 / total / 3) / 10; - else - average = '-'; - document.getElementById("pop_data_average").value = average; - }; - this.generate_sprites = function(gap){ - if(LAYERS.length == 1) return false; - MAIN.save_state(); - LAYER.layer_add(); - var xx = 0; - var yy = 0; - var max_height = 0; - var tmp = document.createElement("canvas"); - tmp.setAttribute('id', "tmp_canvas"); - tmp.width = WIDTH; - tmp.height = HEIGHT; - var W = WIDTH; - var H = HEIGHT; - for(i in LAYERS){ - if(i == LAYER.layer_active) continue; //end - if(LAYERS[i].visible == false) continue; - - tmp.getContext("2d").clearRect(0, 0, W, H); - tmp.getContext("2d").drawImage(document.getElementById(LAYERS[i].name), 0, 0); - - var trim_details = DRAW.trim_info(tmp, false); //trim - if(WIDTH == trim_details.left) continue; //empty layer - var width = W - trim_details.left - trim_details.right; - var height = H - trim_details.top - trim_details.bottom; - - if(xx + width > WIDTH){ - xx = 0; - yy += max_height; - max_height = 0; - } - if(yy % gap > 0 && gap > 0) - yy = yy - yy % gap + gap; - if(yy + height > HEIGHT){ - CON.autosize = false; - HEIGHT = yy + height; - RATIO = WIDTH/HEIGHT; - LAYER.set_canvas_size(); - } - - canvas_active().drawImage(tmp, trim_details.left, trim_details.top, width, height, xx, yy, width, height); - xx += width; - if(gap > 0) - xx = xx - xx % gap + gap; - - if(height > max_height) - max_height = height; - if(xx > WIDTH){ - xx = 0; - yy += max_height; - max_height = 0; - } - } - }; - this.unique_colors_count = function(canvas){ - var img = canvas.getContext("2d").getImageData(0, 0, canvas.width, canvas.height); - var imgData = img.data; - var colors = []; - var n = 0; - for(var i = 0; i < imgData.length; i += 4){ - if(imgData[i+3] == 0) continue; //transparent - var key = imgData[i]+"."+imgData[i+1]+"."+imgData[i+2]; - if(colors[key] == undefined){ - colors[key] = 1; - n++; - } - } - return n; - }; - this.calc_differences = function(sensitivity, canvas_preview, w, h){ - vlayer_active = parseInt(LAYER.layer_active); - //first layer - var img1 = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var imgData1 = img1.data; - - //second layer - var context2 = document.getElementById(LAYERS[vlayer_active + 1].name).getContext("2d"); - var img2 = context2.getImageData(0, 0, WIDTH, HEIGHT); - var imgData2 = img2.data; - - //result layer - if(canvas_preview == undefined){ - //add differences layer - LAYER.layer_add(); - canvas_active().rect(0, 0, WIDTH, HEIGHT); - canvas_active().fillStyle = "#ffffff"; - canvas_active().fill(); - var img3 = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - } - else{ - //work on preview layer - var canvas_tmp = document.createElement("canvas"); - canvas_tmp.width = WIDTH; - canvas_tmp.height = HEIGHT; - var img3 = canvas_tmp.getContext("2d").getImageData(0, 0, WIDTH, HEIGHT); - } - var imgData3 = img3.data; - for(var xx = 0; xx < WIDTH; xx++){ - for(var yy = 0; yy < HEIGHT; yy++){ - var x = (xx + yy * WIDTH) * 4; - if(Math.abs(imgData1[x] - imgData2[x]) > sensitivity - || Math.abs(imgData1[x+1] - imgData2[x+1]) > sensitivity - || Math.abs(imgData1[x+2] - imgData2[x+2]) > sensitivity - || Math.abs(imgData1[x+3] - imgData2[x+3]) > sensitivity){ - imgData3[x] = 255; - imgData3[x+1] = 0; - imgData3[x+2] = 0; - imgData3[x+3] = 255; - } - } - } - if(canvas_preview == undefined) - canvas_active().putImageData(img3, 0, 0); - else{ - canvas_tmp.getContext("2d").rect(0, 0, WIDTH, HEIGHT); - canvas_tmp.getContext("2d").fillStyle = "#ffffff"; - canvas_tmp.getContext("2d").fill(); - canvas_tmp.getContext("2d").putImageData(img3, 0, 0); - canvas_preview.clearRect(0, 0, w, h); - - canvas_preview.save(); - canvas_preview.scale(w/WIDTH, h/HEIGHT); - canvas_preview.drawImage(canvas_tmp, 0, 0); - canvas_preview.restore(); - } - }; - //method = otsu - this.thresholding = function(method, ctx, W, H, only_level){ - var img = ctx.getImageData(0, 0, W, H); - var imgData = img.data; - var hist_data = []; - var grey; - for(var i=0; i<= 255; i++) - hist_data[i] = 0; - for(var i = 0; i < imgData.length; i += 4){ - grey = round(0.2126 * imgData[i] + 0.7152 * imgData[i+1] + 0.0722 * imgData[i+2]); - hist_data[grey]++; - } - var level; - if(method == 'otsu') - level = this.otsu(hist_data, W*H); - else - alert('ERROR: unknown method in TOOLS.thresholding().'); - if(only_level === true) - return level; - var c; - for(var i = 0; i < imgData.length; i += 4){ - if(imgData[i+3] == 0) continue; //transparent - grey = round(0.2126 * imgData[i] + 0.7152 * imgData[i+1] + 0.0722 * imgData[i+2]); - if(grey < level) - c = 0; - else - c = 255; - imgData[i] = c; - imgData[i+1] = c; - imgData[i+2] = c; - } - ctx.putImageData(img, 0, 0); - }; - //http://en.wikipedia.org/wiki/Otsu%27s_Method - this.otsu = function(histogram, total){ - var sum = 0; - for (var i = 1; i < 256; ++i) - sum += i * histogram[i]; - var mB, mF, between; - var sumB = 0; - var wB = 0; - var wF = 0; - var max = 0; - var threshold = 0; - for (var i = 0; i < 256; ++i){ - wB += histogram[i]; - if(wB == 0) continue; - wF = total - wB; - if(wF == 0) break; - sumB += i * histogram[i]; - mB = sumB / wB; - mF = (sum - sumB) / wF; - between = wB * wF * Math.pow(mB - mF, 2); - if(between > max){ - max = between; - threshold = i; - } - } - return threshold; - }; - this.convert_color_to_alpha = function(context, W, H, color){ - var img = context.getImageData(0, 0, W, H); - var imgData = img.data; - var back_color = HELPER.hex2rgb(color); - - for(var i = 0; i < imgData.length; i += 4){ - if(imgData[i+3] == 0) continue; //transparent - - //calculate difference from requested color, and change alpha - var diff = Math.abs(imgData[i] - back_color.r) + Math.abs(imgData[i+1] - back_color.g) + Math.abs(imgData[i+2] - back_color.b)/3; - imgData[i+3] = Math.round(diff); - - //combining 2 layers in future will change colors, so make changes to get same colors in final image - //color_result = color_1 * (alpha_1 / 255) * (1 - A2 / 255) + color_2 * (alpha_2 / 255) - //color_2 = (color_result - color_1 * (alpha_1 / 255) * (1 - A2 / 255)) / (alpha_2 / 255) - imgData[i] = Math.ceil((imgData[i] - back_color.r * (1-imgData[i+3]/255)) / (imgData[i+3]/255)); - imgData[i+1] = Math.ceil((imgData[i+1] - back_color.g * (1-imgData[i+3]/255)) / (imgData[i+3]/255)); - imgData[i+2] = Math.ceil((imgData[i+2] - back_color.b * (1-imgData[i+3]/255)) / (imgData[i+3]/255)); - } - context.putImageData(img, 0, 0); - }; - this.color_zoom = function(context, W, H, zoom, center){ - var img = context.getImageData(0, 0, W, H); - var imgData = img.data; - var grey; - for(var i = 0; i < imgData.length; i += 4){ - if(imgData[i+3] == 0) continue; //transparent - - grey = round(0.2126 * imgData[i] + 0.7152 * imgData[i+1] + 0.0722 * imgData[i+2]); - - for(var j=0; j<3; j++){ - var k = i+j; - if(grey > center) - imgData[k] += (imgData[k] - center) * zoom; - else if(grey < center) - imgData[k] -= (center - imgData[k]) * zoom; - if(imgData[k] < 0) - imgData[k] = 0; - if(imgData[k] > 255) - imgData[k] = 255; - } - } - context.putImageData(img, 0, 0); - }; - this.recover_alpha = function(context, W, H, level){ - var img = context.getImageData(0, 0, W, H); - var imgData = img.data; - var tmp; - level = parseInt(level); - for(var i = 0; i < imgData.length; i += 4){ - tmp = imgData[i+3] + level; - if(tmp > 255) - tmp = 255; - imgData[i+3] = tmp; - } - context.putImageData(img, 0, 0); - }; - this.heatmap_effect = function(context, W, H){ - var img = context.getImageData(0, 0, W, H); - var imgData = img.data; - var grey, RGB; - for(var i = 0; i < imgData.length; i += 4){ - if(imgData[i+3] == 0) continue; //transparent - grey = round(0.2126 * imgData[i] + 0.7152 * imgData[i+1] + 0.0722 * imgData[i+2]); - RGB = this.color2heat(grey); - imgData[i] = RGB.R; - imgData[i+1] = RGB.G; - imgData[i+2] = RGB.B; - } - context.putImageData(img, 0, 0); - }; - this.color2heat = function(value){ - var RGB = {R:0,G:0,B:0}; - value = value / 255; - if (0 <= value && value <= 1/8) { - RGB.R = 0; - RGB.G = 0; - RGB.B = 4*value + .5; // .5 - 1 // b = 1/2 - } else if (1/8 < value && value <= 3/8) { - RGB.R = 0; - RGB.G = 4*value - .5; // 0 - 1 // b = - 1/2 - RGB.B = 1; // small fix - } else if (3/8 < value && value <= 5/8) { - RGB.R = 4*value - 1.5; // 0 - 1 // b = - 3/2 - RGB.G = 1; - RGB.B = -4*value + 2.5; // 1 - 0 // b = 5/2 - } else if (5/8 < value && value <= 7/8) { - RGB.R = 1; - RGB.G = -4*value + 3.5; // 1 - 0 // b = 7/2 - RGB.B = 0; - } else if (7/8 < value && value <= 1) { - RGB.R = -4*value + 4.5; // 1 - .5 // b = 9/2 - RGB.G = 0; - RGB.B = 0; - } else { // should never happen - value > 1 - RGB.R = .5; - RGB.G = 0; - RGB.B = 0; - } - // scale for hex conversion - RGB.R *= 255; - RGB.G *= 255; - RGB.B *= 255; - - RGB.R = Math.round(RGB.R); - RGB.G = Math.round(RGB.G); - RGB.B = Math.round(RGB.B); - - return RGB; - }; - this.add_borders = function(context, W, H, color, size){ - context.strokeStyle = color; - context.lineWidth = size; - HELPER.roundRect(context, 0 + 0.5, 0 + 0.5, - W-1, H-1, - 0, false, true); - }; - this.grains_effect = function(context, W, H, level){ - if(level == 0) return context; - var img = context.getImageData(0, 0, W, H); - var imgData = img.data; - for(var j = 0; j < H; j++){ - for(var i = 0; i < W; i++){ - var x = (i + j*W) * 4; - if(imgData[x+3] == 0) continue; //transparent - //increase it's lightness - var delta = HELPER.getRandomInt(0, level); - if(delta == 0) continue; - - if(imgData[x] - delta < 0) - imgData[x] = -(imgData[x] - delta); - else - imgData[x] = imgData[x] - delta; - if(imgData[x+1] - delta < 0) - imgData[x+1] = -(imgData[x+1] - delta); - else - imgData[x+1] = imgData[x+1] - delta; - if(imgData[x+2] - delta < 0) - imgData[x+2] = -(imgData[x+2] - delta); - else - imgData[x+2] = imgData[x+2] - delta; - } - } - context.putImageData(img, 0, 0); - }; - } +var TOOLS = new TOOLS_CLASS(); + +function TOOLS_CLASS(){ + this.select_square_action = ''; + this.select_data = false; + this.EXIF = false; + this.last_line_x; + this.last_line_y; + var clone_data = false; + var COLOUR_copy; + var curve_points = []; + + this.draw_helpers = function(){ + //left menu + var html = ''; + for(var i in ACTION_DATA){ + html += ''+"\n"; + } + html += '
'+"\n"; + } + document.getElementById("all_colors").innerHTML = html; + }; + this.update_attribute = function(object, next_value){ + var max_value = 500; + for(var k in this.action_data().attributes){ + if(k != object.id) continue; + if(this.action_data().attributes[k]===true || this.action_data().attributes[k]===false){ + //true / false + var value; + if(next_value == 0) + value=true; + else + value=false; + //save + this.action_data().attributes[k] = value; + this.show_action_attributes(); + } + else if(typeof this.action_data().attributes[k] == 'object'){ + //select + var key = k.replace("_values",""); + this.action_data().attributes[key] = object.value; + } + else if(this.action_data().attributes[k][0] == '#'){ + //color + var key = k.replace("_values",""); + this.action_data().attributes[key] = object.value; + } + else{ + //numbers + if(next_value != undefined){ + if(next_value > 0){ + if(parseInt(this.action_data().attributes[k]) == 0) + object.value = 1; + else if(parseInt(this.action_data().attributes[k]) == 1) + object.value = 5; + else if(parseInt(this.action_data().attributes[k]) == 5) + object.value = 10; + else + object.value = parseInt(this.action_data().attributes[k]) + next_value; + } + else if(next_value < 0){ + if(parseInt(this.action_data().attributes[k]) == 1) + object.value = 0; + else if(parseInt(this.action_data().attributes[k]) <= 5) + object.value = 1; + else if(parseInt(this.action_data().attributes[k]) <= 10) + object.value = 5; + else if(parseInt(this.action_data().attributes[k]) <= 20) + object.value = 10; + else + object.value = parseInt(this.action_data().attributes[k]) + next_value; + } + + if(object.value < 0) object.value = 0; + if(object.value > max_value) object.value = max_value; + } + else{ + if(object.value.length==0) return false; + object.value = parseInt(object.value); + object.value = Math.abs(object.value); + if(object.value==0 || isNaN(object.value) || value > max_value) + object.value = this.action_data().attributes[k]; + } + if(k == 'power' && object.value > 100) + object.value = 100; + + //save + this.action_data().attributes[k] = object.value; + + document.getElementById(k).value = object.value; + } + if(this.action_data().on_update != undefined) + TOOLS[this.action_data().on_update](object.value); + } + }; + this.action = function(key){ + TOOLS[key]('init', {valid:true}); + if(ACTION == key) return false; + + //change + if(ACTION != '') + document.getElementById(ACTION).className = ""; + ACTION = key; + document.getElementById(key).className = "active"; + this.show_action_attributes(); + + return false; + }; + this.action_data = function(){ + for(var i in ACTION_DATA){ + if(ACTION_DATA[i].name == ACTION) + return ACTION_DATA[i]; + } + }; + this.show_action_attributes = function(){ + html = ''; + var step = 10; + for(var k in this.action_data().attributes){ + var title = k[0].toUpperCase() + k.slice(1); + title = title.replace("_"," "); + if(TOOLS.action_data().attributes[k+"_values"] != undefined) continue; + if(this.action_data().attributes[k]===true || this.action_data().attributes[k]===false){ + //true / false + if(this.action_data().attributes[k]==true) + html += '
'+title+'
'; + else + html += '
'+title+'
'; + } + else if(typeof TOOLS.action_data().attributes[k] == 'object'){ + //drop down select + html += ''; + } + else if(TOOLS.action_data().attributes[k][0] == '#'){ + //color + html += ''; //table for 100% width + html += ''; + html += ''; + html += ''; + html += ''; + html += '
'+title+':
'; + } + else{ + //numbers + html += '
'; + html += ''; //table for 100% width + html += ''; + html += ''; + html += ''; + html += ''; + html += '
'+title+':
'; + html += '
+
'; + html += '
-
'; + html += '
'; + } + } + document.getElementById("action_attributes").innerHTML = html; + }; + this.set_color = function(object){ + if(HELPER.chech_input_color_support('main_colour') == true && object.id == 'main_colour') + COLOUR = object.value; + else + COLOUR = HELPER.rgb2hex_all(object.style.backgroundColor); + COLOUR_copy = COLOUR; + + if(HELPER.chech_input_color_support('main_colour') == true) + document.getElementById("main_colour").value = COLOUR; //supported + else + document.getElementById("main_colour_alt").style.backgroundColor = COLOUR; //not supported + + document.getElementById("color_hex").value = COLOUR; + var colours = HELPER.hex2rgb(COLOUR); + document.getElementById("rgb_r").value = colours.r; + document.getElementById("rgb_g").value = colours.g; + document.getElementById("rgb_b").value = colours.b; + }; + this.set_color_manual = function(object){ + if(object.value.length == 6 && object.value[0] != '#'){ + COLOUR = '#'+object.value; + this.sync_colors(); + } + if(object.value.length == 7){ + COLOUR = object.value; + this.sync_colors(); + } + else if(object.value.length > 7) + object.value = COLOUR; + }; + this.set_color_rgb = function(object, c){ + var colours = HELPER.hex2rgb(COLOUR); + if(object.value.length > 3){ + object.value = colours[c]; + } + else if(object.value.length > 0){ + value = object.value; + value = parseInt(value); + if(isNaN(value) || value != object.value || value > 255 || value < 0){ + object.value = colours[c]; + return false; + } + COLOUR = "#" + ("000000" + HELPER.rgbToHex(document.getElementById("rgb_r").value, document.getElementById("rgb_g").value, document.getElementById("rgb_b").value)).slice(-6); + ALPHA = document.getElementById("rgb_a").value; + document.getElementById("rgb_a").value = ALPHA; + this.sync_colors(); + } + }; + this.sync_colors = function(){ + document.getElementById("color_hex").value = COLOUR; + + if(HELPER.chech_input_color_support('main_colour') == true) + document.getElementById("main_colour").value = COLOUR; //supported + else + document.getElementById("main_colour_alt").style.backgroundColor = COLOUR; //not supported + + var colours = HELPER.hex2rgb(COLOUR); + document.getElementById("rgb_r").value = colours.r; + document.getElementById("rgb_g").value = colours.g; + document.getElementById("rgb_b").value = colours.b; + }; + this.toggle_color_select = function(){ + if(POP.active == false){ + POP.add({title: 'Colour:', function: function(){ + COLOUR_copy = COLOUR; + + var html = ''; + html += ''; + html += ''; + html += ' '; + html += ' '; + html += ' '; + html += ''; + html += ''; + html += ' '; + html += ' '; + html += ' '; + html += ''; + html += '
Lum:0
Alpha:'+ALPHA+'
'; + return html; + }}); + POP.show('Select color', function(user_response){ + var param1 = parseInt(user_response.param1); + }, undefined, this.toggle_color_select_onload); + } + else + POP.hide(); + }; + this.change_lum = function(lumi){ + lumi = parseInt(lumi); + var c3 = HELPER.hex2rgb(COLOUR_copy); + c3.r += lumi; + c3.g += lumi; + c3.b += lumi; + + if(c3.r < 0) c3.r = 0; + if(c3.g < 0) c3.g = 0; + if(c3.b < 0) c3.b = 0; + if(c3.r > 255) c3.r = 255; + if(c3.g > 255) c3.g = 255; + if(c3.b > 255) c3.b = 255; + + COLOUR = "#" + ("000000" + HELPER.rgbToHex(c3.r, c3.g, c3.b)).slice(-6); + this.sync_colors(); + }; + this.change_alpha = function(value){ + ALPHA = parseInt(value); + document.getElementById("rgb_a").value = ALPHA; + }; + this.toggle_color_select_onload = function(){ + var img = new Image(); + img.onload = function(){ + document.getElementById("c_all").getContext("2d").drawImage(img, 0, 0); + document.getElementById("c_all").onmousedown = function(event){ + if(event.offsetX) { + mouse_x = event.offsetX; + mouse_y = event.offsetY; + } + else if(event.layerX) { + mouse_x = event.layerX; + mouse_y = event.layerY; + } + var c = document.getElementById("c_all").getContext("2d").getImageData(mouse_x, mouse_y, 1, 1).data; + COLOUR = "#" + ("000000" + HELPER.rgbToHex(c[0], c[1], c[2])).slice(-6); + TOOLS.sync_colors(); + COLOUR_copy = COLOUR; + document.getElementById("lum_ranger").value = 0; + }; + }; + img.src = 'img/colorwheel.png'; + }; + //type = click, right_click, drag, move, release + this.select_tool = function(type, mouse, event){ + if(mouse == undefined) return false; + if(mouse.valid == false) return true; + if(mouse.click_valid == false) return true; + if(event != undefined && event.target.id == "canvas_preview") return true; + if(type == 'drag'){ + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + canvas_front.drawImage(canvas_active(true), mouse.x - mouse.click_x, mouse.y - mouse.click_y); + } + else if(type == 'release'){ + if(mouse.valid == false || mouse.click_x === false) return false; + if(mouse.x - mouse.click_x == 0 || mouse.y - mouse.click_y == 0) return false; + MAIN.save_state(); + var tmp = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + canvas_active().putImageData(tmp, mouse.x - mouse.click_x, mouse.y - mouse.click_y); + } + }; + this.magic_wand = function(type, mouse, event){ + if(mouse.valid == false) return true; + if(type == 'click'){ + MAIN.save_state(); + DRAW.tool_magic_wand(canvas_active(), WIDTH, HEIGHT, mouse.x, mouse.y, TOOLS.action_data().attributes.sensitivity, TOOLS.action_data().attributes.anti_aliasing); + } + }; + this.erase = function(type, mouse, event){ + if(mouse.valid == false) return true; + var strict = TOOLS.action_data().attributes.strict; + var size = TOOLS.action_data().attributes.size; + var is_circle = TOOLS.action_data().attributes.circle; + + if(type == 'click'){ + MAIN.save_state(); + if(is_circle == false){ + canvas_active().save(); + canvas_active().globalCompositeOperation = 'destination-out'; + canvas_active().fillStyle = "rgba(255, 255, 255, "+ALPHA/255+")"; + canvas_active().fillRect(mouse.x - Math.ceil(size/2)+1, mouse.y - Math.ceil(size/2)+1, size, size); + canvas_active().restore(); + } + else{ + + if(strict == false){ + var radgrad = canvas_active().createRadialGradient( + mouse.x, mouse.y, size/8, + mouse.x, mouse.y, size/2); + radgrad.addColorStop(0, "rgba(255, 255, 255, "+ALPHA/255+")"); + radgrad.addColorStop(1, "rgba(255, 255, 255, 0)"); + } + + //set Composite + canvas_active().save(); + canvas_active().globalCompositeOperation = 'destination-out'; + if(strict == true) + canvas_active().fillStyle = "rgba(255, 255, 255, "+ALPHA/255+")"; + else + canvas_active().fillStyle = radgrad; + canvas_active().beginPath(); + canvas_active().arc(mouse.x, mouse.y, size/2, 0,Math.PI*2,true); + canvas_active().fill(); + canvas_active().restore(); + } + } + else if(type == 'drag'){ + if(is_circle == false){ + canvas_active().save(); + canvas_active().globalCompositeOperation = 'destination-out'; + if(ALPHA < 255) + canvas_active().fillStyle = "rgba(255, 255, 255, "+ALPHA/255/10+")"; + else + canvas_active().fillStyle = COLOUR; + canvas_active().fillRect(mouse.x - Math.ceil(size/2)+1, mouse.y - Math.ceil(size/2)+1, size, size); + canvas_active().restore(); + } + else{ + if(strict == false){ + var radgrad = canvas_active().createRadialGradient( + mouse.x, mouse.y, size/10, + mouse.x, mouse.y, size/2); + if(ALPHA < 255) + radgrad.addColorStop(0, "rgba(255, 255, 255, "+ALPHA/255/10+")"); + else + radgrad.addColorStop(0, "rgba(255, 255, 255, 1)"); + radgrad.addColorStop(1, "rgba(255, 255, 255, 0)"); + } + //set Composite + canvas_active().save(); + canvas_active().globalCompositeOperation = 'destination-out'; + if(strict == true){ + if(ALPHA < 255) + canvas_active().fillStyle = "rgba(255, 255, 255, "+ALPHA/255/10+")"; + else + canvas_active().fillStyle = COLOUR; + } + else + canvas_active().fillStyle = radgrad; + canvas_active().beginPath(); + canvas_active().arc(mouse.x, mouse.y, size/2, 0,Math.PI*2,true); + canvas_active().fill(); + canvas_active().restore(); + } + DRAW.zoom(undefined, false); + } + else if(type == 'move'){ + var size1 = Math.floor((size)/2); + var size2 = Math.floor((size)/2); + if(size%2 == 0) size2--; + else{ + size1--; + } + + //show size + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + canvas_front.lineWidth = 1; + if(is_circle == false){ + HELPER.dashedRect(canvas_front, mouse.x - Math.ceil(size/2) + 1, mouse.y - Math.ceil(size/2) + 1, mouse.x + Math.floor(size/2), mouse.y + Math.floor(size/2), 1, '#000000'); + } + else{ + canvas_front.beginPath(); + canvas_front.strokeStyle = "#000000"; + canvas_front.arc(mouse.x, mouse.y, size/2, 0,Math.PI*2,true); + canvas_front.stroke(); + } + } + }; + this.fill = function(type, mouse, event){ + if(mouse.valid == false) return true; + if(type == 'click'){ + MAIN.save_state(); + var color_to = HELPER.hex2rgb(COLOUR); + color_to.a = ALPHA; + DRAW.toolFiller(canvas_active(), WIDTH, HEIGHT, mouse.x, mouse.y, color_to, TOOLS.action_data().attributes.sensitivity, TOOLS.action_data().attributes.anti_aliasing); + } + }; + this.pick_color = function(type, mouse, event){ + if(mouse.valid == false) return true; + if(type == 'click'){ + var c = canvas_active().getImageData(mouse.x, mouse.y, 1, 1).data; + COLOUR = "#" + ("000000" + HELPER.rgbToHex(c[0], c[1], c[2])).slice(-6); + + //set alpha + ALPHA = c[3]; + document.getElementById("rgb_a").value = ALPHA; + + TOOLS.sync_colors(); + } + }; + this.pencil = function(type, mouse, event){ + if(mouse.valid == false) return true; + var color_rgb = HELPER.hex2rgb(COLOUR); + if(type == 'click'){ + MAIN.save_state(); + } + else if(type == 'drag'){ + //why no simple lines? this way turns off aliasing + if(mouse.last_x != false && mouse.last_y != false){ + //saving + dist_x = mouse.last_x - mouse.x; + dist_y = mouse.last_y - mouse.y; + distance = Math.sqrt((dist_x*dist_x)+(dist_y*dist_y)); + radiance = Math.atan2(dist_y, dist_x); + for(var i=0; i 0){ + canvas.fillStyle = HELPER.darkenColor(COLOUR, -30); + alpha_tmp = ALPHA; + if(alpha_tmp < 255) + alpha_tmp /= 10; + + color_rgb.r -= 50; + color_rgb.g -= 50; + color_rgb.b -= 50; + if(color_rgb.r < 0) color_rgb.r *= -1; + if(color_rgb.g < 0) color_rgb.g *= -1; + if(color_rgb.b < 0) color_rgb.b *= -1; + + canvas.fillStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+alpha_tmp/255+")"; + for (cnt = 0; cnt < dpth; cnt++) + canvas.fillText(text, xx + dx * cnt, yy + letters_height + dy * cnt); + color_rgb = HELPER.hex2rgb(COLOUR); + } + + //main text + canvas.fillStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; + canvas.strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; + canvas.lineWidth = stroke_size; + if(fill_style == 'Fill' || fill_style == 'Both') + canvas.fillText(text, xx, yy + letters_height); + if(fill_style == 'Stroke' || fill_style == 'Both') + canvas.strokeText(text, xx, yy + letters_height); + + DRAW.zoom(); + }; + this.draw_square = function(type, mouse, event){ + if(mouse.click_valid == false) return true; + var color_rgb = HELPER.hex2rgb(COLOUR); + if(type == 'drag'){ + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + canvas_front.beginPath(); + + var start_x = mouse.click_x; + var start_y = mouse.click_y; + var dx = mouse.x - mouse.click_x; + var dy = mouse.y - mouse.click_y; + if(TOOLS.action_data().attributes.square==true){ + dx = Math.max(Math.abs(dx), Math.abs(dy)); + dy = Math.max(Math.abs(dx), Math.abs(dy)); + if(mouse.x < mouse.click_x) start_x = start_x - dx; + if(mouse.y < mouse.click_y) start_y = start_y - dy; + } + + canvas_front.fillStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; + canvas_front.strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; + canvas_front.lineWidth = 1; + if(TOOLS.action_data().attributes.fill==true) + HELPER.roundRect(canvas_front, start_x + 0.5, start_y + 0.5, + dx, dy, + TOOLS.action_data().attributes.round, true, false); + else + HELPER.roundRect(canvas_front, start_x + 0.5, start_y + 0.5, + dx, dy, + TOOLS.action_data().attributes.round, false, true); + } + else if(type == 'release'){ + MAIN.save_state(); + canvas_active().beginPath(); + var start_x = mouse.click_x; + var start_y = mouse.click_y; + var dx = mouse.x - mouse.click_x; + var dy = mouse.y - mouse.click_y; + if(TOOLS.action_data().attributes.square==true){ + dx = Math.max(Math.abs(dx), Math.abs(dy)); + dy = Math.max(Math.abs(dx), Math.abs(dy)); + if(mouse.x < mouse.click_x) start_x = start_x - dx; + if(mouse.y < mouse.click_y) start_y = start_y - dy; + } + + canvas_active().fillStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; + canvas_active().strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; + canvas_active().lineWidth = 1; + if(TOOLS.action_data().attributes.fill==true) + HELPER.roundRect(canvas_active(), start_x + 0.5, start_y + 0.5, + dx, dy, + TOOLS.action_data().attributes.round, true, false); + else + HELPER.roundRect(canvas_active(), start_x + 0.5, start_y + 0.5, + dx, dy, + TOOLS.action_data().attributes.round, false, true); + } + }; + this.draw_circle = function(type, mouse, event){ + if(mouse.click_valid == false) return true; + var color_rgb = HELPER.hex2rgb(COLOUR); + if(type == 'drag'){ + dist_x = mouse.x - mouse.click_x; + dist_y = mouse.y - mouse.click_y; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + if(TOOLS.action_data().attributes.circle==true) + dist_x = dist_y = Math.min(dist_x, dist_y); + if(TOOLS.action_data().attributes.fill==true) + HELPER.drawEllipseByCenter(canvas_front, mouse.click_x, mouse.click_y, dist_x*2, dist_y*2, "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")", true); + else + HELPER.drawEllipseByCenter(canvas_front, mouse.click_x, mouse.click_y, dist_x*2, dist_y*2, "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"); + } + else if(type == 'release'){ + MAIN.save_state(); + dist_x = mouse.x - mouse.click_x; + dist_y = mouse.y - mouse.click_y; + if(TOOLS.action_data().attributes.circle==true) + dist_x = dist_y = Math.min(dist_x, dist_y); + canvas_active().lineWidth = 1; + if(TOOLS.action_data().attributes.fill==true) + HELPER.drawEllipseByCenter(canvas_active(), mouse.click_x, mouse.click_y, dist_x*2, dist_y*2, "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")", true); + else + HELPER.drawEllipseByCenter(canvas_active(), mouse.click_x, mouse.click_y, dist_x*2, dist_y*2, "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"); + } + }; + this.update_brush = function(){ + document.getElementById('anti_alias').style.display=''; + if(TOOLS.action_data().attributes.type != 'Brush') + document.getElementById('anti_alias').style.display='none'; + document.getElementById('blur').style.display=''; + if(TOOLS.action_data().attributes.type != 'Brush') + document.getElementById('blur').style.display='none'; + }; + this.desaturate_tool = function(type, mouse, event){ + if(mouse.valid == false) return true; + var size = TOOLS.action_data().attributes.size; + var size_half = Math.round(size/2); + var xx = mouse.x - size/2; + var yy = mouse.y - size/2; + if(xx < 0) xx = 0; + if(yy < 0) yy = 0; + + if(type == 'click'){ + MAIN.save_state(); + var imageData = canvas_active().getImageData(xx, yy, size, size); + var filtered = ImageFilters.GrayScale(imageData); //add effect + HELPER.drawImage_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front"), TOOLS.action_data().attributes.anti_alias); + } + else if(type == 'drag'){ + var imageData = canvas_active().getImageData(xx, yy, size, size); + var filtered = ImageFilters.GrayScale(imageData); //add effect + HELPER.drawImage_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front"), TOOLS.action_data().attributes.anti_alias); + } + if(type == 'move' || type == 'drag'){ + //show size + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + canvas_front.beginPath(); + canvas_front.strokeStyle = "#000000"; + canvas_front.lineWidth = 1; + canvas_front.arc(mouse.x, mouse.y, size_half, 0, Math.PI*2, true); + canvas_front.stroke(); + } + }; + this.brush = function(type, mouse, event){ + if(mouse.valid == false) return true; + var brush_type = TOOLS.action_data().attributes.type; + var color_rgb = HELPER.hex2rgb(COLOUR); + + if(type == 'click') + MAIN.save_state(); + + if(brush_type == 'Brush'){ + if(type == 'click'){ + //init settings + canvas_active().beginPath(); + canvas_active().strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; + canvas_active().lineWidth = TOOLS.action_data().attributes.size; + canvas_active().lineCap = 'round'; + canvas_active().lineJoin = 'round'; + + if(ALPHA < 255){ + canvas_front.beginPath(); + canvas_front.strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; + canvas_front.lineWidth = TOOLS.action_data().attributes.size; + canvas_front.lineCap = 'round'; + canvas_front.lineJoin = 'round'; + } + + //blur + canvas_active().shadowBlur = 0; + if(TOOLS.action_data().attributes.anti_alias == true){ + canvas_active().shadowColor = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; + canvas_active().shadowBlur = Math.round(TOOLS.action_data().attributes.size); + } + } + else if(type == 'drag' && mouse.last_x != false && mouse.last_y != false){ + if(ALPHA == 255) + canvas_active().beginPath(); + canvas_active().moveTo(mouse.last_x, mouse.last_y); + canvas_active().lineTo(mouse.x, mouse.y); + if(ALPHA == 255) + canvas_active().stroke(); + + //now draw preview + if(ALPHA < 255){ + canvas_front.beginPath(); + //clean from last line + canvas_front.globalCompositeOperation = "destination-out"; + canvas_front.strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", 1)"; + canvas_front.moveTo(mouse.last_x, mouse.last_y); + canvas_front.lineTo(mouse.x, mouse.y); + canvas_front.stroke(); + //reset + canvas_front.strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; + canvas_front.globalCompositeOperation = "source-over"; + //draw new line segment + canvas_front.moveTo(mouse.last_x, mouse.last_y); + canvas_front.lineTo(mouse.x, mouse.y); + canvas_front.stroke(); + } + } + else if(type == 'release'){ + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + //paint everything + canvas_active().stroke(); + + //if mouse was not moved + if(mouse.click_x == mouse.x && mouse.click_y == mouse.y){ + canvas_active().beginPath(); + canvas_active().arc(mouse.x, mouse.y, TOOLS.action_data().attributes.size/2, 0, 2 * Math.PI, false); + canvas_active().fillStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; + canvas_active().fill(); + } + canvas_active().shadowBlur = 0; + } + else if(type == 'move'){ + //show size + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + canvas_front.beginPath(); + canvas_front.strokeStyle = "#000000"; + canvas_front.lineWidth = 1; + canvas_front.arc(mouse.x, mouse.y, TOOLS.action_data().attributes.size/2, 0, Math.PI*2, true); + canvas_front.stroke(); + } + } + else if(brush_type == 'BezierCurve'){ + if(type == 'click') + BezierCurveBrush.startCurve(mouse.x, mouse.y); + else if(type == 'drag' && mouse.last_x != false && mouse.last_y != false){ + var color_rgb = HELPER.hex2rgb(COLOUR); + canvas_active().strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; + canvas_active().lineWidth = 0.5; + + BezierCurveBrush.draw(canvas_active(), color_rgb, mouse.x, mouse.y, TOOLS.action_data().attributes.size); + } + } + else if(brush_type == 'Chrome'){ + if(type == 'click'){ + chrome_brush.init(canvas_active()); + chrome_brush.strokeStart(mouse.x, mouse.y); + } + else if(type == 'drag' && mouse.last_x != false && mouse.last_y != false){ + var color_rgb = HELPER.hex2rgb(COLOUR); + canvas_active().strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; + canvas_active().lineWidth = 1; + + chrome_brush.stroke(color_rgb, mouse.x, mouse.y, TOOLS.action_data().attributes.size); + } + } + else if(brush_type == 'Fur'){ + if(type == 'click'){ + points = new Array(); + prevMouseX = mouse.x; + prevMouseY = mouse.y; + count = 0; + } + else if(type == 'drag' && mouse.last_x != false && mouse.last_y != false){ + var color_rgb = HELPER.hex2rgb(COLOUR); + canvas_active().strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", 0.1)"; + canvas_active().lineWidth = 1; + + f = mouse.x; + c = mouse.y; + var e, b, a, g; + points.push([f, c]); + canvas_active().beginPath(); + canvas_active().moveTo(prevMouseX, prevMouseY); + canvas_active().lineTo(f, c); + canvas_active().stroke(); + for (e = 0; e < points.length; e++) { + b = points[e][0] - points[count][0]; + a = points[e][1] - points[count][1]; + g = b * b + a * a; + var g_size = Math.round(400 * TOOLS.action_data().attributes.size); + if (g < g_size && Math.random() > g / g_size) { + canvas_active().beginPath(); + canvas_active().moveTo(f + (b * 0.5), c + (a * 0.5)); + canvas_active().lineTo(f - (b * 0.5), c - (a * 0.5)); + canvas_active().stroke(); + } + } + prevMouseX = f; + prevMouseY = c; + count++; + } + } + else if(brush_type == 'Grouped'){ + groups_n = TOOLS.action_data().attributes.size; + gsize = 10; + random_power = 5; + + if(type == 'click'){ + chrome_brush.init(canvas_active()); + chrome_brush.strokeStart(mouse.x, mouse.y); + groups = []; + + for(var g=0; g < groups_n; g++){ + groups[g] = {}; + groups[g].x = HELPER.getRandomInt(-gsize, gsize); + groups[g].y = HELPER.getRandomInt(-gsize, gsize); + } + } + else if(type == 'drag' && mouse.last_x != false && mouse.last_y != false){ + canvas_active().strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; + canvas_active().lineWidth = 0.5; + + for(var g in groups){ + canvas_active().beginPath(); + canvas_active().moveTo(mouse.last_x + groups[g].x, mouse.last_y + groups[g].y); + + //randomize here + groups[g].x += HELPER.getRandomInt(-random_power, random_power); + groups[g].y += HELPER.getRandomInt(-random_power, random_power); + if(groups[g].x < -gsize) groups[g].x = -gsize + random_power; + if(groups[g].y < -gsize) groups[g].y = -gsize + random_power; + if(groups[g].x > gsize) groups[g].x = gsize - random_power; + if(groups[g].y > gsize) groups[g].y = gsize - random_power; + + canvas_active().lineTo(mouse.x + groups[g].x, mouse.y + groups[g].y); + canvas_active().stroke(); + } + } + } + else if(brush_type == 'Shaded'){ + if(type == 'click'){ + shaded_brush.init(canvas_active()); + shaded_brush.strokeStart(mouse.x, mouse.y); + } + else if(type == 'drag' && mouse.last_x != false && mouse.last_y != false){ + var color_rgb = HELPER.hex2rgb(COLOUR); + canvas_active().strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; + canvas_active().lineWidth = 1; + + shaded_brush.stroke(color_rgb, mouse.x, mouse.y, TOOLS.action_data().attributes.size); + } + } + else if(brush_type == 'Sketchy'){ + if(type == 'click'){ + sketchy_brush.init(canvas_active()); + sketchy_brush.strokeStart(mouse.x, mouse.y); + } + else if(type == 'drag' && mouse.last_x != false && mouse.last_y != false){ + var color_rgb = HELPER.hex2rgb(COLOUR); + canvas_active().strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; + canvas_active().lineWidth = 1; + + sketchy_brush.stroke(color_rgb, mouse.x, mouse.y, TOOLS.action_data().attributes.size); + } + } + }; + this.gradient_tool = function(type, mouse, event){ + if(mouse != undefined && mouse.valid == false && type != 'init') return true; + var power = TOOLS.action_data().attributes.power; + if(power > 99) power = 99; + //var color1, color2; + + if(type == 'init'){ + POP.add({name: "param1", title: "Color #1:", value: '#000000', type: 'color' }); + POP.add({name: "param2", title: "Transparency #1:", value: '255', range:[0, 255] }); + POP.add({name: "param3", title: "Color #2:", value: '#ffffff', type: 'color' }); + POP.add({name: "param4", title: "Transparency #2:", value: '255', range:[0, 255] }); + POP.preview_in_main = true; + POP.show('Text', function(user_response){ + MAIN.save_state(); + color1 = HELPER.hex2rgb(user_response.param1); + color1.a = parseInt(user_response.param2); + + color2 = HELPER.hex2rgb(user_response.param3); + color2.a = parseInt(user_response.param4); + }); + } + else if(type == 'drag'){ + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + + if(TOOLS.action_data().attributes.radial == false){ + //linear + canvas_front.rect(0, 0, WIDTH, HEIGHT); + if(mouse.x > mouse.click_x){ + var grd = canvas_front.createLinearGradient( + mouse.click_x, mouse.click_y, + mouse.x, mouse.y); + } + else{ + var grd = canvas_front.createLinearGradient( + mouse.x, mouse.y, + mouse.click_x, mouse.click_y); + } + grd.addColorStop(0, "rgba("+color1.r+", "+color1.g+", "+color1.b+", "+color1.a/255+")"); + grd.addColorStop(1, "rgba("+color2.r+", "+color2.g+", "+color2.b+", "+color2.a/255+")"); + canvas_front.fillStyle = grd; + canvas_front.fill(); + } + else{ + //radial + var dist_x = mouse.click_x - mouse.x; + var dist_y = mouse.click_y - mouse.y; + var distance = Math.sqrt((dist_x*dist_x)+(dist_y*dist_y)); + var radgrad = canvas_front.createRadialGradient( + mouse.click_x, mouse.click_y, distance*power/100, + mouse.click_x, mouse.click_y, distance); + radgrad.addColorStop(0, "rgba("+color1.r+", "+color1.g+", "+color1.b+", "+color1.a/255+")"); + radgrad.addColorStop(1, "rgba("+color2.r+", "+color2.g+", "+color2.b+", "+color2.a/255+")"); + + canvas_front.fillStyle = radgrad; + canvas_front.fillRect(0,0,WIDTH,HEIGHT); + } + //draw line + canvas_front.beginPath(); + canvas_front.strokeStyle = "#ff0000"; + canvas_front.lineWidth = 1; + var xx = mouse.x; + var yy = mouse.y; + canvas_front.moveTo(mouse.click_x + 0.5, mouse.click_y + 0.5); + canvas_front.lineTo(xx + 0.5, yy + 0.5); + canvas_front.stroke(); + } + else if(type == 'release'){ + MAIN.save_state(); + if(TOOLS.action_data().attributes.radial == false){ + //linear + canvas_active().rect(0, 0, WIDTH, HEIGHT); + if(mouse.x > mouse.click_x){ + var grd = canvas_active().createLinearGradient( + mouse.click_x, mouse.click_y, + mouse.x, mouse.y); + } + else{ + var grd = canvas_active().createLinearGradient( + mouse.x, mouse.y, + mouse.click_x, mouse.click_y); + } + grd.addColorStop(0, "rgba("+color1.r+", "+color1.g+", "+color1.b+", "+color1.a/255+")"); + grd.addColorStop(1, "rgba("+color2.r+", "+color2.g+", "+color2.b+", "+color2.a/255+")"); + canvas_active().fillStyle = grd; + canvas_active().fill(); + } + else{ + //radial + var dist_x = mouse.click_x - mouse.x; + var dist_y = mouse.click_y - mouse.y; + var distance = Math.sqrt((dist_x*dist_x)+(dist_y*dist_y)); + var radgrad = canvas_active().createRadialGradient( + mouse.click_x, mouse.click_y, distance*power/100, + mouse.click_x, mouse.click_y, distance); + radgrad.addColorStop(0, "rgba("+color1.r+", "+color1.g+", "+color1.b+", "+color1.a/255+")"); + radgrad.addColorStop(1, "rgba("+color2.r+", "+color2.g+", "+color2.b+", "+color2.a/255+")"); + + canvas_active().fillStyle = radgrad; + canvas_active().fillRect(0,0,WIDTH,HEIGHT); + } + } + }; + this.blur_tool = function(type, mouse, event){ + if(mouse.valid == false) return true; + var size = TOOLS.action_data().attributes.size; + var size_half = Math.round(size/2); + var xx = mouse.x - size/2; + var yy = mouse.y - size/2; + if(xx < 0) xx = 0; + if(yy < 0) yy = 0; + if(type == 'click'){ + MAIN.save_state(); + var param1 = TOOLS.action_data().attributes.strength; + var imageData = canvas_active().getImageData(xx, yy, size, size); + var filtered = ImageFilters.StackBlur(imageData, param1); //add effect + HELPER.drawImage_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front")); + } + else if(type == 'drag'){ + var param1 = TOOLS.action_data().attributes.strength; + var imageData = canvas_active().getImageData(xx, yy, size, size); + var filtered = ImageFilters.StackBlur(imageData, param1); //add effect + HELPER.drawImage_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front")); + } + else if(type == 'move'){ + //show size + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + canvas_front.beginPath(); + canvas_front.strokeStyle = "#000000"; + canvas_front.lineWidth = 1; + canvas_front.arc(mouse.x, mouse.y, size_half, 0, Math.PI*2, true); + canvas_front.stroke(); + } + }; + this.sharpen_tool = function(type, mouse, event){ + if(mouse.valid == false) return true; + var size = TOOLS.action_data().attributes.size; + var size_half = Math.round(size/2); + var xx = mouse.x - size/2; + var yy = mouse.y - size/2; + if(xx < 0) xx = 0; + if(yy < 0) yy = 0; + + if(type == 'click'){ + MAIN.save_state(); + var param1 = TOOLS.action_data().attributes.strength; + var imageData = canvas_active().getImageData(xx, yy, size, size); + var filtered = ImageFilters.Sharpen(imageData, param1); //add effect + HELPER.drawImage_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front")); + } + else if(type == 'drag'){ + var param1 = TOOLS.action_data().attributes.strength; + var imageData = canvas_active().getImageData(xx, yy, size, size); + var filtered = ImageFilters.Sharpen(imageData, param1); //add effect + HELPER.drawImage_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front")); + } + else if(type == 'move'){ + //show size + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + canvas_front.beginPath(); + canvas_front.strokeStyle = "#000000"; + canvas_front.lineWidth = 1; + canvas_front.arc(mouse.x, mouse.y, size_half, 0, Math.PI*2, true); + canvas_front.stroke(); + } + }; + this.burn_dodge_tool = function(type, mouse, event){ + if(mouse.valid == false) return true; + var size = TOOLS.action_data().attributes.size; + var power = TOOLS.action_data().attributes.power*2.5; + + if(type == 'click'){ + MAIN.save_state(); + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + canvas_front.save(); + CON.clear_front_on_release = false; + + //init settings + canvas_active().beginPath(); + canvas_active().lineWidth = TOOLS.action_data().attributes.size; + canvas_active().lineCap = 'round'; + canvas_active().lineJoin = 'round'; + + canvas_front.beginPath(); + if(TOOLS.action_data().attributes.burn == true) + canvas_front.strokeStyle = "rgba(0, 0, 0, "+power/255+")"; + else + canvas_front.strokeStyle = "rgba(255, 255, 255, "+power/255+")"; + canvas_front.lineWidth = TOOLS.action_data().attributes.size; + canvas_front.lineCap = 'round'; + canvas_front.lineJoin = 'round'; + } + else if(type == 'drag' && mouse.last_x != false && mouse.last_y != false){ + //now draw preview + canvas_front.beginPath(); + //clean from last line + canvas_front.globalCompositeOperation = "destination-out"; + canvas_front.moveTo(mouse.last_x, mouse.last_y); + canvas_front.lineTo(mouse.x, mouse.y); + canvas_front.stroke(); + //reset + canvas_front.globalCompositeOperation = "source-over"; + //draw new line segment + canvas_front.moveTo(mouse.last_x, mouse.last_y); + canvas_front.lineTo(mouse.x, mouse.y); + canvas_front.stroke(); + } + else if(type == 'release'){ + //todo: use screen+multiply or burn+dodge + canvas_active().globalCompositeOperation = "soft-light"; + canvas_active().shadowBlur = 5; + canvas_active().drawImage(document.getElementById("canvas_front"), 0, 0); + canvas_active().globalCompositeOperation = "source-over"; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + CON.clear_front_on_release = true; + + //if mouse was not moved + if(mouse.click_x == mouse.x && mouse.click_y == mouse.y){ + canvas_active().globalCompositeOperation = "soft-light"; + canvas_active().beginPath(); + canvas_active().arc(mouse.x, mouse.y, TOOLS.action_data().attributes.size/2, 0, 2 * Math.PI, false); + if(TOOLS.action_data().attributes.burn == true){ + canvas_active().fillStyle = "rgba(0, 0, 0, "+power/255+")"; + } + else{ + canvas_active().fillStyle = "rgba(255, 255, 255, "+power/255+")"; + } + canvas_active().shadowBlur = 5; + canvas_active().fill(); + canvas_active().globalCompositeOperation = "source-over"; + } + canvas_active().shadowBlur = 0; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + canvas_front.restore(); + } + else if(type == 'move' && CON.isDrag == false){ + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + canvas_front.beginPath(); + canvas_front.strokeStyle = "#000000"; + canvas_front.arc(mouse.x, mouse.y, size/2, 0, Math.PI*2, true); + canvas_front.stroke(); + } + }; + this.crop_tool = function(type, mouse, event){ + if(mouse.click_valid == false) return true; + if(type == 'drag'){ + if(mouse.x < 0) mouse.x = 0; + if(mouse.y < 0) mouse.y = 0; + if(mouse.x >= WIDTH) mouse.x = WIDTH-1; + if(mouse.y >= HEIGHT) mouse.y = HEIGHT-1; + if(mouse.click_x >= WIDTH) mouse.click_x = WIDTH-1; + if(mouse.click_y >= HEIGHT) mouse.click_y = HEIGHT-1; + if(TOOLS.select_square_action == ''){ + document.body.style.cursor = "crosshair"; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + canvas_front.fillStyle = "rgba(0, 255, 0, 0.3)"; + canvas_front.fillRect(mouse.click_x, mouse.click_y, mouse.x - mouse.click_x, mouse.y - mouse.click_y); + } + } + else if(type == 'move' && TOOLS.select_data != false){ + if(CON.isDrag == true) return true; + canvas_front.lineWidth = 1; + border_size = 5; + TOOLS.select_square_action = ''; + + if(TOOLS.select_square_action == '' + && mouse.x > TOOLS.select_data.x && mouse.y > TOOLS.select_data.y + && mouse.x < TOOLS.select_data.x + TOOLS.select_data.w && mouse.y < TOOLS.select_data.y + TOOLS.select_data.h){ + TOOLS.select_square_action = 'move'; + document.body.style.cursor = 'pointer'; + } + if(TOOLS.select_square_action == '' && mouse.valid == true) + document.body.style.cursor = "auto"; + } + else if(type == 'release'){ + if(mouse.x < 0) mouse.x = 0; + if(mouse.y < 0) mouse.y = 0; + if(mouse.x >= WIDTH) mouse.x = WIDTH-1; + if(mouse.y >= HEIGHT) mouse.y = HEIGHT-1; + if(mouse.click_x >= WIDTH) mouse.click_x = WIDTH-1; + if(mouse.click_y >= HEIGHT) mouse.click_y = HEIGHT-1; + + if(TOOLS.select_square_action == ''){ + if(mouse.x != mouse.click_x && mouse.y != mouse.click_y){ + TOOLS.select_data = { + x: Math.min(mouse.x, mouse.click_x), + y: Math.min(mouse.y, mouse.click_y), + w: Math.abs(mouse.x - mouse.click_x), + h: Math.abs(mouse.y - mouse.click_y) + }; + } + } + TOOLS.draw_selected_area(true); + + LAYER.update_info_block(); + } + else if(type == 'click' && TOOLS.select_data != false){ + document.body.style.cursor = "auto"; + if(mouse.x > TOOLS.select_data.x && mouse.y > TOOLS.select_data.y + && mouse.x < TOOLS.select_data.x + TOOLS.select_data.w && mouse.y < TOOLS.select_data.y + TOOLS.select_data.h){ + MAIN.save_state(); + for(var i in LAYERS){ + var layer = document.getElementById(LAYERS[i].name).getContext("2d"); + + var tmp = layer.getImageData(TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h); + layer.clearRect(0, 0, WIDTH, HEIGHT); + layer.putImageData(tmp, 0, 0); + } + + //resize + MAIN.save_state(); + WIDTH = TOOLS.select_data.w; + HEIGHT = TOOLS.select_data.h; + RATIO = WIDTH/HEIGHT; + LAYER.set_canvas_size(); + + TOOLS.select_data = false; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + } + } + }; + this.clone_tool = function(type, mouse, event){ + if(mouse.valid == false) return true; + var size = TOOLS.action_data().attributes.size; + var size_half = Math.round(size/2); + + if(type == 'click'){ + MAIN.save_state(); + + if(clone_data === false){ + POP.add({html: 'Source is empty, right click on image first.' }); + POP.show('Error', ''); + } + else{ + //draw rounded image + HELPER.drawImage_round(canvas_active(), mouse.x, mouse.y, size, clone_data, document.getElementById("canvas_front"), TOOLS.action_data().attributes.anti_alias); + } + } + else if(type == 'right_click'){ + //save clone source + clone_data = document.createElement("canvas"); + clone_data.width = size; + clone_data.height = size; + var xx = mouse.x - size_half; + var yy = mouse_y - size_half; + if(xx < 0) xx = 0; + if(yy < 0) yy = 0; + clone_data.getContext("2d").drawImage(canvas_active(true), xx, yy, size, size, 0, 0, size, size); + return false; + } + else if(type == 'drag'){ + if(event.which == 3) return true; + if(clone_data === false) return false; //no source + + //draw rounded image + HELPER.drawImage_round(canvas_active(), mouse.x, mouse.y, size, clone_data, document.getElementById("canvas_front"), TOOLS.action_data().attributes.anti_alias); + } + else if(type == 'move'){ + //show size + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + canvas_front.beginPath(); + canvas_front.strokeStyle = "#000000"; + canvas_front.lineWidth = 1; + canvas_front.arc(mouse.x, mouse.y, size_half, 0, Math.PI*2, true); + canvas_front.stroke(); + } + }; + this.select_square = function(type, mouse, event){ + if(mouse.click_valid == false) return true; + if(type == 'drag'){ + if(mouse.x < 0) mouse.x = 0; + if(mouse.y < 0) mouse.y = 0; + if(mouse.x >= WIDTH) mouse.x = WIDTH-1; + if(mouse.y >= HEIGHT) mouse.y = HEIGHT-1; + if(mouse.click_x >= WIDTH) mouse.click_x = WIDTH-1; + if(mouse.click_y >= HEIGHT) mouse.click_y = HEIGHT-1; + if(TOOLS.select_square_action == ''){ + document.body.style.cursor = "crosshair"; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + canvas_front.fillStyle = "rgba(0, 255, 0, 0.3)"; + canvas_front.fillRect(mouse.click_x, mouse.click_y, mouse.x - mouse.click_x, mouse.y - mouse.click_y); + } + else{ + if(TOOLS.select_square_action == 'move'){ + //move + try{ + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + canvas_front.drawImage( canvas_active(true), + TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h, + mouse.x - mouse.click_x + TOOLS.select_data.x, + mouse.y - mouse.click_y + TOOLS.select_data.y, + TOOLS.select_data.w, + TOOLS.select_data.h ); + canvas_front.restore(); + } + catch(err){ + console.log("Error: "+err.message); + } + } + else{ + //resize + var s_x = TOOLS.select_data.x; + var s_y = TOOLS.select_data.y; + var d_x = TOOLS.select_data.w; + var d_y = TOOLS.select_data.h; + if(TOOLS.select_square_action == 'resize-left'){ + s_x += mouse.x - mouse.click_x; + d_x -= mouse.x - mouse.click_x; + } + else if(TOOLS.select_square_action == 'resize-right') + d_x += mouse.x - mouse.click_x; + else if(TOOLS.select_square_action == 'resize-top'){ + s_y += mouse.y - mouse.click_y; + d_y -= mouse.y - mouse.click_y; + } + else if(TOOLS.select_square_action == 'resize-bottom') + d_y += mouse.y - mouse.click_y; + else if(TOOLS.select_square_action == 'resize-1'){ + s_x += mouse.x - mouse.click_x; + s_y += mouse.y - mouse.click_y; + d_x -= mouse.x - mouse.click_x; + d_y -= mouse.y - mouse.click_y; + } + else if(TOOLS.select_square_action == 'resize-2'){ + d_x += mouse.x - mouse.click_x; + s_y += mouse.y - mouse.click_y; + d_y -= mouse.y - mouse.click_y; + } + else if(TOOLS.select_square_action == 'resize-3'){ + d_x += mouse.x - mouse.click_x; + d_y += mouse.y - mouse.click_y; + } + else if(TOOLS.select_square_action == 'resize-4'){ + s_x += mouse.x - mouse.click_x; + d_x -= mouse.x - mouse.click_x; + d_y += mouse.y - mouse.click_y; + } + var s_x = Math.max(s_x, 0); + var s_y = Math.max(s_y, 0); + var d_x = Math.max(d_x, 0); + var d_y = Math.max(d_y, 0); + + canvas_front.save(); + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + canvas_front.mozImageSmoothingEnabled = false; + canvas_front.drawImage(canvas_active(true), + TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h, + s_x, s_y, d_x, d_y); + canvas_front.restore(); + } + } + } + else if(type == 'move' && TOOLS.select_data != false){ + if(CON.isDrag == true) return true; + canvas_front.lineWidth = 1; + border_size = 5; + TOOLS.select_square_action = ''; + var is_left = false; + var is_right = false; + var is_top = false; + var is_bottom = false; + var sr_size = Math.ceil(CON.sr_size/ZOOM*100); + + //left + if(TOOLS.check_mouse_pos(TOOLS.select_data.x, TOOLS.select_data.y + TOOLS.select_data.h/2, sr_size, mouse.x, mouse.y)==true){ + document.body.style.cursor = "w-resize"; + TOOLS.select_square_action = 'resize-left'; + is_left = true; + } + //top + else if(TOOLS.check_mouse_pos(TOOLS.select_data.x + TOOLS.select_data.w/2, TOOLS.select_data.y, sr_size, mouse.x, mouse.y)==true){ + document.body.style.cursor = "n-resize"; + TOOLS.select_square_action = 'resize-top'; + is_top = true; + } + //right + else if(TOOLS.check_mouse_pos(TOOLS.select_data.x + TOOLS.select_data.w - sr_size, TOOLS.select_data.y + TOOLS.select_data.h/2, sr_size, mouse.x, mouse.y)==true){ + document.body.style.cursor = "w-resize"; + TOOLS.select_square_action = 'resize-right'; + is_right = true; + } + //bottom + else if(TOOLS.check_mouse_pos(TOOLS.select_data.x + TOOLS.select_data.w/2, TOOLS.select_data.y + TOOLS.select_data.h - sr_size, sr_size, mouse.x, mouse.y)==true){ + document.body.style.cursor = "n-resize"; + TOOLS.select_square_action = 'resize-bottom'; + is_bottom = true; + } + + //corner 1 + if(TOOLS.check_mouse_pos(TOOLS.select_data.x, TOOLS.select_data.y, sr_size, mouse.x, mouse.y)==true){ + document.body.style.cursor = "nw-resize"; + TOOLS.select_square_action = 'resize-1'; + } + //corner 2 + else if(TOOLS.check_mouse_pos(TOOLS.select_data.x + TOOLS.select_data.w - sr_size, TOOLS.select_data.y, sr_size, mouse.x, mouse.y)==true){ + document.body.style.cursor = "ne-resize"; + TOOLS.select_square_action = 'resize-2'; + } + //corner 3 + else if(TOOLS.check_mouse_pos(TOOLS.select_data.x + TOOLS.select_data.w - sr_size, TOOLS.select_data.y + TOOLS.select_data.h - sr_size, sr_size, mouse.x, mouse.y)==true){ + document.body.style.cursor = "nw-resize"; + TOOLS.select_square_action = 'resize-3'; + } + //corner 4 + else if(TOOLS.check_mouse_pos(TOOLS.select_data.x, TOOLS.select_data.y + TOOLS.select_data.h - sr_size, sr_size, mouse.x, mouse.y)==true){ + document.body.style.cursor = "ne-resize"; + TOOLS.select_square_action = 'resize-4'; + } + + if(TOOLS.select_square_action == '' + && mouse.x > TOOLS.select_data.x && mouse.y > TOOLS.select_data.y + && mouse.x < TOOLS.select_data.x + TOOLS.select_data.w && mouse.y < TOOLS.select_data.y + TOOLS.select_data.h){ + TOOLS.select_square_action = 'move'; + document.body.style.cursor = "move"; + } + if(TOOLS.select_square_action == '' && mouse.valid == true) + document.body.style.cursor = "auto"; + } + else if(type == 'release'){ + if(mouse.x < 0) mouse.x = 0; + if(mouse.y < 0) mouse.y = 0; + if(mouse.x >= WIDTH) mouse.x = WIDTH-1; + if(mouse.y >= HEIGHT) mouse.y = HEIGHT-1; + if(mouse.click_x >= WIDTH) mouse.click_x = WIDTH-1; + if(mouse.click_y >= HEIGHT) mouse.click_y = HEIGHT-1; + + if(TOOLS.select_square_action == ''){ + if(mouse.x != mouse.click_x && mouse.y != mouse.click_y){ + TOOLS.select_data = { + x: Math.min(mouse.x, mouse.click_x), + y: Math.min(mouse.y, mouse.click_y), + w: Math.abs(mouse.x - mouse.click_x), + h: Math.abs(mouse.y - mouse.click_y) + }; + } + } + else{ + MAIN.save_state(); + if(TOOLS.select_square_action=='move'){ + if(TOOLS.select_data != false){ + select_data_tmp = canvas_active().getImageData(TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h); + canvas_active().clearRect(TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h); + canvas_active().putImageData(select_data_tmp, mouse.x - mouse.click_x + TOOLS.select_data.x, mouse.y - mouse.click_y + TOOLS.select_data.y); + } + TOOLS.select_data.x += mouse.x - mouse.click_x; + TOOLS.select_data.y += mouse.y - mouse.click_y; + } + else{ + var s_x = TOOLS.select_data.x; + var s_y = TOOLS.select_data.y; + var d_x = TOOLS.select_data.w; + var d_y = TOOLS.select_data.h; + + if(TOOLS.select_square_action == 'resize-left'){ + s_x += mouse.x - mouse.click_x; + d_x -= mouse.x - mouse.click_x; + } + else if(TOOLS.select_square_action == 'resize-right') + d_x += mouse.x - mouse.click_x; + else if(TOOLS.select_square_action == 'resize-top'){ + s_y += mouse.y - mouse.click_y; + d_y -= mouse.y - mouse.click_y; + } + else if(TOOLS.select_square_action == 'resize-bottom') + d_y += mouse.y - mouse.click_y; + else if(TOOLS.select_square_action == 'resize-1'){ + s_x += mouse.x - mouse.click_x; + s_y += mouse.y - mouse.click_y; + d_x -= mouse.x - mouse.click_x; + d_y -= mouse.y - mouse.click_y; + } + else if(TOOLS.select_square_action == 'resize-2'){ + d_x += mouse.x - mouse.click_x; + s_y += mouse.y - mouse.click_y; + d_y -= mouse.y - mouse.click_y; + } + else if(TOOLS.select_square_action == 'resize-3'){ + d_x += mouse.x - mouse.click_x; + d_y += mouse.y - mouse.click_y; + } + else if(TOOLS.select_square_action == 'resize-4'){ + s_x += mouse.x - mouse.click_x; + d_x -= mouse.x - mouse.click_x; + d_y += mouse.y - mouse.click_y; + } + var s_x = Math.max(s_x, 0); + var s_y = Math.max(s_y, 0); + var d_x = Math.max(d_x, 0); + var d_y = Math.max(d_y, 0); + + var tempCanvas = document.createElement("canvas"); + var tempCtx = tempCanvas.getContext("2d"); + tempCanvas.width = Math.max(d_x, TOOLS.select_data.w); + tempCanvas.height = Math.max(d_y, TOOLS.select_data.h); + tempCtx.drawImage(canvas_active(true), TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h, 0, 0, TOOLS.select_data.w, TOOLS.select_data.h); + + canvas_active().clearRect(s_x, s_y, d_x, d_y); + canvas_active().drawImage(tempCanvas, 0, 0, TOOLS.select_data.w, TOOLS.select_data.h, s_x, s_y, d_x, d_y); + + TOOLS.select_data.x = s_x; + TOOLS.select_data.y = s_y; + TOOLS.select_data.w = d_x; + TOOLS.select_data.h = d_y; + } + } + TOOLS.draw_selected_area(); + LAYER.update_info_block(); + } + }; + this.check_mouse_pos = function(x, y, size, mouse_x, mouse_y){ + if(mouse_x > x-round(size) && mouse_x < x+round(size)) + if(mouse_y > y-round(size) && mouse_y < y+round(size)) + return true; + return false; + }; + this.draw_selected_area = function(no_resize){ + if(TOOLS.select_data == false) return false; + //draw area + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + var x = TOOLS.select_data.x; + var y = TOOLS.select_data.y; + var w = TOOLS.select_data.w; + var h = TOOLS.select_data.h; + if(ZOOM != 100){ + x = round(x); + y = round(y); + w = round(w); + h = round(h); + } + + //fill + canvas_front.fillStyle = "rgba(0, 255, 0, 0.3)"; + canvas_front.fillRect(x, y, w, h); + if(ZOOM <= 100){ + //borders + canvas_front.strokeStyle = "rgba(0, 255, 0, 1)"; + canvas_front.lineWidth = 1; + canvas_front.strokeRect(x+0.5, y+0.5, w, h); + } + if(no_resize == true) return true; + + //draw carners + square(x, y, 0, 0); + square(x+w, y, -1, 0); + square(x, y+h, 0, -1); + square(x+w, y+h, -1, -1); + + //draw centers + square(x+w/2, y, 0, 0); + square(x, y+h/2, 0, 0); + square(x+w/2, y+h, 0, -1); + square(x+w, y+h/2, -1, 0); + + function square(x, y, mx, my){ + var sr_size = Math.ceil(CON.sr_size/ZOOM*100); + x = round(x); + y = round(y); + canvas_front.beginPath(); + canvas_front.rect(x + mx * round(sr_size), y + my * round(sr_size), sr_size, sr_size); + canvas_front.fillStyle = "#0000ff"; + canvas_front.fill(); + } + }; + this.save_EXIF = function(){ + TOOLS.EXIF = this.exifdata; + //check length + var n = 0; + for(var i in TOOLS.EXIF) + n++; + if(n == 0) + TOOLS.EXIF = false; + }; + this.histogram = function(){ + POP.add({name: "param1", title: "Channel:", values: ["Gray", "Red", "Green", "Blue"], onchange: "TOOLS.histogram_onload()" }); + POP.add({title: 'Histogram:', function: function(){ + var html = ''; + return html; + }}); + POP.add({title: "Total pixels:", value: "" }); + POP.add({title: "Average:", value: "" }); + POP.show('Histogram', function(user_response){ + var param1 = parseInt(user_response.param1); + }, undefined, this.histogram_onload); + }; + this.histogram_onload = function(user_response){ + var img = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var imgData = img.data; + var channel_grey = document.getElementById("pop_data_param1_poptmp0"); + var channel_r = document.getElementById("pop_data_param1_poptmp1"); + var channel_g = document.getElementById("pop_data_param1_poptmp2"); + var channel_b = document.getElementById("pop_data_param1_poptmp3"); + + if(channel_grey.checked == true) channel = channel_grey.value; + else if(channel_r.checked == true) channel = channel_r.value; + else if(channel_g.checked == true) channel = channel_g.value; + else if(channel_b.checked == true) channel = channel_b.value; + + //collect data + var hist_data = []; + for(var i=0; i<= 255; i++) + hist_data[i] = 0; + var total = imgData.length/4; + var sum = 0; + var grey; + + if(channel == 'Gray'){ + for(var i = 0; i < imgData.length; i += 4){ + grey = round((imgData[i] + imgData[i+1] + imgData[i+2]) / 3); + hist_data[grey]++; + sum = sum + imgData[i] + imgData[i+1] + imgData[i+2]; + } + } + else if(channel == 'Red'){ + for(var i = 0; i < imgData.length; i += 4){ + hist_data[imgData[i]]++; + sum = sum + imgData[i] * 3; + } + } + else if(channel == 'Green'){ + for(var i = 0; i < imgData.length; i += 4){ + hist_data[imgData[i+1]]++; + sum = sum + imgData[i+1] * 3; + } + } + else if(channel == 'Blue'){ + for(var i = 0; i < imgData.length; i += 4){ + hist_data[imgData[i+2]]++; + sum = sum + imgData[i+2] * 3; + } + } + + //draw histogram + var c = document.getElementById("c_h").getContext("2d"); + c.rect(0, 0, 255, 100); + c.fillStyle = "#ffffff"; + c.fill(); + for(var i = 0; i <= 255; i++){ + if(hist_data[i] == 0) continue; + c.beginPath(); + c.strokeStyle = "#000000"; + c.lineWidth = 1; + c.moveTo(i + 0.5, 100 + 0.5); + c.lineTo(i + 0.5, 100 - round(hist_data[i]*255*100/total/6) + 0.5); + c.stroke(); + } + + document.getElementById("pop_data_totalpixel").value = HELPER.number_format(total, 0); + if(total > 0) + average = round(sum * 10 / total / 3) / 10; + else + average = '-'; + document.getElementById("pop_data_average").value = average; + }; + this.generate_sprites = function(gap){ + if(LAYERS.length == 1) return false; + MAIN.save_state(); + LAYER.layer_add(); + var xx = 0; + var yy = 0; + var max_height = 0; + var tmp = document.createElement("canvas"); + tmp.setAttribute('id', "tmp_canvas"); + tmp.width = WIDTH; + tmp.height = HEIGHT; + var W = WIDTH; + var H = HEIGHT; + for(i in LAYERS){ + if(i == LAYER.layer_active) continue; //end + if(LAYERS[i].visible == false) continue; + + tmp.getContext("2d").clearRect(0, 0, W, H); + tmp.getContext("2d").drawImage(document.getElementById(LAYERS[i].name), 0, 0); + + var trim_details = DRAW.trim_info(tmp, false); //trim + if(WIDTH == trim_details.left) continue; //empty layer + var width = W - trim_details.left - trim_details.right; + var height = H - trim_details.top - trim_details.bottom; + + if(xx + width > WIDTH){ + xx = 0; + yy += max_height; + max_height = 0; + } + if(yy % gap > 0 && gap > 0) + yy = yy - yy % gap + gap; + if(yy + height > HEIGHT){ + CON.autosize = false; + HEIGHT = yy + height; + RATIO = WIDTH/HEIGHT; + LAYER.set_canvas_size(); + } + + canvas_active().drawImage(tmp, trim_details.left, trim_details.top, width, height, xx, yy, width, height); + xx += width; + if(gap > 0) + xx = xx - xx % gap + gap; + + if(height > max_height) + max_height = height; + if(xx > WIDTH){ + xx = 0; + yy += max_height; + max_height = 0; + } + } + }; + this.unique_colors_count = function(canvas){ + var img = canvas.getContext("2d").getImageData(0, 0, canvas.width, canvas.height); + var imgData = img.data; + var colors = []; + var n = 0; + for(var i = 0; i < imgData.length; i += 4){ + if(imgData[i+3] == 0) continue; //transparent + var key = imgData[i]+"."+imgData[i+1]+"."+imgData[i+2]; + if(colors[key] == undefined){ + colors[key] = 1; + n++; + } + } + return n; + }; + this.calc_differences = function(sensitivity, canvas_preview, w, h){ + vlayer_active = parseInt(LAYER.layer_active); + //first layer + var img1 = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var imgData1 = img1.data; + + //second layer + var context2 = document.getElementById(LAYERS[vlayer_active + 1].name).getContext("2d"); + var img2 = context2.getImageData(0, 0, WIDTH, HEIGHT); + var imgData2 = img2.data; + + //result layer + if(canvas_preview == undefined){ + //add differences layer + LAYER.layer_add(); + canvas_active().rect(0, 0, WIDTH, HEIGHT); + canvas_active().fillStyle = "#ffffff"; + canvas_active().fill(); + var img3 = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + } + else{ + //work on preview layer + var canvas_tmp = document.createElement("canvas"); + canvas_tmp.width = WIDTH; + canvas_tmp.height = HEIGHT; + var img3 = canvas_tmp.getContext("2d").getImageData(0, 0, WIDTH, HEIGHT); + } + var imgData3 = img3.data; + for(var xx = 0; xx < WIDTH; xx++){ + for(var yy = 0; yy < HEIGHT; yy++){ + var x = (xx + yy * WIDTH) * 4; + if(Math.abs(imgData1[x] - imgData2[x]) > sensitivity + || Math.abs(imgData1[x+1] - imgData2[x+1]) > sensitivity + || Math.abs(imgData1[x+2] - imgData2[x+2]) > sensitivity + || Math.abs(imgData1[x+3] - imgData2[x+3]) > sensitivity){ + imgData3[x] = 255; + imgData3[x+1] = 0; + imgData3[x+2] = 0; + imgData3[x+3] = 255; + } + } + } + if(canvas_preview == undefined) + canvas_active().putImageData(img3, 0, 0); + else{ + canvas_tmp.getContext("2d").rect(0, 0, WIDTH, HEIGHT); + canvas_tmp.getContext("2d").fillStyle = "#ffffff"; + canvas_tmp.getContext("2d").fill(); + canvas_tmp.getContext("2d").putImageData(img3, 0, 0); + canvas_preview.clearRect(0, 0, w, h); + + canvas_preview.save(); + canvas_preview.scale(w/WIDTH, h/HEIGHT); + canvas_preview.drawImage(canvas_tmp, 0, 0); + canvas_preview.restore(); + } + }; + //method = otsu + this.thresholding = function(method, ctx, W, H, only_level){ + var img = ctx.getImageData(0, 0, W, H); + var imgData = img.data; + var hist_data = []; + var grey; + for(var i=0; i<= 255; i++) + hist_data[i] = 0; + for(var i = 0; i < imgData.length; i += 4){ + grey = round(0.2126 * imgData[i] + 0.7152 * imgData[i+1] + 0.0722 * imgData[i+2]); + hist_data[grey]++; + } + var level; + if(method == 'otsu') + level = this.otsu(hist_data, W*H); + else + alert('ERROR: unknown method in TOOLS.thresholding().'); + if(only_level === true) + return level; + var c; + for(var i = 0; i < imgData.length; i += 4){ + if(imgData[i+3] == 0) continue; //transparent + grey = round(0.2126 * imgData[i] + 0.7152 * imgData[i+1] + 0.0722 * imgData[i+2]); + if(grey < level) + c = 0; + else + c = 255; + imgData[i] = c; + imgData[i+1] = c; + imgData[i+2] = c; + } + ctx.putImageData(img, 0, 0); + }; + //http://en.wikipedia.org/wiki/Otsu%27s_Method + this.otsu = function(histogram, total){ + var sum = 0; + for (var i = 1; i < 256; ++i) + sum += i * histogram[i]; + var mB, mF, between; + var sumB = 0; + var wB = 0; + var wF = 0; + var max = 0; + var threshold = 0; + for (var i = 0; i < 256; ++i){ + wB += histogram[i]; + if(wB == 0) continue; + wF = total - wB; + if(wF == 0) break; + sumB += i * histogram[i]; + mB = sumB / wB; + mF = (sum - sumB) / wF; + between = wB * wF * Math.pow(mB - mF, 2); + if(between > max){ + max = between; + threshold = i; + } + } + return threshold; + }; + this.convert_color_to_alpha = function(context, W, H, color){ + var img = context.getImageData(0, 0, W, H); + var imgData = img.data; + var back_color = HELPER.hex2rgb(color); + + for(var i = 0; i < imgData.length; i += 4){ + if(imgData[i+3] == 0) continue; //transparent + + //calculate difference from requested color, and change alpha + var diff = Math.abs(imgData[i] - back_color.r) + Math.abs(imgData[i+1] - back_color.g) + Math.abs(imgData[i+2] - back_color.b)/3; + imgData[i+3] = Math.round(diff); + + //combining 2 layers in future will change colors, so make changes to get same colors in final image + //color_result = color_1 * (alpha_1 / 255) * (1 - A2 / 255) + color_2 * (alpha_2 / 255) + //color_2 = (color_result - color_1 * (alpha_1 / 255) * (1 - A2 / 255)) / (alpha_2 / 255) + imgData[i] = Math.ceil((imgData[i] - back_color.r * (1-imgData[i+3]/255)) / (imgData[i+3]/255)); + imgData[i+1] = Math.ceil((imgData[i+1] - back_color.g * (1-imgData[i+3]/255)) / (imgData[i+3]/255)); + imgData[i+2] = Math.ceil((imgData[i+2] - back_color.b * (1-imgData[i+3]/255)) / (imgData[i+3]/255)); + } + context.putImageData(img, 0, 0); + }; + this.color_zoom = function(context, W, H, zoom, center){ + var img = context.getImageData(0, 0, W, H); + var imgData = img.data; + var grey; + for(var i = 0; i < imgData.length; i += 4){ + if(imgData[i+3] == 0) continue; //transparent + + grey = round(0.2126 * imgData[i] + 0.7152 * imgData[i+1] + 0.0722 * imgData[i+2]); + + for(var j=0; j<3; j++){ + var k = i+j; + if(grey > center) + imgData[k] += (imgData[k] - center) * zoom; + else if(grey < center) + imgData[k] -= (center - imgData[k]) * zoom; + if(imgData[k] < 0) + imgData[k] = 0; + if(imgData[k] > 255) + imgData[k] = 255; + } + } + context.putImageData(img, 0, 0); + }; + this.recover_alpha = function(context, W, H, level){ + var img = context.getImageData(0, 0, W, H); + var imgData = img.data; + var tmp; + level = parseInt(level); + for(var i = 0; i < imgData.length; i += 4){ + tmp = imgData[i+3] + level; + if(tmp > 255) + tmp = 255; + imgData[i+3] = tmp; + } + context.putImageData(img, 0, 0); + }; + this.heatmap_effect = function(context, W, H){ + var img = context.getImageData(0, 0, W, H); + var imgData = img.data; + var grey, RGB; + for(var i = 0; i < imgData.length; i += 4){ + if(imgData[i+3] == 0) continue; //transparent + grey = round(0.2126 * imgData[i] + 0.7152 * imgData[i+1] + 0.0722 * imgData[i+2]); + RGB = this.color2heat(grey); + imgData[i] = RGB.R; + imgData[i+1] = RGB.G; + imgData[i+2] = RGB.B; + } + context.putImageData(img, 0, 0); + }; + this.color2heat = function(value){ + var RGB = {R:0,G:0,B:0}; + value = value / 255; + if (0 <= value && value <= 1/8) { + RGB.R = 0; + RGB.G = 0; + RGB.B = 4*value + .5; // .5 - 1 // b = 1/2 + } else if (1/8 < value && value <= 3/8) { + RGB.R = 0; + RGB.G = 4*value - .5; // 0 - 1 // b = - 1/2 + RGB.B = 1; // small fix + } else if (3/8 < value && value <= 5/8) { + RGB.R = 4*value - 1.5; // 0 - 1 // b = - 3/2 + RGB.G = 1; + RGB.B = -4*value + 2.5; // 1 - 0 // b = 5/2 + } else if (5/8 < value && value <= 7/8) { + RGB.R = 1; + RGB.G = -4*value + 3.5; // 1 - 0 // b = 7/2 + RGB.B = 0; + } else if (7/8 < value && value <= 1) { + RGB.R = -4*value + 4.5; // 1 - .5 // b = 9/2 + RGB.G = 0; + RGB.B = 0; + } else { // should never happen - value > 1 + RGB.R = .5; + RGB.G = 0; + RGB.B = 0; + } + // scale for hex conversion + RGB.R *= 255; + RGB.G *= 255; + RGB.B *= 255; + + RGB.R = Math.round(RGB.R); + RGB.G = Math.round(RGB.G); + RGB.B = Math.round(RGB.B); + + return RGB; + }; + this.add_borders = function(context, W, H, color, size){ + context.strokeStyle = color; + context.lineWidth = size; + HELPER.roundRect(context, 0 + 0.5, 0 + 0.5, + W-1, H-1, + 0, false, true); + }; + this.grains_effect = function(context, W, H, level){ + if(level == 0) return context; + var img = context.getImageData(0, 0, W, H); + var imgData = img.data; + for(var j = 0; j < H; j++){ + for(var i = 0; i < W; i++){ + var x = (i + j*W) * 4; + if(imgData[x+3] == 0) continue; //transparent + //increase it's lightness + var delta = HELPER.getRandomInt(0, level); + if(delta == 0) continue; + + if(imgData[x] - delta < 0) + imgData[x] = -(imgData[x] - delta); + else + imgData[x] = imgData[x] - delta; + if(imgData[x+1] - delta < 0) + imgData[x+1] = -(imgData[x+1] - delta); + else + imgData[x+1] = imgData[x+1] - delta; + if(imgData[x+2] - delta < 0) + imgData[x+2] = -(imgData[x+2] - delta); + else + imgData[x+2] = imgData[x+2] - delta; + } + } + context.putImageData(img, 0, 0); + }; + }