Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 72473

Right-click to save canvas as jpg only

$
0
0

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?


Viewing all articles
Browse latest Browse all 72473

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>