Extracts multiple images (such as iPhone depthmaps) stored in single image files of the MPF format.

Hopefully still hosted on hsnilsson.com/mpfextractor/ or mpfextractor.netlify.com.

For example iPhone 8 Plus, X, and XSMax stores depth information in portrait/bokeh mode as grayscale images called depthmaps inside the original image files. What gives? Well, especially depthmaps can be fun because those can also be used to view a photo in 3D!

So if you have the depthmap, how can you view the photo in 3D? Try upload one along the original image on Facebook and it'll automatically convert it to a 3D photo! Or try it out in depthy.me!

The images are stored inside an image file as in shown in Figure 1:

Include MPFExtractor.js in your html file or import as a module.

(Also see examples in index.html how to use the extractor: Either on HTML <img> elements, or on uploaded files.)

As below, create an extractor, set options if needed, and call extractor.extract(arrayBuffer, options) with an arrayBuffer representing the MPF image file.

extract() returns a promise which will resolve to an array of img elements or reject with an error message.

  const extractor = new MPFExtractor();
  const options = {
    debug: true,
    extractFII: true
  };

  function onUpload(e) {
    for (const file of e.target.files) {
      let reader = new FileReader();
      reader.onload = () =>
        extractor
          .extract(reader.result, options)
          .then(setImages)
          .catch(setError);
      reader.readAsArrayBuffer(file);
    }
  }

  ...

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

MIT