Web app for merging images to only show pixels the same between each one.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
media_src
public
views
.gitignore
Gruntfile.js
README.md
package.json
server.js

README.md

Stack Merge

A web app for merging images in one of two ways:

  1. Keeping only the pixels they have in common, as explained in this Luminous Landscape article.

    That page also has some demo image sets you can download, but I recommend resizing them down to something web-appropriate (e.g. 1000 pixels across) first, as loading ten 24 megapixel images into a browser is rather slow. It does work though, eventually.

  2. Using the pixels with the highest contrast, also known as focus stacking.

Live application running at http://stackmerge.andyf.me/

Install and run

  1. Clone this repo:

     git clone https://github.com/caerphoto/stackmerge.git
    
  2. Install dependencies:

     cd stackmerge
     npm install
    
  3. Start the server:

     npm start
    
  4. Open http://localhost:8377/ in your browser.

Running in production

The app comes with a Gruntfile that will concatenate and minify the JavaScript, and save it to a timestamp-named file which the application detects on startup in production mode.

Just run grunt in the project directory; the default task will do the necessary. After that you can run npm start --production, and the app will only listen for connections on localhost:8377 (as opposed to 0.0.0.0:8377 in dev mode).

Not done yet

For now the app just blindly stacks images on top of each other using the first image's size as the base. If the images aren't perfectly aligned, the result will look slightly mushy or have weird edge artifacts.

I'd like to add some kind of alignment control or algorithm to alleviate this, but it's... non-trivial.