@yoozsoft/yoozsoft-ng 5.3.5 → 7.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (113) hide show
  1. package/README.md +143 -24
  2. package/assets/js/UTIF.js-master/LICENSE +21 -21
  3. package/assets/js/UTIF.js-master/README.md +72 -72
  4. package/assets/js/UTIF.js-master/UTIF.js +1762 -1762
  5. package/assets/js/UTIF.js-master/package-lock.json +13 -13
  6. package/assets/js/UTIF.js-master/package.json +24 -0
  7. package/assets/styles/components/_ys-navbar.scss +22 -0
  8. package/assets/styles/components/_ys-pagination.scss +10 -0
  9. package/assets/styles/{ys-layout.scss → utilities/ys-layout.scss} +1 -1
  10. package/assets/styles/ys-styles.scss +2 -0
  11. package/autocomplete/package.json +4 -0
  12. package/date/package.json +4 -0
  13. package/datepicker/package.json +4 -0
  14. package/dropdown/package.json +4 -0
  15. package/fesm2022/yoozsoft-yoozsoft-ng-autocomplete.mjs +257 -197
  16. package/fesm2022/yoozsoft-yoozsoft-ng-autocomplete.mjs.map +1 -1
  17. package/fesm2022/yoozsoft-yoozsoft-ng-date.mjs +562 -0
  18. package/fesm2022/yoozsoft-yoozsoft-ng-date.mjs.map +1 -0
  19. package/fesm2022/yoozsoft-yoozsoft-ng-datepicker.mjs +600 -837
  20. package/fesm2022/yoozsoft-yoozsoft-ng-datepicker.mjs.map +1 -1
  21. package/fesm2022/yoozsoft-yoozsoft-ng-dropdown.mjs +161 -151
  22. package/fesm2022/yoozsoft-yoozsoft-ng-dropdown.mjs.map +1 -1
  23. package/fesm2022/yoozsoft-yoozsoft-ng-file-upload.mjs +93 -103
  24. package/fesm2022/yoozsoft-yoozsoft-ng-file-upload.mjs.map +1 -1
  25. package/fesm2022/yoozsoft-yoozsoft-ng-footer.mjs +16 -21
  26. package/fesm2022/yoozsoft-yoozsoft-ng-footer.mjs.map +1 -1
  27. package/fesm2022/yoozsoft-yoozsoft-ng-loading.mjs +20 -24
  28. package/fesm2022/yoozsoft-yoozsoft-ng-loading.mjs.map +1 -1
  29. package/fesm2022/yoozsoft-yoozsoft-ng-navbar.mjs +60 -76
  30. package/fesm2022/yoozsoft-yoozsoft-ng-navbar.mjs.map +1 -1
  31. package/fesm2022/yoozsoft-yoozsoft-ng-overlay.mjs +11 -15
  32. package/fesm2022/yoozsoft-yoozsoft-ng-overlay.mjs.map +1 -1
  33. package/fesm2022/yoozsoft-yoozsoft-ng-pagination.mjs +61 -55
  34. package/fesm2022/yoozsoft-yoozsoft-ng-pagination.mjs.map +1 -1
  35. package/fesm2022/yoozsoft-yoozsoft-ng-password-strength.mjs +142 -130
  36. package/fesm2022/yoozsoft-yoozsoft-ng-password-strength.mjs.map +1 -1
  37. package/fesm2022/yoozsoft-yoozsoft-ng-pipes.mjs +44 -0
  38. package/fesm2022/yoozsoft-yoozsoft-ng-pipes.mjs.map +1 -0
  39. package/fesm2022/yoozsoft-yoozsoft-ng-progress.mjs +51 -34
  40. package/fesm2022/yoozsoft-yoozsoft-ng-progress.mjs.map +1 -1
  41. package/fesm2022/yoozsoft-yoozsoft-ng-rating.mjs +155 -0
  42. package/fesm2022/yoozsoft-yoozsoft-ng-rating.mjs.map +1 -0
  43. package/fesm2022/yoozsoft-yoozsoft-ng-select.mjs +78 -80
  44. package/fesm2022/yoozsoft-yoozsoft-ng-select.mjs.map +1 -1
  45. package/fesm2022/yoozsoft-yoozsoft-ng-sidebar.mjs +99 -99
  46. package/fesm2022/yoozsoft-yoozsoft-ng-sidebar.mjs.map +1 -1
  47. package/fesm2022/yoozsoft-yoozsoft-ng-table.mjs +316 -0
  48. package/fesm2022/yoozsoft-yoozsoft-ng-table.mjs.map +1 -0
  49. package/fesm2022/yoozsoft-yoozsoft-ng-tiff-viewer.mjs +128 -114
  50. package/fesm2022/yoozsoft-yoozsoft-ng-tiff-viewer.mjs.map +1 -1
  51. package/fesm2022/yoozsoft-yoozsoft-ng-toast.mjs +112 -62
  52. package/fesm2022/yoozsoft-yoozsoft-ng-toast.mjs.map +1 -1
  53. package/fesm2022/yoozsoft-yoozsoft-ng-validators.mjs +37 -0
  54. package/fesm2022/yoozsoft-yoozsoft-ng-validators.mjs.map +1 -0
  55. package/fesm2022/yoozsoft-yoozsoft-ng.mjs.map +1 -1
  56. package/file-upload/package.json +4 -0
  57. package/footer/package.json +4 -0
  58. package/loading/package.json +4 -0
  59. package/navbar/package.json +4 -0
  60. package/overlay/package.json +4 -0
  61. package/package.json +61 -38
  62. package/pagination/package.json +4 -0
  63. package/password-strength/package.json +4 -0
  64. package/pipes/package.json +4 -0
  65. package/progress/package.json +4 -0
  66. package/rating/package.json +4 -0
  67. package/select/package.json +4 -0
  68. package/sidebar/package.json +4 -0
  69. package/table/package.json +4 -0
  70. package/tiff-viewer/package.json +4 -0
  71. package/toast/package.json +4 -0
  72. package/types/yoozsoft-yoozsoft-ng-autocomplete.d.ts +79 -0
  73. package/types/yoozsoft-yoozsoft-ng-date.d.ts +118 -0
  74. package/types/yoozsoft-yoozsoft-ng-datepicker.d.ts +120 -0
  75. package/types/yoozsoft-yoozsoft-ng-dropdown.d.ts +76 -0
  76. package/types/yoozsoft-yoozsoft-ng-file-upload.d.ts +75 -0
  77. package/types/yoozsoft-yoozsoft-ng-footer.d.ts +26 -0
  78. package/types/yoozsoft-yoozsoft-ng-loading.d.ts +14 -0
  79. package/types/yoozsoft-yoozsoft-ng-navbar.d.ts +60 -0
  80. package/types/yoozsoft-yoozsoft-ng-overlay.d.ts +10 -0
  81. package/types/yoozsoft-yoozsoft-ng-pagination.d.ts +31 -0
  82. package/types/yoozsoft-yoozsoft-ng-password-strength.d.ts +73 -0
  83. package/types/yoozsoft-yoozsoft-ng-pipes.d.ts +11 -0
  84. package/types/yoozsoft-yoozsoft-ng-progress.d.ts +31 -0
  85. package/types/yoozsoft-yoozsoft-ng-rating.d.ts +56 -0
  86. package/types/yoozsoft-yoozsoft-ng-select.d.ts +43 -0
  87. package/types/yoozsoft-yoozsoft-ng-sidebar.d.ts +69 -0
  88. package/types/yoozsoft-yoozsoft-ng-table.d.ts +137 -0
  89. package/types/yoozsoft-yoozsoft-ng-tiff-viewer.d.ts +53 -0
  90. package/types/yoozsoft-yoozsoft-ng-toast.d.ts +66 -0
  91. package/types/yoozsoft-yoozsoft-ng-validators.d.ts +5 -0
  92. package/validators/package.json +4 -0
  93. package/autocomplete/index.d.ts +0 -71
  94. package/datepicker/index.d.ts +0 -291
  95. package/directives/index.d.ts +0 -17
  96. package/dropdown/index.d.ts +0 -62
  97. package/fesm2022/yoozsoft-yoozsoft-ng-directives.mjs +0 -57
  98. package/fesm2022/yoozsoft-yoozsoft-ng-directives.mjs.map +0 -1
  99. package/file-upload/index.d.ts +0 -72
  100. package/footer/index.d.ts +0 -25
  101. package/loading/index.d.ts +0 -13
  102. package/navbar/index.d.ts +0 -56
  103. package/overlay/index.d.ts +0 -11
  104. package/pagination/index.d.ts +0 -29
  105. package/password-strength/index.d.ts +0 -84
  106. package/progress/index.d.ts +0 -28
  107. package/select/index.d.ts +0 -39
  108. package/sidebar/index.d.ts +0 -94
  109. package/tiff-viewer/index.d.ts +0 -52
  110. package/toast/index.d.ts +0 -53
  111. /package/assets/styles/{ys-preloader-9.scss → preloaders/ys-preloader-9.scss} +0 -0
  112. /package/assets/styles/{ys-preloader.scss → preloaders/ys-preloader.scss} +0 -0
  113. /package/{index.d.ts → types/yoozsoft-yoozsoft-ng.d.ts} +0 -0
