Tuesday, April 30, 2019

make image form video url

Step 1.  create a file index.html

  <script src="https://www.zoylu.com/assets/js/jquery.min.js"></script>
<video id="video" controls="controls">
    <source src="t4.mp4" />
</video>
<form name="makeImg" action="makeImg.php" method="post" enctype="multipart/form-data">
 <input type="text" value="" id="imgB64" name="imgB64">
<button id="capture">Capture</button>
<!-- <input type="submit" name="submit" value="Create Image">-->

</form>
<div id="output"></div>

<script>
(function() {
   // "use strict";

    var video, output;
    var scale = 0.60;

    var initialize = function() {
        output = $("#output");
        video = $("#video").get(0);
alert(video);
        $("#capture").click(captureImage);               
    };

    var captureImage = function() {

        var canvas = document.createElement("canvas");
        canvas.width = video.videoWidth * scale;
        canvas.height = video.videoHeight * scale;
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

        var img = document.createElement("img");
var imgd = canvas.toDataURL();
alert(imgd);
$('#imgB64').val(imgd);
        img.src = canvas.toDataURL();
        output.prepend(img);
    };

    $(initialize);           

}());</script>

Step 2.
create makeImg.php file

$data = $_REQUEST['imgB64'];
list($type, $data) = explode(';', $data);
list(, $data)      = explode(',', $data);
$data = base64_decode($data);
file_put_contents('image.png', $data);


No comments:

Post a Comment