Question

我有一个产品可以通过添加其他产品/设计来改变外观。

我们的构建器位于HTML5中，您更改的产品位于画布上。

我需要能够分享用户构建的最终产品，实际上我想截取最终产品的屏幕截图，然后在灯箱中打开（使用社交媒体的分享按钮）。

它可以存储在本地或服务器端。

对此的任何帮助都将非常感激，我找到了一些解决方案，但涉及PHP，我们在服务器上关闭了PHP。

我在这里发现了一个很好的脚本，我认为我可以转换并通过坐标而不是mp4进行选择，但未能这样做，我看不出这种方式有效......

请参阅：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);
    }

由于

亚历

从HTML画布上的内容创建图像

0 个答案: