index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Seam Carver Demo</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <style>
    * {
      box-sizing: border-box;
    }

    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
    }

    .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      flex: 1;
    }

    canvas.image {
      background: #eaeaea;
      image-rendering: pixelated;
      /*max-width: 100%;*/
      /*max-height: 100%;*/
      height: 100%;
      border: 1px solid #eaeaea;
      -webkit-transition: width 0.2s, height 0.2s; /* Safari */
      transition: width 0.2s, height 0.2s;
    }

    .remove-seam {
      display: none;
    }

    header {
      z-index: 9;
      width: 100%;
      display: flex;
      flex-direction: row;
    }

    header > * {
      flex: 1;
    }

    .content {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .controls {
      position: relative;
      z-index: 3;
    }
  </style>
</head>
<body>


  <div class="content">

    <section class="controls">
      <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Run Demo</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Advanced</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Change Image</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="about-tab" data-toggle="tab" href="#about" role="tab" aria-controls="about" aria-selected="false">About</a>
        </li>
      </ul>

      <div class="tab-content" id="myTabContent">

        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
          <div class="btn-group mr-2" role="group" aria-label="First group">
            <button class="btn btn-outline-primary iterate-btn" onclick="demo.iterate()">Run <code>(I)</code></button>
            <button class="btn btn-outline-secondary" onclick="demo.reset()">Reset <code>(ESC)</code></button>
          </div>
        </div>

        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
          <div class="btn-group mr-2" role="group" aria-label="First group">
            <button class="btn btn-outline-primary iterate-btn" onclick="demo.iterate()">Run <code>(I)</code></button>
            <button class="btn btn-outline-secondary" onclick="demo.findSeam()" class="find-seam">Find Seam <code>(F)</code></button>
            <button class="btn btn-outline-secondary" onclick="demo.removeSeam()" class="remove-seam">Remove Seam <code>(R)</code></button>
            <button class="btn btn-outline-secondary" onclick="demo.reset()">Reset <code>(ESC)</code></button>
          </div>
          <div class="btn-group mr-2" role="group" aria-label="First group">
            <button class="btn btn-outline-secondary" onclick="demo.togglePixelation()" data-toggle="tooltip" title="Render the pixels as individual sharp squares.">Toggle pixelation <code>(P)</code></button>
            <button class="btn btn-outline-secondary" onclick="demo.toggleActualSize()">Toggle Zoom <code>(A)</code></button>
          </div>
          <div class="btn-group mr-2" role="group" aria-label="First group">
            <button class="btn btn-outline-secondary" onclick="demo.reDraw()" data-toggle="tooltip" title="Original">Color <code>(C)</code></button>
            <button class="btn btn-outline-secondary" onclick="demo.reDraw('energy')" data-toggle="tooltip" title="The energy of a pixel is it's contrast to surrounding pixels. More white means more contrast."
            >Energy <code>(E)</code></button>
            <button class="btn btn-outline-secondary" onclick="demo.reDraw('minsum')">Min sum <code>(S)</code></button>
            <button class="btn btn-outline-secondary" onclick="demo.reDraw('minx')">Minx <code>(X)</code></button>
          </div>
        </div>

        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
          <label>Change image: <select class="form-control" onchange="demo.changeImage(this.value)" name="select-image" id="select-image">
          </select></label>
          <div class="btn-group mr-2" role="group" aria-label="First group">
            <button class="btn btn-outline-secondary" onclick="demo.togglePixelation()" data-toggle="tooltip" title="Render the pixels as individual sharp squares.">Toggle pixelation <code>(P)</code></button>
            <button class="btn btn-outline-secondary" onclick="demo.toggleActualSize()">Toggle actual size <code>(A)</code></button>
          </div>
        </div>
        <div class="tab-pane fade" id="about" role="tabpanel" aria-labelledby="about-tab">
          <div class="container">
            <p>Javascript implementation of a content-aware image resizing algorithm called seam carving. <a href="https://en.wikipedia.org/wiki/Seam_carving">Seam carving</a> crops an image by removing the "least important" pixels in an image. An "unimportant" pixel is defined as a pixel which is very similar to its surrounding pixels. A seam is a one pixel column in the image which can zig-zag between adjancent columns.</p>

            <p>
              <ol>
                <li><a href="javascript:demo.findSeam()">Find the seam of lowest energy</a>.</li>
                <li>View the <a href="javascript:demo.reDraw('energy')">energy</a> of the pixels. Brighter pixels are more important</li>
                <li>View the <a href="javascript:demo.reDraw('minsum')">cumulative minimum sum</a> of the pixels going from the top to the bottom edge. Represents the cheapest possible seams.</li>
                <li>View the <a href="javascript:demo.reDraw('minx')">minx</a>. This represents which direction is cheapest from each pixel. Red is down and to the left, Green is straight down and Blue is down and to the right.</li>
                <li><a href="javascript:demo.iterate()">Run the demo</a>.</li>
                <li><a href="javascript:demo.changeImage('images/12x10.png')">Change the image</a>.</li>
                <li><a href="javascript:demo.toggleActualSize()">Toggle actual size</a>.</li>
                <li><a href="javascript:demo.reDraw()">Redraw color</a>.</li>
              </ol>
            </p>

            <p>Made with ❤️ by <a href="https://davidalbertoadler.com">David Alberto Adler</a></p>
          </div>
        </div>
      </div>
    </section>


    <!-- old nav -->
    <header style='display: none'>
        <button onclick="demo.togglePixelation()">Toggle pixelation <code>(P)</code></button>
        <button onclick="demo.toggleActualSize()">Toggle actual size <code>(A)</code></button>
        <button onclick="demo.reDraw('energy')">Energy <code>(E)</code></button>
        <button onclick="demo.reDraw('minsum')">Min sum <code>(S)</code></button>
        <button onclick="demo.reDraw('minx')">Minx <code>(X)</code></button>
        <button onclick="demo.reDraw()">Color <code>(C)</code></button>
        <button class="iterate-btn" onclick="demo.iterate()">Iterate (I)</button>
        <button onclick="demo.findSeam()" class="find-seam">Find Seam <code>(F)</code></button>
        <button onclick="demo.removeSeam()" class="remove-seam">Remove Seam <code>(R)</code></button>
        <button onclick="demo.reset()">Reset <code>(ESC)</code></button>
      <div>
        <label>Change image: <select onchange="demo.changeImage(this.value)" name="select-image" id="select-image">
        </select></label>
      </div>
    </header>


    <div class="wrapper">
      <canvas class="image"></canvas>
    </div>

  </div>


  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script type="text/javascript" src="demo/javascript/build/bundle.js"></script>
</body>
</html>