package/README.md CHANGED
@@ -1,45 +1,53 @@
1
1
  # Yoozsoft Ng
2
2
 
3
- Angular widgets built up using Bootstrap 5 CSS and NG Bootstrap 19 widgets with APIs designed for the Angular ecosystem, that are in standalone style.
4
- We are using TypeScript and targeting the Ng Bootstrap 19 widgets and Bootstrap 5 CSS framework.
5
- As with Bootstrap 5 and Angular 2, this library is a work in progress.
3
+ Angular UI components and widgets built with Bootstrap 5 CSS and ng-bootstrap.
6
4
 
7
- The dependencies are [Angular](https://angular.io/), [Ng Bootstrap](https://ng-bootstrap.github.io/) 19 widgets, [Bootstrap](https://getbootstrap.com/) 5 CSS, [Popper](https://popper.js.org/).
5
+ `@yoozsoft/yoozsoft-ng` provides standalone Angular components with APIs designed for the Angular ecosystem.
6
+
7
+ The library is built with TypeScript and is designed to work with Angular, Bootstrap 5 CSS, and ng-bootstrap.
8
+
9
+ ## Features
10
+
11
+ - Standalone Angular components
12
+ - Signal-based APIs
13
+ - Zoneless-ready
14
+ - SSR-friendly
15
+ - Bootstrap 5 based components
8
16
 
9
17
  ## Table of Contents
10
18
 
11
19
  <ul>
12
20
  <li><a href="#demo">Demo</a></li>
21
+ <li><a href="#compatibility">Compatibility</a></li>
13
22
  <li><a href="#dependencies">Dependencies</a></li>
14
23
  <li><a href="#installation">Installation</a></li>
15
- <!-- <li><a href="#supported-browsers">Supported browsers</a></li>
16
- <li><a href="#getting-help">Getting help</a></li>
17
- <li><a href="#you-think-youve-found-a-bug">Do you think you've found a bug?</a></li>
18
- <li><a href="#contributing-to-the-project">Contributing to the project</a></li>
19
- <li><a href="#code-of-conduct">Code of conduct</a></li> -->
24
+ <li><a href="#usage">Usage</a></li>
25
+ <li><a href="#styles">Styles</a></li>
26
+ <li><a href="#icons">Icons</a></li>
27
+ <li><a href="#license">License</a></li>
20
28
  </ul>
21
29
 
22
30
  ## Demo
23
31
 
24
32
  Visit the [Yoozsoft Website](https://www.yoozsoft.com/ys-ng) for general information, demos and documentation.
25
33
 
26
- ## Dependencies
34
+ ## Compatibility
27
35
 
28
- The only dependencies are Angular, Ng Bootstrap 19 widgets, Bootstrap 5 CSS, and Popper. The supported versions are:
36
+ The library versions are aligned with the corresponding Angular versions.
29
37
 
30
38
  <table>
31
39
  <thead>
32
40
  <tr>
33
- <th>yoozsoft-ng</th>
34
- <th>Angular</th>
35
- <th>ng-bootstrap</th>
36
- <th>Bootstrap CSS</th>
37
- <th>Popper</th>
41
+ <th scope="col">yoozsoft-ng</th>
42
+ <th scope="col">Angular</th>
43
+ <th scope="col">ng-bootstrap</th>
44
+ <th scope="col">Bootstrap CSS</th>
45
+ <th scope="col">Popper</th>
38
46
  </tr>
39
47
  </thead>
40
48
  <tbody>
41
49
  <tr>
42
- <th scope="row">1.x.x-alpha.x</td>
50
+ <th scope="row">1.x.x-alpha.x</th>
43
51
  <td>^16.1.0</td>
44
52
  <td>15.0.1</td>
45
53
  <td>5.3.0</td>
@@ -73,15 +81,126 @@ The only dependencies are Angular, Ng Bootstrap 19 widgets, Bootstrap 5 CSS, and
73
81
  <td>5.3.6</td>
74
82
  <td>2.11.8</td>
75
83
  </tr>
84
+ <tr>
85
+ <th scope="row">6.x.x</th>
86
+ <td>^21.0.0</td>
87
+ <td>20.0.0</td>
88
+ <td>5.3.8</td>
89
+ <td>2.11.8</td>
90
+ </tr>
91
+ <tr>
92
+ <th scope="row">7.x.x</th>
93
+ <td>^22.0.0</td>
94
+ <td>21.0.0</td>
95
+ <td>5.3.8</td>
96
+ <td>2.11.8</td>
97
+ </tr>
76
98
  </tbody>
77
99
  </table>
78
100
 
101
+ ## Dependencies
102
+
103
+ The library is designed to work with:
104
+
105
+ - [Angular](https://angular.io/)
106
+ - [ng-bootstrap](https://ng-bootstrap.github.io/)
107
+ - [Bootstrap 5](https://getbootstrap.com/)
108
+ - [Popper](https://popper.js.org/)
109
+
110
+ For the exact Angular peer dependency requirements, please refer to the package metadata.
111
+
79
112
  ## Installation
80
113
 
81
- Add `bootstrap`, `@popperjs/core`, `@ng-bootstrap/ng-bootstrap` dependencies from npm.
82
- <!-- Install the `@angular/localize` polyfill.
83
- Add bootstrap CSS/SCSS to your project (no javascript is required)
84
- Import `NgbModule`, or any other component module like `NgbPaginationModule`, or directly import the ng-bootstrap components and directives that you use, which are standalone. -->
85
- Run `npm i @yoozsoft/yoozsoft-ng` to install the package.
86
- Import any standalone component like `YsNavbarComponent` in your modules, or directly import the components and directives that you use, which are standalone.
87
- We've preferred to use Font Awesome icon sets by default.
114
+ Install the library from npm:
115
+
116
+ ```bash
117
+ npm i @yoozsoft/yoozsoft-ng
118
+ ```
119
+
120
+ Install the required UI dependencies:
121
+
122
+ ```bash
123
+ npm install @ng-bootstrap/ng-bootstrap@21 bootstrap@5.3.8 @popperjs/core@2.11.8
124
+ ```
125
+
126
+ Bootstrap CSS
127
+
128
+ Add Bootstrap CSS to your application.
129
+
130
+ For example, in `angular.json`:
131
+
132
+ ```json
133
+ {
134
+ "styles": [
135
+ "node_modules/bootstrap/dist/css/bootstrap.min.css",
136
+ "src/styles.scss"
137
+ ]
138
+ }
139
+ ```
140
+
141
+ ## Usage
142
+
143
+ The library is built using standalone Angular components.
144
+
145
+ Import the components and directives you need directly into your Angular components.
146
+
147
+ Example:
148
+
149
+ ```ts
150
+ import { Component } from '@angular/core';
151
+ import { YsNavbarComponent } from '@yoozsoft/yoozsoft-ng';
152
+
153
+ @Component({
154
+ imports: [YsNavbarComponent],
155
+ template: '<ys-navbar></ys-navbar>'
156
+ })
157
+ export class AppComponent {}
158
+ ```
159
+
160
+ ## Styles
161
+
162
+ Some components require additional global styles to be included in your application.
163
+
164
+ You can import all library styles from the main styles entry point:
165
+
166
+ ```scss
167
+ @use "@yoozsoft/yoozsoft-ng/styles";
168
+ ```
169
+
170
+ Or import only the styles required by your application:
171
+
172
+ ```scss
173
+ @use "@yoozsoft/yoozsoft-ng/styles/ys-navbar";
174
+ @use "@yoozsoft/yoozsoft-ng/styles/ys-pagination";
175
+ ```
176
+
177
+ Available component styles:
178
+
179
+ <table>
180
+ <thead>
181
+ <tr>
182
+ <th scope="col">Component</th>
183
+ <th scope="col">Required style</th>
184
+ </tr>
185
+ </thead>
186
+ <tbody>
187
+ <tr>
188
+ <th scope="row">Navbar</th>
189
+ <td>_ys-navbar.scss</td>
190
+ </tr>
191
+ <tr>
192
+ <th scope="row">Pagination</th>
193
+ <td>_ys-pagination.scss</td>
194
+ </tr>
195
+ </tbody>
196
+ </table>
197
+
198
+ ## Icons
199
+
200
+ The library primarily uses Font Awesome icon classes by default.
201
+
202
+ When using components that rely on Font Awesome icons, make sure the required Font Awesome styles are available in your application.
203
+
204
+ ## License
205
+
206
+ MIT
@@ -1,21 +1,21 @@
1
- MIT License
2
-
3
- Copyright (c) 2017 Photopea
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
1
+ MIT License
2
+
3
+ Copyright (c) 2017 Photopea
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
@@ -1,72 +1,72 @@
1
- # UTIF.js
2
- A small, fast and advanced TIFF / EXIF (+ DNG, CR2, NEF and other TIFF-ish files) decoder and encoder. It is the main TIFF library for [Photopea image editor](https://www.photopea.com). Try to open your TIFF file with Photopea to see, if UTIF.js can parse it.
3
-
4
- * Supports Black & White, Grayscale, RGB and Paletted images
5
- * Supports Fax 3 and Fax 4 (CCITT), JPEG, LZW, PackBits and other compressions (1,3,4,5,6,7,8,32773,32809)
6
- * E.g. [this 8 MPix image](//www.photopea.com/api/img2/G4.TIF) with Fax 4 compression is just 56 kB ( [Open in Photopea](https://www.photopea.com?p=%7B%22files%22:%5B%22//www.photopea.com/api/img2/G4.TIF%22%5D%7D) )
7
-
8
- For RAW files, UTIF.js only decodes raw sensor data (and JPG previews, if there are any). It does not convert the raw data into a displayable image (RGBA). Such conversion is complex and out of scope of this library.
9
-
10
- ## Installation
11
-
12
- Download and include the `UTIF.js` file in your code.
13
-
14
- #### `UTIF.decode(buffer)`
15
- * `buffer`: ArrayBuffer containing TIFF or EXIF data
16
- * returns an array of "IFDs" (image file directories). Each IFD is an object, keys are "tXYZ" (XYZ is a TIFF tag number), values are values of these tags. You can get the the dimension (and other properties, "metadata") of the image without decompressing pixel data.
17
-
18
- #### `UTIF.decodeImage(buffer, ifd)`
19
- * `buffer`: ArrayBuffer containing TIFF or EXIF data
20
- * `ifd`: the element of the output of UTIF.decode()
21
- * If there is an image inside the IFD, it is decoded and three new properties are added to the IFD:
22
- * * `width`: the width of the image
23
- * * `height`: the height of the image
24
- * * `data`: decompressed pixel data of the image
25
-
26
- TIFF files may have various number of channels and various color depth. The interpretation of `data` depends on many tags (see the [TIFF 6 specification](http://www.npes.org/pdf/TIFF-v6.pdf)). The following function converts any TIFF image into a 8-bit RGBA image.
27
-
28
- #### `UTIF.toRGBA8(ifd)`
29
- * `ifd`: image file directory (element of "ifds" returned by UTIF.decode(), processed by UTIF.decodeImage())
30
- * returns Uint8Array of the image in RGBA format, 8 bits per channel (ready to use in context2d.putImageData() etc.)
31
-
32
- ### Example
33
-
34
- ```javascript
35
- function imgLoaded(e) {
36
- var ifds = UTIF.decode(e.target.response);
37
- UTIF.decodeImage(e.target.response, ifds[0])
38
- var rgba = UTIF.toRGBA8(ifds[0]); // Uint8Array with RGBA pixels
39
- console.log(ifds[0].width, ifds[0].height, ifds[0]);
40
- }
41
-
42
- var xhr = new XMLHttpRequest();
43
- xhr.open("GET", "my_image.tif");
44
- xhr.responseType = "arraybuffer";
45
- xhr.onload = imgLoaded; xhr.send();
46
- ```
47
- ## Use TIFF images in HTML
48
-
49
- If you are not a programmer, you can use TIFF images directly inside the `<img>` element of HTML. Then, it is enough to call `UTIF.replaceIMG()` once at some point.
50
-
51
- #### `UTIF.replaceIMG()`
52
- ```html
53
- <body onload="UTIF.replaceIMG()">
54
- ...
55
- <img src="image.tif" /> <img src="dog.tif" /> ...
56
- ```
57
- And UTIF.js will do the rest. Internally, the "src" attribute of the image will be replaced with a new URI of the image (base64-encoded PNG). Note, that you can also insert DNG, CR2, NEF and other raw images into HTML this way.
58
-
59
- ## Encoding TIFF images
60
-
61
- You should not save images into TIFF format in the 21st century. Save them as PNG instead (e.g. using [UPNG.js](https://github.com/photopea/UPNG.js)). If you still want to use TIFF format for some reason, here it is.
62
-
63
- #### `UTIF.encodeImage(rgba, w, h, metadata)`
64
- * `rgba`: ArrayBuffer containing RGBA pixel data
65
- * `w`: image width
66
- * `h`: image height
67
- * `metadata` [optional]: IFD object (see below)
68
- * returns ArrayBuffer of the binary TIFF file. No compression right now.
69
-
70
- #### `UTIF.encode(ifds)`
71
- * `ifds`: array of IFDs (image file directories). An IFD is a JS object with properties "tXYZ" (where XYZ are TIFF tags)
72
- * returns ArrayBuffer of binary data. You can use it to encode EXIF data.
1
+ # UTIF.js
2
+ A small, fast and advanced TIFF / EXIF (+ DNG, CR2, NEF and other TIFF-ish files) decoder and encoder. It is the main TIFF library for [Photopea image editor](https://www.photopea.com). Try to open your TIFF file with Photopea to see, if UTIF.js can parse it.
3
+
4
+ * Supports Black & White, Grayscale, RGB and Paletted images
5
+ * Supports Fax 3 and Fax 4 (CCITT), JPEG, LZW, PackBits and other compressions (1,3,4,5,6,7,8,32773,32809)
6
+ * E.g. [this 8 MPix image](//www.photopea.com/api/img2/G4.TIF) with Fax 4 compression is just 56 kB ( [Open in Photopea](https://www.photopea.com?p=%7B%22files%22:%5B%22//www.photopea.com/api/img2/G4.TIF%22%5D%7D) )
7
+
8
+ For RAW files, UTIF.js only decodes raw sensor data (and JPG previews, if there are any). It does not convert the raw data into a displayable image (RGBA). Such conversion is complex and out of scope of this library.
9
+
10
+ ## Installation
11
+
12
+ Download and include the `UTIF.js` file in your code.
13
+
14
+ #### `UTIF.decode(buffer)`
15
+ * `buffer`: ArrayBuffer containing TIFF or EXIF data
16
+ * returns an array of "IFDs" (image file directories). Each IFD is an object, keys are "tXYZ" (XYZ is a TIFF tag number), values are values of these tags. You can get the the dimension (and other properties, "metadata") of the image without decompressing pixel data.
17
+
18
+ #### `UTIF.decodeImage(buffer, ifd)`
19
+ * `buffer`: ArrayBuffer containing TIFF or EXIF data
20
+ * `ifd`: the element of the output of UTIF.decode()
21
+ * If there is an image inside the IFD, it is decoded and three new properties are added to the IFD:
22
+ * * `width`: the width of the image
23
+ * * `height`: the height of the image
24
+ * * `data`: decompressed pixel data of the image
25
+
26
+ TIFF files may have various number of channels and various color depth. The interpretation of `data` depends on many tags (see the [TIFF 6 specification](http://www.npes.org/pdf/TIFF-v6.pdf)). The following function converts any TIFF image into a 8-bit RGBA image.
27
+
28
+ #### `UTIF.toRGBA8(ifd)`
29
+ * `ifd`: image file directory (element of "ifds" returned by UTIF.decode(), processed by UTIF.decodeImage())
30
+ * returns Uint8Array of the image in RGBA format, 8 bits per channel (ready to use in context2d.putImageData() etc.)
31
+
32
+ ### Example
33
+
34
+ ```javascript
35
+ function imgLoaded(e) {
36
+ var ifds = UTIF.decode(e.target.response);
37
+ UTIF.decodeImage(e.target.response, ifds[0])
38
+ var rgba = UTIF.toRGBA8(ifds[0]); // Uint8Array with RGBA pixels
39
+ console.log(ifds[0].width, ifds[0].height, ifds[0]);
40
+ }
41
+
42
+ var xhr = new XMLHttpRequest();
43
+ xhr.open("GET", "my_image.tif");
44
+ xhr.responseType = "arraybuffer";
45
+ xhr.onload = imgLoaded; xhr.send();
46
+ ```
47
+ ## Use TIFF images in HTML
48
+
49
+ If you are not a programmer, you can use TIFF images directly inside the `<img>` element of HTML. Then, it is enough to call `UTIF.replaceIMG()` once at some point.
50
+
51
+ #### `UTIF.replaceIMG()`
52
+ ```html
53
+ <body onload="UTIF.replaceIMG()">
54
+ ...
55
+ <img src="image.tif" /> <img src="dog.tif" /> ...
56
+ ```
57
+ And UTIF.js will do the rest. Internally, the "src" attribute of the image will be replaced with a new URI of the image (base64-encoded PNG). Note, that you can also insert DNG, CR2, NEF and other raw images into HTML this way.
58
+
59
+ ## Encoding TIFF images
60
+
61
+ You should not save images into TIFF format in the 21st century. Save them as PNG instead (e.g. using [UPNG.js](https://github.com/photopea/UPNG.js)). If you still want to use TIFF format for some reason, here it is.
62
+
63
+ #### `UTIF.encodeImage(rgba, w, h, metadata)`
64
+ * `rgba`: ArrayBuffer containing RGBA pixel data
65
+ * `w`: image width
66
+ * `h`: image height
67
+ * `metadata` [optional]: IFD object (see below)
68
+ * returns ArrayBuffer of the binary TIFF file. No compression right now.
69
+
70
+ #### `UTIF.encode(ifds)`
71
+ * `ifds`: array of IFDs (image file directories). An IFD is a JS object with properties "tXYZ" (where XYZ are TIFF tags)
72
+ * returns ArrayBuffer of binary data. You can use it to encode EXIF data.