@metools/web-image-converter 1.0.1 → 1.0.3
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.
- package/dist/image_converter_back_end_bg.wasm +0 -0
- package/dist/index.d.ts +153 -0
- package/package.json +1 -4
- package/publish.sh +1 -0
- package/readme.md +26 -3
|
Binary file
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
interface CompressionOptions {
|
|
2
|
+
format: string;
|
|
3
|
+
quality?: number;
|
|
4
|
+
}
|
|
5
|
+
declare abstract class ImageCompressionOptions {
|
|
6
|
+
abstract get optionExport(): CompressionOptions;
|
|
7
|
+
}
|
|
8
|
+
declare class JpegCompressionOptions extends ImageCompressionOptions {
|
|
9
|
+
quality: number;
|
|
10
|
+
constructor(quality: number);
|
|
11
|
+
get optionExport(): CompressionOptions;
|
|
12
|
+
}
|
|
13
|
+
declare class PngCompressionOptions extends ImageCompressionOptions {
|
|
14
|
+
quality: number;
|
|
15
|
+
constructor(quality: number);
|
|
16
|
+
get optionExport(): CompressionOptions;
|
|
17
|
+
}
|
|
18
|
+
declare class GifCompressionOptions extends ImageCompressionOptions {
|
|
19
|
+
get optionExport(): CompressionOptions;
|
|
20
|
+
}
|
|
21
|
+
declare class BmpCompressionOptions extends ImageCompressionOptions {
|
|
22
|
+
get optionExport(): CompressionOptions;
|
|
23
|
+
}
|
|
24
|
+
declare class TgaCompressionOptions extends ImageCompressionOptions {
|
|
25
|
+
get optionExport(): CompressionOptions;
|
|
26
|
+
}
|
|
27
|
+
declare class TiffCompressionOptions extends ImageCompressionOptions {
|
|
28
|
+
get optionExport(): CompressionOptions;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
interface CropDimensionOptions {
|
|
32
|
+
x: number;
|
|
33
|
+
y: number;
|
|
34
|
+
width: number;
|
|
35
|
+
height: number;
|
|
36
|
+
}
|
|
37
|
+
interface CropAspectRatioOptions {
|
|
38
|
+
ratio_width: number;
|
|
39
|
+
ratio_height: number;
|
|
40
|
+
}
|
|
41
|
+
interface CropEachSideOptions {
|
|
42
|
+
crop_left: number;
|
|
43
|
+
crop_right: number;
|
|
44
|
+
crop_top: number;
|
|
45
|
+
crop_bottom: number;
|
|
46
|
+
}
|
|
47
|
+
type CropOptions = CropDimensionOptions | CropAspectRatioOptions | CropEachSideOptions;
|
|
48
|
+
declare abstract class ImageCropOptions {
|
|
49
|
+
abstract get optionExport(): CropOptions;
|
|
50
|
+
}
|
|
51
|
+
declare class ImageCropDimensionOptions extends ImageCropOptions {
|
|
52
|
+
x: number;
|
|
53
|
+
y: number;
|
|
54
|
+
width: number;
|
|
55
|
+
height: number;
|
|
56
|
+
constructor(payload: {
|
|
57
|
+
x: number;
|
|
58
|
+
y: number;
|
|
59
|
+
width: number;
|
|
60
|
+
height: number;
|
|
61
|
+
});
|
|
62
|
+
get optionExport(): CropDimensionOptions;
|
|
63
|
+
}
|
|
64
|
+
declare class ImageCropAspectRatioOptions extends ImageCropOptions {
|
|
65
|
+
ratio_width: number;
|
|
66
|
+
ratio_height: number;
|
|
67
|
+
constructor(payload: {
|
|
68
|
+
ratio_width: number;
|
|
69
|
+
ratio_height: number;
|
|
70
|
+
});
|
|
71
|
+
get optionExport(): CropAspectRatioOptions;
|
|
72
|
+
}
|
|
73
|
+
declare class ImageCropEachSideOptions extends ImageCropOptions {
|
|
74
|
+
crop_left: number;
|
|
75
|
+
crop_right: number;
|
|
76
|
+
crop_top: number;
|
|
77
|
+
crop_bottom: number;
|
|
78
|
+
constructor(payload: {
|
|
79
|
+
crop_left: number;
|
|
80
|
+
crop_right: number;
|
|
81
|
+
crop_top: number;
|
|
82
|
+
crop_bottom: number;
|
|
83
|
+
});
|
|
84
|
+
get optionExport(): CropEachSideOptions;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
interface ResizeDimensionOptions {
|
|
88
|
+
width: number;
|
|
89
|
+
height: number;
|
|
90
|
+
}
|
|
91
|
+
interface ResizeAspectRatioOptions {
|
|
92
|
+
ratio_width: number;
|
|
93
|
+
ratio_height: number;
|
|
94
|
+
}
|
|
95
|
+
interface ResizeLongestSideOptions {
|
|
96
|
+
longest_side: number;
|
|
97
|
+
}
|
|
98
|
+
type ResizeOptions = ResizeDimensionOptions | ResizeAspectRatioOptions | ResizeLongestSideOptions;
|
|
99
|
+
declare abstract class ImpageResizeOptions {
|
|
100
|
+
abstract get optionExport(): ResizeOptions;
|
|
101
|
+
}
|
|
102
|
+
declare class ImageResizeDimensionOptions extends ImpageResizeOptions {
|
|
103
|
+
width: number;
|
|
104
|
+
height: number;
|
|
105
|
+
constructor(payload: {
|
|
106
|
+
width: number;
|
|
107
|
+
height: number;
|
|
108
|
+
});
|
|
109
|
+
get optionExport(): ResizeDimensionOptions;
|
|
110
|
+
}
|
|
111
|
+
declare class ImageResizeAspectRatioOptions extends ImpageResizeOptions {
|
|
112
|
+
ratio_width: number;
|
|
113
|
+
ratio_height: number;
|
|
114
|
+
constructor(payload: {
|
|
115
|
+
ratio_width: number;
|
|
116
|
+
ratio_height: number;
|
|
117
|
+
});
|
|
118
|
+
get optionExport(): ResizeAspectRatioOptions;
|
|
119
|
+
}
|
|
120
|
+
declare class ImageResizeLongestSideOptions extends ImpageResizeOptions {
|
|
121
|
+
longest_side: number;
|
|
122
|
+
constructor(payload: {
|
|
123
|
+
longest_side: number;
|
|
124
|
+
});
|
|
125
|
+
get optionExport(): ResizeLongestSideOptions;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
interface ImageConverterInput {
|
|
129
|
+
compression?: ImageCompressionOptions;
|
|
130
|
+
resize?: ImpageResizeOptions;
|
|
131
|
+
crop?: ImageCropOptions;
|
|
132
|
+
}
|
|
133
|
+
declare class ImageConverter {
|
|
134
|
+
compression?: ImageCompressionOptions;
|
|
135
|
+
resize?: ImpageResizeOptions;
|
|
136
|
+
crop?: ImageCropOptions;
|
|
137
|
+
constructor(payload: ImageConverterInput);
|
|
138
|
+
get options(): Record<string, unknown>;
|
|
139
|
+
convertImageFile(file: File): Promise<Uint8Array<ArrayBufferLike>>;
|
|
140
|
+
convertImageBytes(bytes: Uint8Array): Promise<Uint8Array<ArrayBufferLike>>;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
declare function getJpegConverter(payload?: {
|
|
144
|
+
quality?: number;
|
|
145
|
+
longest_side?: number;
|
|
146
|
+
}): ImageConverter;
|
|
147
|
+
|
|
148
|
+
declare function getPngConverter(payload?: {
|
|
149
|
+
compressionLevel?: number;
|
|
150
|
+
longest_side?: number;
|
|
151
|
+
}): ImageConverter;
|
|
152
|
+
|
|
153
|
+
export { BmpCompressionOptions, GifCompressionOptions, ImageConverter, ImageCropAspectRatioOptions, ImageCropDimensionOptions, ImageCropEachSideOptions, ImageResizeAspectRatioOptions, ImageResizeDimensionOptions, ImageResizeLongestSideOptions, JpegCompressionOptions, PngCompressionOptions, TgaCompressionOptions, TiffCompressionOptions, getJpegConverter, getPngConverter };
|
package/package.json
CHANGED
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@metools/web-image-converter",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
|
-
"files": [
|
|
8
|
-
"dist/image_converter_back_end_bg.wasm"
|
|
9
|
-
],
|
|
10
7
|
"type": "module",
|
|
11
8
|
"sideEffects": false,
|
|
12
9
|
"author": "Mathew E. Thompson",
|
package/publish.sh
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
npm publish --access public
|
package/readme.md
CHANGED
|
@@ -21,6 +21,29 @@ This package is for you!
|
|
|
21
21
|
|
|
22
22
|
The meat of the project is written in Rust and exported into a WebAssembly binary. The project also contains a TypeScript API for interacting with the WebAssembly back end.
|
|
23
23
|
|
|
24
|
+
## Installation
|
|
25
|
+
|
|
26
|
+
Just install the package with your package manager of choice:
|
|
27
|
+
|
|
28
|
+
`npm install @metools/web-image-converter`
|
|
29
|
+
|
|
30
|
+
## Bundler Caveats
|
|
31
|
+
|
|
32
|
+
WebAssembly is still not a first class citizen among all bundlers and dev servers, so some bundlers and dev servers may have an issue serving Wasm files or adding them to the build directory. Below are lists of caveates and workarounds for bundlers:
|
|
33
|
+
|
|
34
|
+
### Vite
|
|
35
|
+
|
|
36
|
+
When bundling this app with Vite, you will need to prevent the package from being optimized using the `optimizeDeps.exclude` API:
|
|
37
|
+
|
|
38
|
+
```ts
|
|
39
|
+
import { defineConfig } from 'vite';
|
|
40
|
+
export default defineConfig({
|
|
41
|
+
optimizeDeps: {
|
|
42
|
+
exclude: ['@metools/web-image-converter'],
|
|
43
|
+
},
|
|
44
|
+
});
|
|
45
|
+
```
|
|
46
|
+
|
|
24
47
|
## Usage
|
|
25
48
|
|
|
26
49
|
The project uses a set of classes for a declarative approach to converting images. The project is based around the ImageConverter class and several option classes that can be used.
|
|
@@ -55,7 +78,7 @@ Both APIs return a `Uint8Array` object that can be used in any place where you m
|
|
|
55
78
|
- [MDN createObjectURL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static)
|
|
56
79
|
- [MDN Using object URLs to display images](https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications#example_using_object_urls_to_display_images)
|
|
57
80
|
|
|
58
|
-
|
|
81
|
+
## Options
|
|
59
82
|
|
|
60
83
|
You can specify one of several `CompressionOptions` objects to represent output format and compression:
|
|
61
84
|
|
|
@@ -86,11 +109,11 @@ You can specify one of serveral `CropOptions` objects to represent cropping an i
|
|
|
86
109
|
- `ImageCropEachSideOptions(payload: { crop_left: number; crop_right: number; crop_top: number; crop_bottom: number; })`
|
|
87
110
|
- This operation allows you to describe cropping pixels on each of the four sides of the image.
|
|
88
111
|
|
|
89
|
-
|
|
112
|
+
## Errors
|
|
90
113
|
|
|
91
114
|
When the files and binary data provided conform to the file specs of the above supported image formats, the project should work fine. However, if the data provided is NOT an image, `convertImageFile` and `convertImageBytes` will each throw an error. The function should be wrapped in a try / catch block to catch errors.
|
|
92
115
|
|
|
93
|
-
|
|
116
|
+
## Blocking Operation
|
|
94
117
|
|
|
95
118
|
Running an operation via WebAssmebly is a blocking operation. This means that when the operation is called, it will block a wide variety of tasks in the application from continuing to run, such as UI operations, timers, etc. For instance, when compressing a large image from a DSLR camera, it may take several seconds for the operation to complete and during that time everything else freezes.
|
|
96
119
|
|