I'm using this to capture images as canvas from a video URL
:
var videoId = 'video';
var scaleFactor = 0.55; // increase or decrease size
var snapshots = [];
/**
* Captures a image frame from the provided video element.
*
* @param {Video} video HTML5 video element from where the image frame will be captured.
* @param {Number} scaleFactor Factor to scale the canvas element that will be return. This is an optional parameter.
*
* @return {Canvas}
*/
function capture(video, scaleFactor) {
if(scaleFactor == null){
scaleFactor = 1;
}
var w = video.videoWidth * scaleFactor;
var h = video.videoHeight * scaleFactor;
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, w, h);
var uniq = 'img_' + (new Date()).getTime();
canvas.setAttribute('id', uniq);
return canvas ;
}
/**
* Invokes the <code>capture</code> function and attaches the canvas element to the DOM.
*/
function shoot(){
var video = document.getElementById(videoId);
var output = document.getElementById('output');
var canvas = capture(video, scaleFactor);
snapshots.unshift(canvas);
output.innerHTML = '' ;
for(var i=0; i<10; i++){
output.appendChild(snapshots[i]);
}
}
The problems:
1 - Currently, browsers treat <canvas>
like they they treat a <div>
and this make it impossible to save any generated canvas as an image because when I right-click
on each and everyone, it always opens the windows dialog here I have to choose Save image as...
.
2 - The windows right-click
dialog always opens by default the option to save image as transfer.png
and I would like to save the image with their ID attribute
(var uniq
) and a jpg
extension.
Example:
The output canvas is like this: <canvas width="352" height="198" id="img_1575807516362"></canvas>
.
I want the right-click
to open the windows dialog offering to save image like this img_1575807516362.jpg
.
Alternatively, it would be nice tho have a download button for each canvas to export the canvas
as an image like this transfer.jpg
.
Is it possible with this code?