Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
upload-js
Advanced tools
upload-js - npm Package Compare versions
Comparing version 2.9.0 to 2.10.0
| { | ||
| "name": "upload-js", | ||
| "version": "2.9.0", | ||
| "version": "2.10.0", | ||
| "author": "Upload <hello@upload.io> (https://upload.io)", | ||
@@ -5,0 +5,0 @@ "description": "File Upload Library — Upload.js gives developers AJAX multipart file uploading via XHR 🚀 Comes with Cloud Storage 🌐", |
107
README.md
@@ -272,28 +272,59 @@ <h1 align="center"> | ||
| ### Resize Images | ||
| # Image Processing (Resize, Crop, etc.) | ||
| Given an uploaded image URL: | ||
| The [Upload.io](https://upload.io/) platform includes a built-in [Image Processing API](https://upload.io/docs/image-processing-api), which supports the following: | ||
| ``` | ||
| https://upcdn.io/W142hJk/raw/HhVSQ5ZQ5bfqvanQ | ||
| ``` | ||
| - [Automatic Image Cropping](https://upload.io/docs/image-processing-api#crop) | ||
| - [Manual Image Cropping](https://upload.io/docs/image-processing-api#crop-x) | ||
| - [Image Resizing](https://upload.io/docs/image-processing-api#fit) | ||
| - [Text Layering (e.g for text watermarks)](https://upload.io/docs/image-processing-api#text) | ||
| - [Image Layering (e.g. for image watermarks)](https://upload.io/docs/image-processing-api#image) | ||
| - [Adjustments (blur, sharpen, brightness, etc.)](https://upload.io/docs/image-processing-api#blur) | ||
| - and more... | ||
| Resize with: | ||
| ### Original Image | ||
| Here's an example using [a photo of Chicago](https://upcdn.io/W142hJk/raw/example/city-landscape.jpg): | ||
| <img src="https://upcdn.io/W142hJk/raw/example/city-landscape.jpg" /> | ||
| ``` | ||
| https://upcdn.io/W142hJk/thumbnail/HhVSQ5ZQ5bfqvanQ | ||
| https://upcdn.io/W142hJk/raw/example/city-landscape.jpg | ||
| ``` | ||
| Auto-crop (to square dimensions) with: | ||
| ### Processed Image | ||
| We can use the [Image Processing API](https://upload.io/docs/image-processing-api) to convert the above photo into [this processed image](https://upcdn.io/W142hJk/image/example/city-landscape.jpg?w=900&h=600&fit=crop&f=webp&q=80&blur=4&text=WATERMARK&layer-opacity=80&blend=overlay&layer-rotate=315&font-size=100&padding=10&font-weight=900&color=ffffff&repeat=true&text=Chicago&gravity=bottom&padding-x=50&padding-bottom=20&font=/example/fonts/Lobster.ttf&color=ffe400): | ||
| <img src="https://upcdn.io/W142hJk/image/example/city-landscape.jpg?w=900&h=600&fit=crop&f=webp&q=80&blur=4&text=WATERMARK&layer-opacity=80&blend=overlay&layer-rotate=315&font-size=100&padding=10&font-weight=900&color=ffffff&repeat=true&text=Chicago&gravity=bottom&padding-x=50&padding-bottom=20&font=/example/fonts/Lobster.ttf&color=ffe400" /> | ||
| ``` | ||
| https://upcdn.io/W142hJk/thumbnail-square/HhVSQ5ZQ5bfqvanQ | ||
| https://upcdn.io/W142hJk/image/example/city-landscape.jpg | ||
| ?w=900 | ||
| &h=600 | ||
| &fit=crop | ||
| &f=webp | ||
| &q=80 | ||
| &blur=4 | ||
| &text=WATERMARK | ||
| &layer-opacity=80 | ||
| &blend=overlay | ||
| &layer-rotate=315 | ||
| &font-size=100 | ||
| &padding=10 | ||
| &font-weight=900 | ||
| &color=ffffff | ||
| &repeat=true | ||
| &text=Chicago | ||
| &gravity=bottom | ||
| &padding-x=50 | ||
| &padding-bottom=20 | ||
| &font=/example/fonts/Lobster.ttf | ||
| &color=ffe400 | ||
| ``` | ||
| **Tip:** for more transformations, please [create an account](https://upload.io/pricing). | ||
| ## Manually Cropping Images — [Try on CodePen](https://codepen.io/upload-js/pen/JjOaWpB?editors=1010) | ||
| ### Crop Images — [Try on CodePen](https://codepen.io/upload-js/pen/JjOaWpB?editors=1010) | ||
| To embed crop dimensions into an image: | ||
| To crop images using manually-provided geometry: | ||
| ```html | ||
@@ -351,3 +382,3 @@ <html> | ||
| alert(`Cropped image:\n${croppedImage.fileUrl.replace("/raw/", "/thumbnail/")}`) | ||
| alert(`Cropped image:\n${croppedImage.fileUrl.replace("/raw/", "/image/")}`) | ||
| } | ||
@@ -362,39 +393,9 @@ </script> | ||
| ## 📖 Documentation | ||
| ## Full Documentation | ||
| **[See Upload.js Documentation »](https://upload.io/docs/upload-js)** | ||
| [Upload.js Full Documentation »](https://upload.io/docs/upload-js) | ||
| ## 🎯 Features | ||
| Upload.js is the JavaScript client library for [Upload.io](https://upload.io/upload-js): the file upload service for developers. | ||
| **Core features:** | ||
| - File Storage. (Files stored for 4 hours with the `"free"` API key.) | ||
| - File Hosting via CDN. (Files served from 100 locations worldwide.) | ||
| - Fast Image Transformations. (Resize images, crop images & convert images.) | ||
| **Available with an account:** | ||
| - Permanent Storage. (The `"free"` API key provides temporary storage only.) | ||
| - Unlimited Daily Uploads. (The `"free"` API key allows 100 uploads per day per IP.) | ||
| - Extended CDN Coverage. (Files served from 300+ locations worldwide.) | ||
| - More File Transformations. (Custom image resizing, cropping, converting, etc.) | ||
| - Upload & Download Authentication. (Supports federated auth via your own JWT authorizer.) | ||
| - File & Folder Management. | ||
| - Expiring Links. | ||
| - Custom CNAME. | ||
| - Advanced Upload Control: | ||
| - Rate Limiting. | ||
| - Traffic Limiting. | ||
| - File Size Limiting. | ||
| - IP Blacklisting. | ||
| - File Type Blacklisting. | ||
| - And More... | ||
| **[Create an Upload.io account »](https://upload.io/pricing)** | ||
| ## Need a File Upload Widget? | ||
| **[See Uploader »](https://upload.io/uploader)** | ||
| [File Upload Widget »](https://upload.io/uploader) | ||
@@ -405,13 +406,11 @@ Uploader is a lightweight file upload widget, powered by Upload.js: | ||
| ## Building From Source | ||
| ## 👋 Create your Upload.io Account | ||
| Please read: [`BUILD.md`](BUILD.md) | ||
| Upload.js is the JavaScript client library for [Upload.io](https://upload.io/): the file upload service for web apps. | ||
| ## Contribute | ||
| **[Create an Upload.io account »](https://upload.io/upload-js/get-started)** | ||
| If you would like to contribute to Upload.js: | ||
| ## Building From Source | ||
| 1. Add a [GitHub Star](https://github.com/upload-io/upload-js/stargazers) to the project (if you're feeling generous!). | ||
| 2. Determine whether you're raising a bug, feature request or question. | ||
| 3. Raise your issue or PR. 🚀 | ||
| [BUILD.md](BUILD.md) | ||
@@ -418,0 +417,0 @@ ## License |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-0.25%
73077
- Number of package files
- decreased by-16.67%
20
- Lines of code
- decreased by-2.76%
1373
- Number of lines in readme file
- decreased by-0.24%
416
No dependency changes