|
4 | 4 |
|
5 | 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 | 6 |
|
7 |
| -**Details**: Image Processing Extension |
| 7 | + |
| 8 | + |
| 9 | +**Details**: # Image Processing Extension |
8 | 10 | Use this extension to optimize and transform images via a powerful HTTP API with over 30 image operations for enhancing and manipulating your images.
|
9 | 11 |
|
10 |
| -How It Works |
| 12 | +## How It Works |
11 | 13 | 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.
|
12 | 14 |
|
13 | 15 | Example
|
@@ -38,6 +40,35 @@ Then, make your GET request to your Cloud Function using the correct endpoint. F
|
38 | 40 | https://<your-configured-region>-<your-project-id>.cloudfunctions.net/<extension-instance-id>/process${params}
|
39 | 41 | ```
|
40 | 42 |
|
| 43 | +### Using Relative URLs (type: 'path') |
| 44 | + |
| 45 | +In addition to fetching images via remote URLs, this extension also supports relative paths through the type: 'path' input type. This is useful when you're serving images from your own domain (e.g. through a CDN, proxy, or local server during development). |
| 46 | + |
| 47 | +When you use type: 'path', the extension will prepend the hostname of the incoming request to the path to construct the full image URL. |
| 48 | + |
| 49 | +```ts |
| 50 | +const operations = [ |
| 51 | + { |
| 52 | + operation: 'input', |
| 53 | + type: 'path', |
| 54 | + path: '/images/photo.jpg', |
| 55 | + }, |
| 56 | + { |
| 57 | + operation: 'resize', |
| 58 | + width: 800, |
| 59 | + height: 600, |
| 60 | + }, |
| 61 | + { |
| 62 | + operation: 'output', |
| 63 | + format: 'jpeg', |
| 64 | + }, |
| 65 | +]; |
| 66 | + |
| 67 | +const params = `?operations=${encodeURIComponent(JSON.stringify(operations))}`; |
| 68 | +``` |
| 69 | + |
| 70 | +### Javascript Utility Library |
| 71 | + |
41 | 72 | The extension also comes with a JavaScript utility library for simplifying the creation of operations:
|
42 | 73 |
|
43 | 74 | ```ts
|
@@ -70,24 +101,37 @@ To install an extension, your project must be on the [Blaze (pay as you go) plan
|
70 | 101 | - Cloud Storage
|
71 | 102 | - Cloud Functions (Node.js 10+ runtime. [See FAQs](https://firebase.google.com/support/faq#extensions-pricing))
|
72 | 103 |
|
| 104 | + |
| 105 | + |
| 106 | + |
73 | 107 | **Configuration Parameters:**
|
74 | 108 |
|
75 |
| -- Cloud Functions location: Where do you want to deploy the functions created for this extension? You usually want a location close to your Storage bucket. For help selecting a location, refer to the [location selection guide](https://firebase.google.com/docs/functions/locations). |
| 109 | +* Cloud Functions location: Where do you want to deploy the functions created for this extension? You usually want a location close to your Storage bucket. For help selecting a location, refer to the [location selection guide](https://firebase.google.com/docs/functions/locations). |
| 110 | + |
| 111 | +* 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. |
| 112 | + |
| 113 | + |
| 114 | +* 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. |
| 115 | + |
76 | 116 |
|
77 |
| -- 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. |
78 | 117 |
|
79 |
| -- 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. |
80 | 118 |
|
81 | 119 | **Cloud Functions:**
|
82 | 120 |
|
83 |
| -- **handler:** Serves a API accepting incoming HTTP requests. |
| 121 | +* **handler:** Serves a API accepting incoming HTTP requests. |
| 122 | + |
| 123 | + |
84 | 124 |
|
85 | 125 | **APIs Used**:
|
86 | 126 |
|
87 |
| -- storage-component.googleapis.com (Reason: Needed to use Cloud Storage) |
| 127 | +* storage-component.googleapis.com (Reason: Needed to use Cloud Storage) |
| 128 | + |
| 129 | + |
88 | 130 |
|
89 | 131 | **Access Required**:
|
90 | 132 |
|
| 133 | + |
| 134 | + |
91 | 135 | This extension will operate with the following project IAM roles:
|
92 | 136 |
|
93 |
| -- storage.admin (Reason: Allows the extension to read images in Cloud Storage) |
| 137 | +* storage.admin (Reason: Allows the extension to read images in Cloud Storage) |
0 commit comments