Capture thumbnail on client side and prepare file to upload
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <script type='text/javascript'> | |
| window.onload = function () { | |
| var video = document.getElementById('videoId') | |
| var canvas = document.getElementById('canvasId') | |
| canvas.style.display = 'block' | |
| // fake loading | |
| setTimeout(() => { | |
| // start when video loaded | |
| draw(video, canvas) | |
| }, 2000) | |
| }; | |
| function draw(video, canvas) { | |
| var context = canvas.getContext('2d') | |
| context.drawImage(video, 0, 0, canvas.width, canvas.height) | |
| var dataURL = canvas.toDataURL() | |
| var blobBin = atob(dataURL.split(',')[1]) | |
| var array = [] | |
| for (var i = 0; i < blobBin.length; i++) { | |
| array.push(blobBin.charCodeAt(i)) | |
| } | |
| var file = new Blob([new Uint8Array(array)], {type: 'image/png'}) | |
| // this is working file | |
| console.log(file) | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <video id="videoId" autoplay loop controls crossorigin="anonymous"> | |
| <source src="http://localhost:3978/test.webm" type="video/webm"> | |
| <source src="http://localhost:3978/test.mp4" type="video/mp4"> | |
| Your browser does not support the video tag. | |
| </video> | |
| <canvas id="canvasId"></canvas> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment