Skip to content

Image processing updates #67

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Mar 27, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions extensions/image-processing-api/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
## Version 0.2.0

chore - bump node runtime to nodejs20

docs - fix documentation according to functionality of the extension

fix - npm audit and fix other vulnerabilities

## Version 0.1.1

Updated POSTINSTALL parameters.
Expand Down
2 changes: 1 addition & 1 deletion extensions/image-processing-api/POSTINSTALL.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ encodeURIComponent(JSON.stringify(operations));

3. Call the deployed `process` Cloud Function:

[https://${param:LOCATION}-${param:PROJECT_ID}.cloudfunctions.net/ext-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-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-${param:EXT_INSTANCE_ID}-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-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)

The result will be a grayscaled version of the image, in WebP format.

Expand Down
16 changes: 13 additions & 3 deletions extensions/image-processing-api/PREINSTALL.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,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.
Image Processing Extension
Use this extension to optimize and transform images via a powerful HTTP API with over 30 image operations for enhancing and manipulating your images.

This extension creates a Cloud Function named `process`, which can be called via a GET request, specifiying
the operations to perform via the `operations` query parameter, for example:
How It Works
When you install this extension, it deploys a Cloud Function that exposes an HTTP API. All requests must be sent to the /process endpoint of the function. You perform image operations by passing an operations query parameter—a URL-encoded JSON string defining the operations to execute.

Example
Define your operations like so:

```js
const operations = [
Expand All @@ -22,6 +26,12 @@ const operations = [
const params = `?operations=${encodeURIComponent(JSON.stringify(operations))}`;
```

Then, make your GET request to your Cloud Function using the correct endpoint. For example:

```
https://<your-configured-region>-<your-project-id>.cloudfunctions.net/<extension-instance-id>/process${params}
```

The extension also comes with a JavaScript utility library for simplifying the creation of operations:

```ts
Expand Down
37 changes: 32 additions & 5 deletions extensions/image-processing-api/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,21 @@

**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.

**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.
**Details**: Image Processing Extension
Use this extension to optimize and transform images via a powerful HTTP API with over 30 image operations for enhancing and manipulating your images.

This extension creates a Cloud Function named `process`, which can be called via a GET request, specifiying
the operations to perform via the `operations` query parameter, for example:
How It Works
When you install this extension, it deploys a Cloud Function that exposes an HTTP API. All requests must be sent to the /process endpoint of the function. You perform image operations by passing an operations query parameter—a URL-encoded JSON string defining the operations to execute.

Example
Define your operations like so:

```js
const operations = [
{
operation: 'input',
type: 'url',
url: 'https://images.unsplash.com/photo-1663659552548-25d7771802c9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80',
url: 'https://example.com/image.jpg',
},
{
operation: 'grayscale',
Expand All @@ -28,6 +32,29 @@ const operations = [
const params = `?operations=${encodeURIComponent(JSON.stringify(operations))}`;
```

Then, make your GET request to your Cloud Function using the correct endpoint. For example:

```
https://<your-configured-region>-<your-project-id>.cloudfunctions.net/<extension-instance-id>/process${params}
```

The extension also comes with a JavaScript utility library for simplifying the creation of operations:

```ts
import { builder } from '@invertase/image-processing-api';

const output = builder()
.input({
url: 'https://example.com/image.jpg',
})
.grayscale()
.output({
format: 'webp',
});

const params = `?operations=${output.toEncodedJSONString()}`;
```

View the [official documentation](https://extensions.invertase.dev/image-processing-api) for full usage examples.

#### Additional setup
Expand All @@ -49,7 +76,7 @@ To install an extension, your project must be on the [Blaze (pay as you go) plan

- Cloud Storage bucket for images: The Cloud Storage bucket where images that are to be processed are located. API requests with input urls or paths that are not inside this bucket will be dropped.

- 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.
- 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.

**Cloud Functions:**

Expand Down
6 changes: 3 additions & 3 deletions extensions/image-processing-api/extension.yaml
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
name: image-processing-api
version: 0.1.1
version: 0.2.0
specVersion: v1beta

displayName: Image Processing API
Expand Down Expand Up @@ -37,7 +37,7 @@ resources:
Serves a API accepting incoming HTTP requests.
properties:
location: ${param:LOCATION}
runtime: nodejs14
runtime: nodejs20
availableMemoryMb: 1024
httpsTrigger: {}

Expand Down Expand Up @@ -109,7 +109,7 @@ params:
required: true

- param: CORS_ORIGIN_ALLOW_LIST
label: Allowed CORS origins.
label: Allowed CORS origins
description: >
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
Expand Down
Loading