digital-image-processing-javascript/docs/examples/binary/main.mjs at main · devConcordia/digital-image-processing-javascript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

import DIP from "../../../source/index.mjs";
import Renderer2D from "../src/js/Renderer2D.mjs";

///
window.addEventListener('load', function(e) {

	///
	const BLACK = DIP.Color.Hex(0x000000).getBytes();

	/** addStep
	 *
	 *	@param {String} title
	 *	@param {ImageData} source
	 */
	function addStep( title, source ) {

	//	console.log( source )

		///
		let div = document.createElement('div');

		let p = document.createElement('p');
			p.innerHTML = title;

		div.appendChild( p );

		///
		DIP.CreateContext( source, div );

		document.body.appendChild( div );

	}


	/// DIP.Load() load a image as ColorImageData
	DIP.Load('../src/img/figure-11.png', function( source, ctx ) {

		let p = document.createElement('p');
			p.innerHTML = 'Remove noise';

		document.body.appendChild( p );

		///
		let binarySource = DIP.BinaryImageData.From( source );

	//	console.log( binarySource )

		/// 1. show input
		addStep( '1. Input', binarySource.getImageData() );

		///
		let matrix = DIP.Matrix.Ones(3,3);

		/// remove noise (whit morphology)
		let output = binarySource.hitOrMiss( matrix );

		/// show output
		addStep( '2. Output', output.getImageData() );

	});


	/// DIP.Load() load a image as ColorImageData
	DIP.Load('../src/img/figure-16.png', function( source, ctx ) {

		let p = document.createElement('p');
			p.innerHTML = 'Extract Boundary';

		document.body.appendChild( p );


		let binarySource = DIP.BinaryImageData.From( source );

		/// 1. show input
		addStep( '1. Input', binarySource.getImageData() );

		///
		let matrix = DIP.Matrix.Ones(3,3);

		/// boundary extraction (with morphology)
		let output = binarySource.boundary( matrix );

		/// show output
		addStep( '2. Output', output.getImageData() );

	});


	/// DIP.Load() load a image as ColorImageData
	DIP.Load('../src/img/figure-63.jpg', function( source, ctx ) {

		let p = document.createElement('p');
			p.innerHTML = 'Fill Holes';

		document.body.appendChild( p );


		let binarySource = DIP.BinaryImageData.From( source );

		/// 1. show input
		addStep( '1. Input', binarySource.getImageData() );

		let output = binarySource.fillHoles();

		/// show output
		addStep( '2. Output', output.getImageData() );

	});


	/// DIP.Load() load a image as ColorImageData
	DIP.Load('../src/img/horse.png', function( source, ctx ) {

		let p = document.createElement('p');
			p.innerHTML = 'Thinning';

		document.body.appendChild( p );


		let binarySource = DIP.BinaryImageData.From( source );

		/// 1. show input
		addStep( '1. Input', binarySource.getImageData() );

		///
		let matrix = DIP.Matrix.Radial(3);

		let output = binarySource.thinning( matrix );

		/// 2. show output
		addStep( '2. Output', output.getImageData() );

	});

	/**/

}, false);