Skip to content

Commit 7896cb3

Browse files
EhespEhesp
authored
Merge pull request #35 from invertase/@ehesp/qol-updates
2 parents 6566271 + 2d42311 commit 7896cb3

File tree

11 files changed

+167
-49
lines changed

11 files changed

+167
-49
lines changed

‎dictionary.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,4 +58,5 @@ module.exports = [
5858
/^invertase/,
5959
/^firebase/,
6060
/^href/,
61+
/^stringified/,
6162
];

‎docs.json

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,6 @@
1111
["Input", "/storage-image-processing-api/input"],
1212
["Operations", "/storage-image-processing-api/operations"],
1313
["Output", "/storage-image-processing-api/output"],
14-
["Caching", "/storage-image-processing-api/caching"],
15-
["Error Handling", "/storage-image-processing-api/error-handling"],
1614
["Types", "/storage-image-processing-api/types"]
1715
]
1816
]

‎docs/storage-image-processing-api/caching.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
### TODO Caching
1+
### Caching

‎docs/storage-image-processing-api/error-handling.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
### TODO Error Handling
1+
### Error Handling

‎docs/storage-image-processing-api/index.mdx

Lines changed: 67 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,6 @@ During the installation of the extension, you will be prompted to specify a numb
4242

4343
Cloud storage bucket, where the images to be processed are located.
4444

45-
- **Cloud Storage path for caching images:**
46-
47-
A relative path in which the processed images are cached in the specified Cloud Storage bucket. If you prefer to store resized images at the default location, leave this field empty.
48-
4945
- **Allowed CORS origins:**
5046

5147
A comma-delimited value of allowed `CORS` origins. Use the default of `*` to allow all origins. This is useful to lock down your API and only allow your own website to embed the images directly. Note this will not prevent non-browser requests from accessing your API.
@@ -62,10 +58,74 @@ curl -X GET \
6258
- **`{LOCATION}`**: The Cloud Functions location that was specified during the installation of the extension.
6359
- **`{PROJECT_ID}`**: The Firebase project ID.
6460

65-
### Operations
61+
### Operation usage
6662

6763
The `operations` query parameter is a JSON array of operations to perform. Each operation is a JSON object with an `operation` property specifying the operation to perform and other properties depending on the operation.
64+
The parameter follows a couple of rules:
65+
66+
1. The first operation in the array must be an `input` operation. This operation specifies the image to be processed. Read the [input](/input) operation documentation for more information.
67+
1. The last operation in the array must be an `output` operation. This operation specifies the `format` of the image to be created. Read the [output](/output) operation documentation for more information.
68+
69+
The following example details a remote `input` operation and the `output` type:
70+
71+
```js
72+
[
73+
{
74+
operation: 'input',
75+
type: 'url',
76+
url: 'https://example.com/image.jpg',
77+
},
78+
// Other operations...
79+
{
80+
operation: 'output',
81+
format: 'webp',
82+
},
83+
];
84+
```
6885

69-
The first operation in the array must be an `input` operation. This operation specifies the image to be processed. Read the [input](/input) operation documentation for more information.
86+
Additional operations can be placed between to process the image operation types outline in the [documentation](/operations), for example to flip then rotate the image 90 degrees:
87+
88+
```js
89+
[
90+
{
91+
operation: 'input',
92+
type: 'url',
93+
url: 'https://example.com/image.jpg',
94+
},
95+
{
96+
operation: 'flip',
97+
},
98+
{
99+
operation: 'rotate',
100+
angle: 90,
101+
},
102+
{
103+
operation: 'output',
104+
format: 'webp',
105+
},
106+
];
107+
```
70108

