blueprint effect

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.
 

src/js/config-menu.js

@@ -121,6 +121,7 @@ var menu_template = `
 					</ul>
 				</li>
 				<li><a class="trn dots" data-target="effects/black_and_white.black_and_white" href="#">Black and White</a>
+				<li><a class="trn dots" data-target="effects/blueprint.blueprint" href="#">Blueprint</a>
 				<li><a class="trn dots" data-target="effects/box_blur.box_blur" href="#">Box Blur</a>
 				<li><a class="trn dots" data-target="effects/denoise.denoise" href="#">Denoise</a>
 				<li><a class="trn dots" data-target="effects/dither.dither" href="#">Dither</a>

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

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;

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;