@metools/web-image-converter 1.0.3 → 1.0.5
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 +6 -1
- package/dist/index.js +12 -5
- package/package.json +1 -1
- package/readme.md +23 -9
- package/publish.sh +0 -1
|
Binary file
|
package/dist/index.d.ts
CHANGED
|
@@ -130,12 +130,17 @@ interface ImageConverterInput {
|
|
|
130
130
|
resize?: ImpageResizeOptions;
|
|
131
131
|
crop?: ImageCropOptions;
|
|
132
132
|
}
|
|
133
|
-
declare class
|
|
133
|
+
declare abstract class AbstractImageConverter {
|
|
134
134
|
compression?: ImageCompressionOptions;
|
|
135
135
|
resize?: ImpageResizeOptions;
|
|
136
136
|
crop?: ImageCropOptions;
|
|
137
137
|
constructor(payload: ImageConverterInput);
|
|
138
138
|
get options(): Record<string, unknown>;
|
|
139
|
+
abstract convertImageBytes(bytes: Uint8Array): Promise<Uint8Array>;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
declare class ImageConverter extends AbstractImageConverter {
|
|
143
|
+
constructor(payload: ImageConverterInput);
|
|
139
144
|
convertImageFile(file: File): Promise<Uint8Array<ArrayBufferLike>>;
|
|
140
145
|
convertImageBytes(bytes: Uint8Array): Promise<Uint8Array<ArrayBufferLike>>;
|
|
141
146
|
}
|
package/dist/index.js
CHANGED
|
@@ -400,8 +400,8 @@ async function __wbg_init(module_or_path) {
|
|
|
400
400
|
}
|
|
401
401
|
var image_converter_back_end_default = __wbg_init;
|
|
402
402
|
|
|
403
|
-
//
|
|
404
|
-
var
|
|
403
|
+
// ../image_converter_js_common/models/image_converter.ts
|
|
404
|
+
var AbstractImageConverter = class {
|
|
405
405
|
constructor(payload) {
|
|
406
406
|
this.compression = payload.compression;
|
|
407
407
|
this.resize = payload.resize;
|
|
@@ -420,6 +420,13 @@ var ImageConverter = class {
|
|
|
420
420
|
}
|
|
421
421
|
return options;
|
|
422
422
|
}
|
|
423
|
+
};
|
|
424
|
+
|
|
425
|
+
// src/models/image_converter.ts
|
|
426
|
+
var ImageConverter = class extends AbstractImageConverter {
|
|
427
|
+
constructor(payload) {
|
|
428
|
+
super(payload);
|
|
429
|
+
}
|
|
423
430
|
async convertImageFile(file) {
|
|
424
431
|
const buf = await file.arrayBuffer();
|
|
425
432
|
const uint8Arr = new Uint8Array(buf);
|
|
@@ -432,7 +439,7 @@ var ImageConverter = class {
|
|
|
432
439
|
}
|
|
433
440
|
};
|
|
434
441
|
|
|
435
|
-
//
|
|
442
|
+
// ../image_converter_js_common/models/compression_options.ts
|
|
436
443
|
var ImageCompressionOptions = class {
|
|
437
444
|
};
|
|
438
445
|
var JpegCompressionOptions = class extends ImageCompressionOptions {
|
|
@@ -486,7 +493,7 @@ var TiffCompressionOptions = class extends ImageCompressionOptions {
|
|
|
486
493
|
}
|
|
487
494
|
};
|
|
488
495
|
|
|
489
|
-
//
|
|
496
|
+
// ../image_converter_js_common/models/crop_options.ts
|
|
490
497
|
var ImageCropOptions = class {
|
|
491
498
|
};
|
|
492
499
|
var ImageCropDimensionOptions = class extends ImageCropOptions {
|
|
@@ -549,7 +556,7 @@ var ImageCropEachSideOptions = class extends ImageCropOptions {
|
|
|
549
556
|
}
|
|
550
557
|
};
|
|
551
558
|
|
|
552
|
-
//
|
|
559
|
+
// ../image_converter_js_common/models/resize_options.ts
|
|
553
560
|
var ImpageResizeOptions = class {
|
|
554
561
|
};
|
|
555
562
|
var ImageResizeDimensionOptions = class extends ImpageResizeOptions {
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Image Converter Module for JavaScript Web & Node
|
|
2
2
|
|
|
3
|
-
### An image-converter for
|
|
3
|
+
### An image-converter for JavaScript, written in Rust.
|
|
4
|
+
|
|
5
|
+
### @metools/node-image-converter
|
|
6
|
+
|
|
7
|
+
### @metools/web-image-converter
|
|
4
8
|
|
|
5
9
|
Ever had a really large image that you wanted to compress quickly?
|
|
6
10
|
|
|
@@ -10,7 +14,7 @@ Do you want to cut down on file uploads and compute on your servers?
|
|
|
10
14
|
|
|
11
15
|
This package is for you!
|
|
12
16
|
|
|
13
|
-
|
|
17
|
+
This project is a Node & Web compatible package for converting images. It has basic operations for resizing, cropping and compressing images. It can read from and convert to the following formats:
|
|
14
18
|
|
|
15
19
|
- Jpeg
|
|
16
20
|
- Png
|
|
@@ -23,10 +27,18 @@ The meat of the project is written in Rust and exported into a WebAssembly binar
|
|
|
23
27
|
|
|
24
28
|
## Installation
|
|
25
29
|
|
|
26
|
-
Just install the package with your package manager of choice
|
|
30
|
+
Just install the package with your package manager of choice.
|
|
31
|
+
|
|
32
|
+
For Web:
|
|
27
33
|
|
|
28
34
|
`npm install @metools/web-image-converter`
|
|
29
35
|
|
|
36
|
+
For Node:
|
|
37
|
+
|
|
38
|
+
`npm install @metools/node-image-converter`
|
|
39
|
+
|
|
40
|
+
Each package is specific to the environment at hand and cannot be used interchangeably. As such, pick the package for your use case.
|
|
41
|
+
|
|
30
42
|
## Bundler Caveats
|
|
31
43
|
|
|
32
44
|
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:
|
|
@@ -36,10 +48,10 @@ WebAssembly is still not a first class citizen among all bundlers and dev server
|
|
|
36
48
|
When bundling this app with Vite, you will need to prevent the package from being optimized using the `optimizeDeps.exclude` API:
|
|
37
49
|
|
|
38
50
|
```ts
|
|
39
|
-
import { defineConfig } from
|
|
51
|
+
import { defineConfig } from "vite";
|
|
40
52
|
export default defineConfig({
|
|
41
53
|
optimizeDeps: {
|
|
42
|
-
exclude: [
|
|
54
|
+
exclude: ["@metools/web-image-converter"],
|
|
43
55
|
},
|
|
44
56
|
});
|
|
45
57
|
```
|
|
@@ -48,7 +60,7 @@ export default defineConfig({
|
|
|
48
60
|
|
|
49
61
|
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.
|
|
50
62
|
|
|
51
|
-
The ImageConverter class can be used with either a [File](https://developer.mozilla.org/en-US/docs/Web/API/File) object or a [Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) representing the binary data of an image file.
|
|
63
|
+
The ImageConverter class can be used with either a [File](https://developer.mozilla.org/en-US/docs/Web/API/File) object (web only) or a [Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) representing the binary data of an image file.
|
|
52
64
|
|
|
53
65
|
Example usage:
|
|
54
66
|
|
|
@@ -68,7 +80,7 @@ function convertMyImage(file: File) {
|
|
|
68
80
|
`ImageConverter` provides two different ways to convert images:
|
|
69
81
|
|
|
70
82
|
- `convertImageFile(file: File): Promise<Uint8Array<ArrayBufferLike>>`
|
|
71
|
-
- This API accepts a JavaScript File object and runs it through the process
|
|
83
|
+
- This API accepts a JavaScript File object and runs it through the process (web-only)
|
|
72
84
|
- `convertImageBytes(bytes: Uint8Array): Promise<Uint8Array<ArrayBufferLike>>`
|
|
73
85
|
- This API accepts a Uint8Array and does the same thing as `convertImageFile`.
|
|
74
86
|
|
|
@@ -117,10 +129,12 @@ When the files and binary data provided conform to the file specs of the above s
|
|
|
117
129
|
|
|
118
130
|
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.
|
|
119
131
|
|
|
120
|
-
As such, web workers may be a
|
|
132
|
+
As such, for the web, web workers may be a good way to use this package without causing the project to hang:
|
|
121
133
|
|
|
122
134
|
[MDN Using Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
|
|
123
135
|
|
|
136
|
+
In Node, you may want to have the image conversion operation be a separate executable that can run on its own thread. You can probably use `exec` to execute a script.
|
|
137
|
+
|
|
124
138
|
## Examples
|
|
125
139
|
|
|
126
140
|
Converting a file to Jpeg:
|
package/publish.sh
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
npm publish --access public
|