In-browser image resizing + processing

example.js

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);
});

form-builder.js

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;
}

package.json

{
  "dependencies": {
    "fileapi": "^2.0.20"
  }
}

process-image.js

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);
    });
}