{"id":1954,"date":"2023-02-15T12:14:12","date_gmt":"2023-02-15T12:14:12","guid":{"rendered":"https:\/\/www.tools.keywordfinder.us\/?page_id=691"},"modified":"2023-02-15T12:14:12","modified_gmt":"2023-02-15T12:14:12","slug":"video-to-jpg-extractor","status":"publish","type":"page","link":"https:\/\/tools.billionsideas.com\/hi\/video-to-jpg-extractor\/","title":{"rendered":"Video To JPG Extractor"},"content":{"rendered":"<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<section><h1>Video To JPG Extractor<\/h1> \n<br> \n<div class=\"topheader\">\n   \n    <p style=\"text-align:center\">Application to quickly generate thumbnails for every second of your video.\n    <\/p><br>\n    <div class=\"container\">\n        <div id=\"target\">\n            \n            <input type=\"file\" id=\"upload\" accept=\".mp4\">\n        <\/div>\n    <\/div>\n<\/div>\n<br>\n<video><\/video>\n  <canvas id=\"canvas\"><\/canvas>\n<br>\n<div id=\"bottom\">\n<button id=\"snap\" onclick=\"snap()\" style=\"display:none;\">Start Generating<\/button>\n<div class=\"imgc\">\n  <center><b> Right click to save the image<\/b><\/center>\n    <div id=\"images\">\n      \n    <\/div>\n  \n<\/div>\n<\/div>\n\n<\/section><br>\n<script>\n  var vid=document.querySelector('video');\n  var can=document.querySelector('canvas');\n  var con=canvas.getContext('2d');\n  var w,h,ratio;\nvar counter = 1;\nvar int = 0;\n\ndocument.getElementsByTagName('input')[0].addEventListener('change', function(event) {\n    var file = event.target.files[0];\n    var fileReader = new FileReader();\n    fileReader.onload = function() {\n        var blob = new Blob([fileReader.result], {\n            type: file.type\n        });\n        var url = URL.createObjectURL(blob);\n        vid.src = url;\n    };\n    fileReader.readAsArrayBuffer(file);\n    document.getElementById(\"snap\").style.display = \"block\";\n});\n  \/\/add loadedmetadata which will helps to identify video attributes\n\n  function snap() {\n    var vidlength = vid.duration;\n    var every = 1;\n    var counter = 1;\n    var limit = 100;\n    var int = setInterval(function(){\n    vid.currentTime = counter;\n      con.drawImage(vid, 0, 0, canvas.width, canvas.height);\n      var dataURL = canvas.toDataURL('image\/jpeg');\n        var element = document.createElement('div');\n  element.className = 'image';\n  element.innerHTML =\n    \"<img src='\" + dataURL + \"' id='\" + counter + \"'\/>\" ;\n        document.getElementById('images').appendChild(element);\n    \/\/context.fillRect(0,0,w,h);\n    \/\/context.drawImage(video,0,0,w,h);\n    counter = counter + every;\n     if (counter > vidlength || counter > limit) {\n       window.clearInterval(int);\n   }\n    }, 100);\n\n  };\n(function() {\n  var upload = document.getElementById('upload');\n  var target = document.getElementById('target');\n\n  target.onclick = function() {\n    upload.click();\n  };\n})();\n\n\n\n\n<\/script>\n\n      \n  <style>\nsection{\n         margin-top:60px;\n        width: 100%;\n        max-width: 970px;\n        background-color: #fff;\n        border: 1px solid #ddd;\n        padding: 25px;\n      }\n<\/style>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Video To JPG Extractor Application to quickly generate thumbnails for every second of your video. Start Generating Right click to save the image<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","footnotes":""},"class_list":["post-1954","page","type-page","status-publish"],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"Billions Ideas","author_link":"https:\/\/tools.billionsideas.com\/hi\/author\/loginbillionsideas-com\/"},"comment_info":0,"jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/tools.billionsideas.com\/hi\/wp-json\/wp\/v2\/pages\/1954","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tools.billionsideas.com\/hi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tools.billionsideas.com\/hi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/hi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/hi\/wp-json\/wp\/v2\/comments?post=1954"}],"version-history":[{"count":0,"href":"https:\/\/tools.billionsideas.com\/hi\/wp-json\/wp\/v2\/pages\/1954\/revisions"}],"wp:attachment":[{"href":"https:\/\/tools.billionsideas.com\/hi\/wp-json\/wp\/v2\/media?parent=1954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}