diff --git a/README.md b/README.md index a9c6a04..669c473 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,7 @@ or upload from computer (using menu or drag & drop). Nothing will be sent to any - **Edit**: Undo, cut, copy, paste, selection, paste from clipboard. - **Image**: information, EXIF, trim, zoom, resize (Hermite resample, default resize), rotate, flip, color corrections (brightness, contrast, hue, saturation, luminance), auto adjust colors, grid, histogram, negative. - **Layers**: multiple layers system, differences, merge, flatten, Transparency support. -- **Effects**: Black and White, Blur (box, Gaussian, stack, zoom), Bulge/Pinch, Denoise, Desaturate, Dither, Dot Screen, Edge, Emboss, Enrich, Gamma, Grains, GrayScale, Heatmap, JPG Compression, Mosaic, Oil, Sepia, Sharpen, Solarize, Tilt Shift, Vignette, Vibrance, Vintage, +- **Effects**: Black and White, Blur (box, Gaussian, stack, zoom), Bulge/Pinch, Denoise, Desaturate, Dither, Dot Screen, Edge, Emboss, Enrich, Gamma, Grains, GrayScale, Heatmap, JPG Compression, Mosaic, Oil, Sepia, Sharpen, Solarize, Tilt Shift, Vignette, Vibrance, Vintage, Blueprint, Night Vision, Pencil. - **Tools**: pencil, brush, magic wand, erase, fill, color picker, letters, crop, blur, sharpen, desaturate, clone, borders, sprites, key-points, color to alpha, color zoom, replace color, restore alpha, content fill. - **Help**: keyboard shortcuts, translations. diff --git a/src/js/config-menu.js b/src/js/config-menu.js index ee9cb5b..dcc02bc 100644 --- a/src/js/config-menu.js +++ b/src/js/config-menu.js @@ -121,6 +121,7 @@ var menu_template = `
  • Black and White +
  • Blueprint
  • Box Blur
  • Denoise
  • Dither diff --git a/src/js/core/base-gui.js b/src/js/core/base-gui.js index d06954d..6510416 100644 --- a/src/js/core/base-gui.js +++ b/src/js/core/base-gui.js @@ -293,7 +293,6 @@ class Base_gui_class { var gap_y = this.grid_size[1]; var width = config.WIDTH; - ; var height = config.HEIGHT; //size diff --git a/src/js/modules/effects/blueprint.js b/src/js/modules/effects/blueprint.js new file mode 100644 index 0000000..10dee5a --- /dev/null +++ b/src/js/modules/effects/blueprint.js @@ -0,0 +1,166 @@ +import config from './../../config.js'; +import Dialog_class from './../../libs/popup.js'; +import Base_layers_class from './../../core/base-layers.js'; +import ImageFilters from './../../libs/imagefilters.js'; +import glfx from './../../libs/glfx.js'; +import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js'; + +class Effects_blueprint_class { + + constructor() { + this.POP = new Dialog_class(); + this.Base_layers = new Base_layers_class(); + this.ImageFilters = ImageFilters; + this.fx_filter = false; + } + + blueprint() { + var _this = this; + + if (config.layer.type != 'image') { + alertify.error('Layer must be image, convert it to raster to apply this tool.'); + return; + } + + var settings = { + title: 'Blueprint', + preview: true, + effects: true, + params: [], + on_change: function (params, canvas_preview, w, h, canvas_) { + var data = _this.change(canvas_, canvas_.width, canvas_.height); + canvas_preview.clearRect(0, 0, canvas_.width, canvas_.height); + canvas_preview.drawImage(data, 0, 0); + }, + on_finish: function (params) { + window.State.save(); + _this.save(params); + }, + }; + this.POP.show(settings); + } + + save(params) { + //get canvas from layer + var canvas = this.Base_layers.convert_layer_to_canvas(null, true); + var ctx = canvas.getContext("2d"); + + //change data + var data = this.change(canvas, canvas.width, canvas.height); + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.drawImage(data, 0, 0); + + //save + this.Base_layers.update_layer_image(canvas); + } + + change(canvas, width, height) { + if (this.fx_filter == false) { + //init glfx lib + this.fx_filter = glfx.canvas(); + } + var ctx = canvas.getContext("2d"); + + //create blue layer + var canvas2 = document.createElement('canvas'); + var ctx2 = canvas2.getContext("2d"); + canvas2.width = width; + canvas2.height = height; + ctx2.fillStyle = '#0e58a3'; + ctx2.fillRect(0, 0, width, height); + + //apply edges + var img = ctx.getImageData(0, 0, width, height); + var img = this.ImageFilters.Edge(img); + ctx.putImageData(img, 0, 0); + + //denoise + var texture = this.fx_filter.texture(canvas); + this.fx_filter.draw(texture).denoise(20).update(); //effect + canvas = this.fx_filter; + + //Brightness + var img = ctx.getImageData(0, 0, width, height); + var img = this.ImageFilters.BrightnessContrastPhotoshop(img, 80, 0); + ctx.putImageData(img, 0, 0); + + //merge + ctx2.globalCompositeOperation = "screen"; + ctx2.filter = 'grayscale(1)'; + ctx2.drawImage(canvas, 0, 0); + ctx2.globalCompositeOperation = "source-over"; + ctx2.filter = 'none'; + + //draw lines + this.draw_grid(ctx2, 20); + + return canvas2; + } + + /** + * draw grid + * + * @param {CanvasContext} ctx + * @param {Int} size + */ + draw_grid(ctx, size) { + if (this.grid == false) + return; + + var width = config.WIDTH; + var height = config.HEIGHT; + var color_main = 'rgba(255, 255, 255, 0.5)'; + var color_small = 'rgba(255, 255, 255, 0.1)'; + + //size + if (size != undefined && size != undefined) + this.grid_size = [size, size]; + else { + size = this.grid_size[0]; + size = this.grid_size[1]; + } + size = parseInt(size); + size = parseInt(size); + ctx.lineWidth = 1; + ctx.beginPath(); + if (size < 2) + size = 2; + if (size < 2) + size = 2; + for (var i = size; i < width; i = i + size) { + if (size == 0) + break; + if (i % (size * 5) == 0) { + //main lines + ctx.strokeStyle = color_main; + } + else { + //small lines + ctx.strokeStyle = color_small; + } + ctx.beginPath(); + ctx.moveTo(0.5 + i, 0); + ctx.lineTo(0.5 + i, height); + ctx.stroke(); + } + for (var i = size; i < height; i = i + size) { + if (size == 0) + break; + if (i % (size * 5) == 0) { + //main lines + ctx.strokeStyle = color_main; + } + else { + //small lines + ctx.strokeStyle = color_small; + } + ctx.beginPath(); + ctx.moveTo(0, 0.5 + i); + ctx.lineTo(width, 0.5 + i); + ctx.stroke(); + } + } + +} + +export default Effects_blueprint_class; \ No newline at end of file diff --git a/src/js/modules/effects/night_vision.js b/src/js/modules/effects/night_vision.js index 6686643..67b3cd4 100644 --- a/src/js/modules/effects/night_vision.js +++ b/src/js/modules/effects/night_vision.js @@ -78,7 +78,6 @@ class Effects_nightVision_class { //vignete var texture = this.fx_filter.texture(canvas2); this.fx_filter.draw(texture).vignette(0.2, 0.9).update(); //effect - canvas2 = this.fx_filter; return canvas2;