71-
Also, the last operation in the array must be an `output` operation. This operation specifies the `format` of the image to be created. Read the [output](/output) operation documentation for more information.
109+
### Providing the operations
110+
111+
The `operations` query parameter accepts a stringified JSON object as a value. This should be encoded as a URI component, for example:
112+
113+
```js
114+
const operations = [
115+
{
116+
operation: 'input',
117+
type: 'url',
118+
url: 'https://example.com/image.jpg',
119+
},
120+
{
121+
operation: 'flip',
122+
},
123+
{
124+
operation: 'output',
125+
format: 'webp',
126+
},
127+
];
128+
129+
const encodedOperations = encodeURIComponent(JSON.stringify(operations));
130+
const url = `https://{LOCATION}-{PROJECT_ID}.cloudfunctions.net/ext-storage-image-processing-api-handler/process?operations=${encodedOperations}`;
131+
```

‎docs/storage-image-processing-api/input.mdx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
# Input
22

3+
The input operation specifies what image will be used as the source of the image processing. This can either be a path to a file on your storage bucket,
4+
a remote URL, or allow the extension to create an image on the fly.
5+
36
## Google Cloud Storage
47

58
This is a valid google cloud storage url of an existing image. For example:

‎extensions/storage-image-processing-api/POSTINSTALL.md

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,36 @@
22

33
You can test out this extension right away!
44

5-
Use the following URL to access the image processing API:
5+
1. Create an operations list, for example:
66

7-
[https://{param:LOCATION}-{param:PROJECT_ID}.cloudfunctions.net/ext-storage-image-processing-api-handler/process](https://{param:LOCATION}-{param:PROJECT_ID}.cloudfunctions.net/ext-storage-image-processing-api-handler/process)
7+
```js
8+
const operations = [
9+
{
10+
operation: 'input',
11+
type: 'url',
12+
url: 'https://images.unsplash.com/photo-1663659552548-25d7771802c9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80',
13+
},
14+
{
15+
operation: 'grayscale',
16+
},
17+
{
18+
operation: 'output',
19+
format: 'webp',
20+
},
21+
];
22+
```
23+
24+
2. Stringify and encode the list:
25+
26+
```js
27+
encodeURIComponent(JSON.stringify(operations));
28+
```
29+
30+
3. Call the deployed `process` Cloud Function:
31+
32+
[https://${PARAM:LOCATION}-${PARAM:PROJECT_ID}.cloudfunctions.net/ext-storage-image-processing-api-handler/process?operations=%5B%7B%22operation%22%3A%22input%22%2C%22type%22%3A%22url%22%2C%22url%22%3A%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1663659552548-25d7771802c9%3Fixlib%3Drb-1.2.1%26ixid%3DMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8%26auto%3Dformat%26fit%3Dcrop%26w%3D774%26q%3D80%22%7D%2C%7B%22operation%22%3A%22grayscale%22%7D%2C%7B%22operation%22%3A%22output%22%2C%22format%22%3A%22webp%22%7D%5D](https://${PARAM:LOCATION}-${PARAM:PROJECT_ID}.cloudfunctions.net/ext-storage-image-processing-api-handler/process?operations=%5B%7B%22operation%22%3A%22input%22%2C%22type%22%3A%22url%22%2C%22url%22%3A%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1663659552548-25d7771802c9%3Fixlib%3Drb-1.2.1%26ixid%3DMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8%26auto%3Dformat%26fit%3Dcrop%26w%3D774%26q%3D80%22%7D%2C%7B%22operation%22%3A%22grayscale%22%7D%2C%7B%22operation%22%3A%22output%22%2C%22format%22%3A%22webp%22%7D%5D)
33+
34+
The result will be a grayscaled version of the image, in WebP format.
835

936
### Using the extension
1037

‎extensions/storage-image-processing-api/PREINSTALL.md

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,28 @@
11
Use this extension to optimize and transform images via a powerful HTTP API with over 30 different image operations to enhance and manipulate your images.
22

3-
A cloud function called `process` will be added to your project which you can call from your code specifying:
4-
5-
- The image to process
6-
- The operations to perform
7-
- The output image format
8-
9-
The output image will be generated and cashed.
3+
This extension creates a Cloud Function named `process`, which can be called via a GET request, specifiying
4+
the operations to perform via the `operations` query parameter, for example:
5+
6+
```js
7+
const operations = [
8+
{
9+
operation: 'input',
10+
type: 'url',
11+
url: 'https://example.com/image.jpg',
12+
},
13+
{
14+
operation: 'grayscale',
15+
},
16+
{
17+
operation: 'output',
18+
format: 'webp',
19+
},
20+
];
21+
22+
const params = `?operations=${encodeURIComponent(JSON.stringify(operations))}`;
23+
```
24+
25+
View the [official documentation](https://extensions.invertase.dev/storage-image-processing-api) for full usage examples.
1026

1127
#### Additional setup
1228

‎extensions/storage-image-processing-api/README.md

Lines changed: 36 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,46 @@
22

33
**Author**: Invertase (**[https://invertase.io](https://invertase.io)**)
44

5-
**Description**: The Image Processing API allows you to process images in real-time.
6-
7-
---
5+
**Description**: Use this extension to optimize and transform images via a powerful HTTP API with over 30 different image operations to enhance and manipulate your images.
6+
7+
**Details**: Use this extension to optimize and transform images via a powerful HTTP API with over 30 different image operations to enhance and manipulate your images.
8+
9+
This extension creates a Cloud Function named `process`, which can be called via a GET request, specifiying
10+
the operations to perform via the `operations` query parameter, for example:
11+
12+
```js
13+
const operations = [
14+
{
15+
operation: 'input',
16+
type: 'url',
17+
url: 'https://images.unsplash.com/photo-1663659552548-25d7771802c9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80',
18+
},
19+
{
20+
operation: 'grayscale',
21+
},
22+
{
23+
operation: 'output',
24+
format: 'webp',
25+
},
26+
];
27+
28+
const params = `?operations=${encodeURIComponent(JSON.stringify(operations))}`;
29+
```
830

9-
### Console
31+
View the [official documentation](https://extensions.invertase.dev/storage-image-processing-api) for full usage examples.
1032

11-
[![Install the Storage Image Processing API extension](https://github.com/FirebaseExtended/experimental-extensions/raw/next/install-extension.png?raw=true)](https://console.firebase.google.com/project/_/extensions/install?ref=invertase/storage-image-processing-api)
33+
#### Additional setup
1234

13-
### Firebase CLI
35+
Before installing this extension, make sure that you've [set up a Cloud Storage bucket](https://firebase.google.com/docs/storage) in your Firebase project.
1436

15-
```bash
16-
firebase ext:install invertase/storage-image-processing-api --project=projectId-or-alias
17-
```
37+
#### Billing
1838

19-
> Learn more about installing extensions in the Firebase Extensions documentation: [console](https://firebase.google.com/docs/extensions/install-extensions?platform=console), [CLI](https://firebase.google.com/docs/extensions/install-extensions?platform=cli)
39+
To install an extension, your project must be on the [Blaze (pay as you go) plan](https://firebase.google.com/pricing)
2040

21-
---
41+
- You will be charged a small amount (typically around $0.01/month) for the Firebase resources required by this extension (even if it is not used).
42+
- This extension uses other Firebase and Google Cloud Platform services, which have associated charges if you exceed the service’s no-cost tier:
43+
- Cloud Storage
44+
- Cloud Functions (Node.js 10+ runtime. [See FAQs](https://firebase.google.com/support/faq#extensions-pricing))
2245

2346
**Configuration Parameters:**
2447

@@ -28,11 +51,9 @@ firebase ext:install invertase/storage-image-processing-api --project=projectId-
2851

2952
- Allowed CORS origins.: A comma delimited value of allowed CORS origins. Use the default of '\*' to allow all origins. This is useful to lockdown your API and only allow your own website to embed the images directly. Note this will not prevent non-browser requests from accessing your API.
3053

31-
- Cloud Storage path where processed images will be cached.: A relative path in which to store cached images. For example, `cache`. If you prefer to store resized images at the default location, leave this field empty.
32-
3354
**Cloud Functions:**
3455

35-
- **api:** TODO
56+
- **handler:** Serves a API accepting incoming HTTP requests.
3657

3758
**APIs Used**:
3859

@@ -42,4 +63,4 @@ firebase ext:install invertase/storage-image-processing-api --project=projectId-
4263

4364
This extension will operate with the following project IAM roles:
4465

45-
- storage.admin (Reason: Allows the extension to store resized images in Cloud Storage)
66+
- storage.admin (Reason: Allows the extension to read images in Cloud Storage)

‎extensions/storage-image-processing-api/extension.yaml

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ version: 0.0.2
33
specVersion: v1beta
44

55
displayName: Image Processing API
6-
description: TODO
6+
description: >-
7+
Use this extension to optimize and transform images via a powerful HTTP API with over 30 different image operations to enhance and manipulate your images.
78
89
license: Apache-2.0
910

@@ -27,13 +28,13 @@ apis:
2728

2829
roles:
2930
- role: storage.admin
30-
reason: Allows the extension to store resized images in Cloud Storage
31+
reason: Allows the extension to read images in Cloud Storage
3132

3233
resources:
3334
- name: handler
3435
type: firebaseextensions.v1beta.function
3536
description: >-
36-
TODO
37+
Serves a API accepting incoming HTTP requests.
3738
properties:
3839
location: ${param:LOCATION}
3940
runtime: nodejs14
@@ -118,12 +119,3 @@ params:
118119
example: '*.example.com,invertase.io'
119120
default: '*'
120121
required: true
121-
122-
- param: CACHED_IMAGES_PATH
123-
label: Cloud Storage path where processed images will be cached.
124-
description: >
125-
A relative path in which to store cached images. For example,
126-
`cache`. If you prefer to store resized images at the default
127-
location, leave this field empty.
128-
example: processed_images_cache
129-
required: false

0 commit comments

Comments
 (0)