如何在右键单击对话框中将画布另存为jpg

Question

我正在使用此代码从我站点中的视频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-当前，浏览器将<canvas>像对待<div>一样对待，这使得将生成的画布另存为图像是不可能的，因为当我对每个人都按right-click时，总是在此处打开Windows对话框我必须选择Save image as...。

2-Windows right-click对话框始终默认打开，将图像另存为transfer.png，我想将图像保存为ID attribute（var uniq）和jpg扩展名。

我需要的示例：

输出画布是这样的：<canvas width="352" height="198" id="img_1575807516362"></canvas>。

我希望right-click打开Windows对话框，以保存像img_1575807516362.jpg这样的图像。

或者，最好为每个画布都提供一个下载按钮，以将canvas导出为类似transfer.jpg的图像。

是否可以使用此代码来完成这项工作？

Answer 1

预先致歉。我花了一些时间，但是我想确保它能正常工作。我不确定是否可以通过Windows对话框将其保存到文件（在其中弹出另存为...提示），但是您绝对可以创建一个下载按钮来执行此操作。

下载图像

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

<button onmousedown="download()">Download</button>

其次，我们可以创建一个函数，以使用密钥下载图像。最简单的方法是创建一个可下载的<a>标签：

var download = function(){
    var link = document.createElement('a'); //Creates an 'a' element
    var thisCanvas = document.getElementsByTagName('canvas')[0]; //gets the first canvas element on the page, assuming the canvas you want to download is this element. 
    link.download = `${thisCanvas.id}.jpeg`; //Gives the download an output link
    link.href = thisCanvas.toDataURL("image/jpeg") //Gives the data to the link
    link.click(); //Clicks the 'a' element we created
    }

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

var download = function() {
    if (window.confirm("Would you like to download this frame?")) { 
        var link = document.createElement('a'); //Creates an 'a' element
        var thisCanvas = document.getElementsByTagName('canvas')[0]; //Gets the canvas
        link.download = `${thisCanvas.id}.jpeg`; //Gives the download an output link
        link.href = thisCanvas.toDataURL("image/jpeg") //Gives the data to the link
        link.click(); //Clicks the 'a' element we created
    }
}

您也可以随时通过link.download = imageName + ".jpeg"更改图像文件的名称>

在JS中创建按钮

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

var createbutton = function() {
    var b = document.createElement('button'); //Creates the button
    b.onmousedown = function() { //Creates an onmousedown event for the button
        download(); //This is the download function above
    }
    b.innerHTML = "Download"; //Gives the button Text
    //Here, you can insert button styles using: b.style 
    document.body.appendChild(b); //Appends the button to the body
}
您可以在需要创建下载按钮时调用此功能。此功能在主体末端创建一个按钮，但是您可以更改位置：

   //Where it says document.body.appendChild(b); , replace it with:
   document.getElementById(`myCustomId`).appendChild(b);
   //This places the button in any element on the page with 'myCustomId' 
如果有任何疑问，请告诉我！