Javascript 如何将右键单击对话框上的画布保存为jpg

我正在使用此代码从我的站点中的视频

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]);

    }
}

我的两个问题：

1-目前，浏览器对待

就像对待

一样，这使得不可能将任何生成的画布保存为图像，因为当我在每个人上单击

鼠标右键时，它总是在这里打开windows对话框，我必须选择
将图像另存为…

2-默认情况下，windows
右键单击
对话框始终打开将图像另存为
transfer.png
的选项，我希望使用其
ID属性（
var uniq
）和
jpg
扩展名保存图像

我需要的示例：

输出画布如下所示：

我想让
右键单击
打开windows对话框，可以像这样保存图像
img_1575807516362.jpg

或者，最好为每个画布设置一个下载按钮，将
画布
导出为如下图像
transfer.jpg

是否可以使用此代码执行此操作？
提前道歉。这花了我一些时间，但我想确保它正常工作。我不确定是否有办法在windows对话框中保存到文件（在该对话框中会弹出“另存为…”提示），但您完全可以创建一个下载按钮来执行此操作

下载图像

首先，我们需要创建一个下载按钮：

下载

第二，我们可以创建一个函数，用一个键下载图像。
最简单的方法是创建一个可下载的标签：

var下载=函数（）{
var link=document.createElement（'a'）；//创建一个'a'元素
var thiscavas=document.getElementsByTagName（'canvas'）[0]；//获取页面上的第一个画布元素，假设要下载的画布是此元素。
link.download=`${thiscavas.id}.jpeg`；//为下载提供一个输出链接
link.href=thiscavas.toDataURL（“image/jpeg”）//将数据提供给链接
link.click（）；//单击我们创建的“a”元素
}

如果您想询问用户输入是否需要下载，您可以使用：

var下载=函数（）{
如果（window.confirm（“您想下载这个框架吗？”）{
var link=document.createElement（'a'）；//创建一个'a'元素
var thiscavas=document.getElementsByTagName（'canvas'）[0]；//获取画布
link.download=`${thiscavas.id}.jpeg`；//为下载提供一个输出链接
link.href=thiscavas.toDataURL（“image/jpeg”）//将数据提供给链接
link.click（）；//单击我们创建的“a”元素
}
}

您也可以随时使用
link.download=imageName+“.jpeg”

在JS中创建按钮

编辑：如果要在javascript而不是html中创建按钮，可以执行以下操作：

var createbutton=function（）{
var b=document.createElement（'button'）；//创建按钮
b、 onmousedown=function（）{//为按钮创建onmousedown事件
download（）；//这是上面的下载函数
}
b、 innerHTML=“下载”//给出按钮文本
//在这里，可以使用：b.style插入按钮样式
document.body.appendChild（b）；//将按钮附加到主体上
}

您可以在需要创建下载按钮时调用此函数。此函数在主体末端创建一个按钮，但您可以更改位置：

//其中显示document.body.appendChild（b），替换为：
document.getElementById（`myCustomId`）.appendChild（b）；
//这会将按钮放置在页面上具有“myCustomId”的任何元素中

浏览MouseDown事件并下载所有图像

编辑（2）：

如果在
快照
中创建了多个画布，则可以执行以下操作下载所有快照：

var下载=函数（）{
var link=document.createElement（'a'）；//创建一个'a'元素
snapshots.forEach（snap=>{
link.download=`${snap.id}.jpeg`；//为下载提供一个输出链接
link.href=snap.toDataURL（“image/jpeg”）//将数据提供给链接
link.click（）；//单击我们创建的“a”元素
});
}

如果您想一次下载一个图像，可以在添加图像时为其提供onmousedown事件。让我们编辑下载功能以支持此功能：

var下载=函数（画布）{
var link=document.createElement（'a'）；//创建一个'a'元素
link.download=`${canvas.id}.jpeg`；//为下载提供一个输出链接
link.href=canvas.toDataURL（“image/jpeg”）//将数据提供给链接
link.click（）；//单击我们创建的“a”元素
}
//我们还需要编辑shot（）函数
函数shot（）{
var video=document.getElementById（videoId）；
var output=document.getElementById（'output'）；
var canvas=捕获（视频、缩放因子）；
canvas.onmousedown=函数（）{
下载（画布）；
}
快照。取消移动（画布）；
output.innerHTML=''；
对于（var i=0；它有两件事…首先：我的代码生成了几个图像/帧，我需要选择一个我需要下载的图像/帧（每个图片/帧一个下载按钮）。你的代码只获得页面上的第一个画布元素。其次：我应该在哪里（在我的代码中）粘贴你的函数/片段？好的！我已经粘贴了
var download=函数（canvas）
函数（不是下载所有版本）位于“shot（）”函数之上，如您的示例所述。然后，我通过粘贴
canvas.onmousedown…
更改了shot函数，如您所述。之后，我粘贴了