title: Creating an image from contents on HTML canvas
body: <p>I have a product that you can alter the look of by adding additional products / designs to.</p>
  
  <p>Our builder is in HTML5, and the product you alter is on a canvas.</p>
  
  <p>I need the ability to share the final product that the user has built, effectively I want to take a screenshot of the final product and then have it open in a lightbox (with share buttons for social media).</p>
  
  <p>It can be stored locally or server side.</p>
  
  <p>Any help on this would be hugely grateful, I've found a few solutions but involve PHP, we have PHP turned off on the server.</p>
  
  <p>I found a nice script on here, which I thought I could convert and have a selection via coordinates instead of an mp4, but failed to do so, I can't see this way working...</p>
  
  <p>See: <a href="http://codepen.io/alexwhitfield/pen/XbMamB" rel="nofollow">http://codepen.io/alexwhitfield/pen/XbMamB</a> </p>
  
  <p><strong>Html:</strong></p>
  
  <pre><code>&lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset=utf-8&gt;
      &lt;title&gt;Screenshot stuff&lt;/title&gt;
      &lt;!--[if IE]&gt;&lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;  
      &lt;link rel="stylesheet" href="video-canvas.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;video controls&gt;
          &lt;source src="https://www.clogau.co.uk/feeds/airport/resources/ClogauAdvert10secs.mp4 " type="video/mp4"&gt;
      &lt;/video&gt;
      &lt;canvas&gt;&lt;/canvas&gt;
      &lt;footer&gt;
      &lt;/footer&gt;
      &lt;button id="snap" onclick="snap()"&gt;Take screenshot&lt;/button&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>article, aside, figure, figcaption, footer, header, hgroup, menu, nav, section { display:block; }
  video, canvas {
      border:1px solid #000;
  }
  button {
      margin-top:10px;
  }
  footer { 
      font-size:11px;
      color:#aaa; 
      margin-top:10px;
  }
  small { 
      color:#aaa; 
      font-size:11px;
      display:block;
  }
  a { 
      color:#aaa;
      text-decoration:none;
  }
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>    // Get handles on the video and canvas elements
      var video = document.querySelector('video');
      var canvas = document.querySelector('canvas');
      // Get a handle on the 2d context of the canvas element
      var context = canvas.getContext('2d');
      // Define some vars required later
      var w, h, ratio;
  
      // Add a listener to wait for the 'loadedmetadata' state so the video's dimensions can be read
      video.addEventListener('loadedmetadata', function() {
          // Calculate the ratio of the video's width to height
          ratio = video.videoWidth / video.videoHeight;
          // Define the required width as 100 pixels smaller than the actual video's width
          w = video.videoWidth - 100;
          // Calculate the height based on the video's width and the ratio
          h = parseInt(w / ratio, 10);
          // Set the canvas width and height to the values just calculated
          canvas.width = w;
          canvas.height = h;          
      }, false);
  
      // Takes a snapshot of the video
      function snap() {
          // Define the size of the rectangle that will be filled (basically the entire element)
          context.fillRect(0, 0, w, h);
          // Grab the image from the video
          context.drawImage(video, 0, 0, w, h);
      } 
  </code></pre>
  
  <p>Thanks</p>
  
  <p>Alex</p>