0

i used following code to generate image form video by canvas method and that works fine and it displays image form video

How can i save that image in server, 

    <video>
        <source src="1.mp4" type="video/mp4">
    </video>
    <canvas>
    </canvas>
    <img id="screenshot" />
    <script>
    var context = canvas.getContext('2d');
    context.fillRect(0, 0, w, h);
    context.drawImage(video, 0, 0, w, h);
    var dataURL = canvas.toDataURL();
    document.getElementById('screenshot').src = dataURL;

script to save image

function saveCanvas('canvas','pat/' , '.jpg', options) {
                    return Task.spawn(function * () {
                    var reader = new FileReader;
                            var blob = yield new Promise(accept = > canvas.toBlob(accept, type, options));
                            reader.readAsArrayBuffer(blob);
                            yield new Promise(accept = > { reader.onloadend = accept });
                            return yield OS.File.writeAtomic('pat/', new Uint8Array(reader.result),
                            { tmpPath: 'pat/' + '.tmp' });
                    });
                            }

    </script>

is there a way to save with image file with random name

sanoj lawrence
  • 951
  • 5
  • 29
  • 69
  • You can't do this from the client, it has to be serverside code. – Daniel Beck Jan 27 '16 at 17:12
  • then how do i do that in server side – sanoj lawrence Jan 27 '16 at 17:17
  • Sooooo many ways that are vastly different depending on what solution you have available. This is way too broad of question. You could use `php` to output the blob you just sent to it as a `octet/file-something` (I forgot the specifics) which will make it a regular download, which is quite easy. – somethinghere Jan 27 '16 at 17:20
  • @somethinghere i don't want to download i need the image file to be save in server with random name – sanoj lawrence Jan 27 '16 at 17:27
  • Have a look here and simply google 'save blob as file using php' and you will find good answer strewn about on Stack Overflow: http://stackoverflow.com/questions/5745278/converting-blob-image-to-file-in-php – somethinghere Jan 27 '16 at 17:29
  • @somethingherei need to save CANVAS image not blob – sanoj lawrence Jan 27 '16 at 17:35
  • @somethinghere my script not saving image can you please help me – sanoj lawrence Jan 27 '16 at 18:12
  • You need to save a blob. When calling `getDataUrl` you are essentially converting it to text. Use ajax to post this 'blob' to your server, decode it and save it to a file, returning the URL to your image. – somethinghere Jan 27 '16 at 18:14
  • 1
    You can mix these two answers : [extract video frames](http://stackoverflow.com/questions/32699721/javascript-extract-video-frames-reliably/32708998#32708998) and [save to server](http://stackoverflow.com/questions/34711715/phpjs-how-to-do-fileuploads-in-html-form-as-content-type-multipart-via-js/34713226#34713226) – Kaiido Jan 28 '16 at 02:05
  • @Kaiido i tried its not working – sanoj lawrence Jan 28 '16 at 05:24

0 Answers0