This library allows for cross-browser image downscaling and resizing utilizing <canvas>. The code was part of Ross Turner's HTML5-ImageUploader. Note that this is meant to be a browser-only utility and will not work in Node.js.
npm install browser-image-resizeryarn add browser-image-resizer
<script src="https://cdn.jsdelivr.net/gh/ericnograles/[email protected]/dist/index.js"></script>
import { readAndCompressImage } from 'browser-image-resizer';
const config = {
quality: 0.5,
maxWidth: 800,
maxHeight: 600,
autoRotate: true,
debug: true
};
// Note: A single file comes from event.target.files on <input>
readAndCompressImage(file, config)
.then(resizedImage => {
// Upload file to some Web API
const url = `http://localhost:3001/upload`;
const formData = new FormData();
formData.append('images', resizedImage);
const options = {
method: 'POST',
body: formData
};
return fetch(url, options);
})
.then(result => {
// TODO: Handle the result
console.log(result);
});import { readAndCompressImage } from 'browser-image-resizer';
const config = {
quality: 0.7,
width: 800,
height: 600
};
// Note: A single file comes from event.target.files on <input>
async function uploadImage(file) {
try {
let resizedImage = await readAndCompressImage(file, config);
const url = `http://localhost:3001/upload`;
const formData = new FormData();
formData.append('images', resizedImage);
const options = {
method: 'POST',
body: formData
};
let result = await fetch(url, options);
// TODO: Handle the result
console.log(result);
return result;
} catch (error) {
console.error(error);
throw(error);
}
}const config = {
quality: 0.5,
maxWidth: 800,
maxHeight: 600,
autoRotate: true,
debug: true
};
// Note: A single file comes from event.target.files on <input>
BrowserImageResizer.readAndCompressImage(file, config)
.then(resizedImage => {
// Upload file to some Web API
const url = `http://localhost:3001/upload`;
const formData = new FormData();
formData.append('images', resizedImage);
const options = {
method: 'POST',
body: formData
};
return fetch(url, options);
})
.then(result => {
// TODO: Handle the result
console.log(result);
});const config = {
quality: 0.7,
width: 800,
height: 600
};
// Note: A single file comes from event.target.files on <input>
async function uploadImage(file) {
try {
let resizedImage = await BrowserImageResizer.readAndCompressImage(file, config);
const url = `http://localhost:3001/upload`;
const formData = new FormData();
formData.append('images', resizedImage);
const options = {
method: 'POST',
body: formData
};
let result = await fetch(url, options);
// TODO: Handle the result
console.log(result);
return result;
} catch (error) {
console.error(error);
throw(error);
}
}file: A File object, usually from an<input>config: See below
| Property Name | Purpose | Default Value |
|---|---|---|
quality |
The quality of the image | 0.5 |
maxWidth |
The maximum width for the downscaled image | 800 |
maxHeight |
The maximum height for the downscaled image | 600 |
autoRotate |
Reads EXIF data on the image to determine orientation | true |
debug |
console.log image update operations | false |
mimeType |
specify image output type other than jpeg | 'image/jpeg' |
A Promise that yields an Image Blob
When using a specific camera setting in iOS, EXIF data gets stripped by default: https://stackoverflow.com/questions/57942150/file-upload-and-exif-in-mobile-safari
In order for this to work, a user will need to change their iOS camera settings to "Most Compatible" as below:
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent