Create a gist now

Instantly share code, notes, and snippets.

@nybblr /example.js
Last active Dec 11, 2017

What would you like to do?
In-browser image resizing + processing
import processImage from 'process-image';
var file = /* File() object from drag-n-drop or file input */
var imageProcessOpts = {
maxWidth: 1200,
maxHeight: 1200,
quality: 0.6
};
processImage(file, imageProcessOpts, blob => {
this.set('resizeBlob', blob);
});
var getFormData = (data) => {
var formData = new FormData();
Object.keys(data).forEach(key => {
var value = data[key];
if (value !== undefined) {
var filename = value instanceof Blob ? value.name : undefined;
formData.append(key, value, filename);
}
});
return formData;
}
{
"dependencies": {
"fileapi": "^2.0.20"
}
}
const FileAPI = window.FileAPI;
var quality = 0.6;
var type = 'image/jpeg';
export default function processImage(file, opts={}, fn) {
opts = {
type,
quality,
...opts
};
FileAPI.Image.transform(file, { hd: opts }, true,
(error, img) => {
img.hd.toBlob(blob => {
// Transfer name from file
blob.name = file.name;
fn(blob);
}, opts.type, opts.quality);
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment