0

I have a product that you can alter the look of by adding additional products / designs to.

Our builder is in HTML5, and the product you alter is on a canvas.

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).

It can be stored locally or server side.

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.

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...

See: http://codepen.io/alexwhitfield/pen/XbMamB

Html:

<html lang="en">
<head>
    <meta charset=utf-8>
    <title>Screenshot stuff</title>
    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->  
    <link rel="stylesheet" href="video-canvas.css" />
</head>
<body>
    <video controls>
        <source src="https://www.clogau.co.uk/feeds/airport/resources/ClogauAdvert10secs.mp4 " type="video/mp4">
    </video>
    <canvas></canvas>
    <footer>
    </footer>
    <button id="snap" onclick="snap()">Take screenshot</button>

</body>
</html>

CSS:

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

JavaScript

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

Thanks

Alex

Whittie
  • 51
  • 3
  • When you want to store the resulting data-url on your server (prerequisite for sharing via 3rd party websites), you will need some kind of server-sided scripting technology and preferably a database. It doesn't have to be PHP, but you will need something like it. The technology options are too many to list them all. – Philipp Jun 04 '15 at 14:26
  • In addition to toDataURL, also check toBlob which allow you to obtain a byte array instead of a string (faster, smaller in size) –  Jun 04 '15 at 21:24

0 Answers0