@apostrophecms/scale
Purpose
Resizing 16-megapixel images on the server side can easily DOS your server (Denial Of Service). This module scales images appropriately in the browser before uploading them to your server.
Installation
npm install @apostrophecms/scale
Usage
import scale from '@apostrophecms/scale';
// See test.html for sample markup
const input = document.querySelector('#file-input');
input.addEventListener('change', async e => {
let file = input.files[0];
// Limit the maximum size
file = await scale(file, {
maxWidth: 1600,
maxHeight: 1600
});
// Upload as multipart/form-data just like always
const body = new FormData();
body.append('file', file);
const response = await fetch('/upload', {
method: 'POST',
body
});
});
The aspect ratio always stays the same. There is no cropping, letterboxing or stretching. All we care about here is reducing file size by reducing overall dimensions.
By default, the content type stays the same (image/jpeg
stays JPEG, image/png
stays PNG, etc).
That's it! You're good to go.
Fancy options
Changing the file's content type
If you want, you can turn everything into a WebP file (depending on browser support, you may get PNG as a fallback):
file = await scale(file, {
maxWidth: 1600,
maxHeight: 1600,
type: 'image/webp'
});
Or, specify a mapping from type names to new type names:
file = await scale(file, {
maxWidth: 1600,
maxHeight: 1600,
type: {
'image/gif': 'image/png',
'image/webp': 'image/png',
'image/png': 'image/png',
'image/jpeg': 'image/jpeg',
}
});
Or, pass your own function:
file = await scale(file, {
maxWidth: 1600,
maxHeight: 1600,
type(name) => (name === 'image/gif') ? 'image/png' : name
});
Falling back to the original file
If you want, you can let the browser pass the original file in cases where scaling somehow fails:
file = await scale(file, {
maxWidth: 1600,
maxHeight: 1600,
fallback: true
});
Otherwise an error is thrown in this situation.
Previewing the image
file = await scale(file, {
maxWidth: 1600,
maxHeight: 1600
});
const img = document.querySelector('#my-img-element');
img.setAttribute('src', URL.createObjectURL(file));
URL.createObjectURL
can turn the returned object into a suitable URL for use with img src
or style: background-image
.
"What about the server side?"
That depends entirely on your language and framework of choice. If you're using
Node.js, check out multiparty and
sharp. Remember, you can never trust the
browser, so using a library like sharp
to validate the images is still
important.