需要无按钮的解决方案：

var download = function(){
  var link = document.createElement('a');
  link.download = 'filename.png';
  link.href = document.getElementById('canvas').toDataURL()
  link.click();
}

字符串
如果您有其他触发器要下载，或者您无法轻松引用触发器，则此功能非常有用。

保存的一种方法是导出为图像.你已经找到了这个解决方案，这是我认为最好的一个;）

var canvas = document.getElementById("mycanvas");
    var img    = canvas.toDataURL("image/png");
    document.write('<img src="'+img+'"/>');

字符串
您可以使用不同的图像类型。在此函数中更改mimetype：

canvas.toDataURL("image/jpeg");

型
保存画布数据（保存为PDF）的另一种方法是使用wkhtmltopdf Library
干杯。弗兰克
frankneff.ch www.example.com/@frankneff

function download() {
var download = document.getElementById("download");
var image = document.getElementById("myCanvas").toDataURL("image/png")
    .replace("image/png", "image/octet-stream");
download.setAttribute("href", image);
//download.setAttribute("download","archive.png");
}

个字符

尝试这样的东西...

function downloadCanvasAsImage(){

    let canvasImage = document.getElementById('canvas').toDataURL('image/png');
    
    // this can be used to download any image from webpage to local disk
    let xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function () {
        let a = document.createElement('a');
        a.href = window.URL.createObjectURL(xhr.response);
        a.download = 'image_name.png';
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        a.remove();
      };
      xhr.open('GET', canvasImage); // This is to download the canvas Image
      xhr.send();
}

字符串

var c = document.getElementById("popup");
var link = document.getElementById('cropImageLink');
link.setAttribute('download', 'MintyPaper.png');
link.setAttribute('href', c.toDataURL("image/png").replace("image/png", "image/octet-stream"));
link.click();

字符串
我希望这些代码将是工作。但首先创建锚标签在画布标签的id是'cropImageLink'。比后检查。但它不工作在IE浏览器

您可以使用reimg库来轻松完成此操作。
将画布转换为img：ReImg.fromCanvas(document.getElementById('yourCanvas')).toPng()
用户可以像这样下载此图像：ReImg.fromCanvas(document.getElementById('canvas')).downloadPng()
关于给文件一个自定义的名字，如果你看看库的代码（这是非常短和简单的理解），你会发现你可以改变名称。
以下是具体行的链接：https://github.com/gillyb/reimg/blob/master/reimg.js#L63 filename = filename || 'image.png';

感谢@kaiido
我只是修改了回调方法，它的工作，回调方法提到有没有为我工作

var callback = function(blob) {
var a = document.createElement('a');
var saveAs = $('input[name="group1"]:checked').val();

var link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'Image.' + saveAs;
document.body.appendChild(link);
link.click();

};
 function dataURIToBlob(dataURI, callback) {
var binStr = atob(dataURI.split(',')[1]),
len = binStr.length,
arr = new Uint8Array(len);

 for (var i = 0; i < len; i++) {
  arr[i] = binStr.charCodeAt(i);
 }

   callback(new Blob([arr]));
 }

字符串

Chromium DevTools > Inspect canvas tag > * 选中'Capture node screenshot'**，您可以将其粘贴到任何地方，以进行简单快速的查看。

的数据