function exportCanvasAsPNG(id, fileName) {

    var canvasElement = document.getElementById(id);

    var MIME_TYPE = "image/png";

    var imgURL = canvasElement.toDataURL(MIME_TYPE);

    var dlLink = document.createElement('a');
    dlLink.download = fileName;
    dlLink.href = imgURL;
    dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');

    document.body.appendChild(dlLink);
    dlLink.click();
    document.body.removeChild(dlLink);
}

我想我会把这个问题的范围扩大一点，在这个问题上提供一些有用的花絮。

为了将画布作为图像，您应该执行以下操作：

var canvas = document.getElementById("mycanvas");
var image = canvas.toDataURL("image/png");

您可以使用此选项将图像写入页面：

document.write('<img src="'+image+'"/>');

其中“image/png”是mime类型（png是唯一必须支持的类型）。如果您想要一个受支持类型的数组，可以按照以下方式进行操作：

var imageMimes = ['image/png', 'image/bmp', 'image/gif', 'image/jpeg', 'image/tiff']; //Extend as necessary 
var acceptedMimes = new Array();
for(i = 0; i < imageMimes.length; i++) {
    if(canvas.toDataURL(imageMimes[i]).search(imageMimes[i])>=0) {
        acceptedMimes[acceptedMimes.length] = imageMimes[i];
    }
}

您只需要在每个页面上运行一次，它在页面的生命周期中永远不会改变。

如果希望让用户在保存文件时下载文件，可以执行以下操作：

var canvas = document.getElementById("mycanvas");
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); //Convert image to 'octet-stream' (Just a download, really)
window.location.href = image;

如果您将其用于不同的mime类型，请确保更改image/png的两个实例，但不要更改image/octet流。还值得一提的是，如果在渲染画布时使用任何跨域资源，则在尝试使用toDataUrl方法时会遇到安全错误。

HTML5提供Canvas.toDataURL（mimetype），它在Opera、Firefox和Safari4测试版中实现。然而，有许多安全限制（主要是与将内容从另一个来源绘制到画布上有关）。

因此，您不需要额外的库。

e.g.

 <canvas id=canvas width=200 height=200></canvas>
 <script>
      window.onload = function() {
          var canvas = document.getElementById("canvas");
          var context = canvas.getContext("2d");
          context.fillStyle = "green";
          context.fillRect(50, 50, 100, 100);
          // no argument defaults to image/png; image/jpeg, etc also work on some
          // implementations -- image/png is the only one that must be supported per spec.
          window.location = canvas.toDataURL("image/png");
      }
 </script>

理论上，这应该创建一个中间有绿色方块的图像，然后导航到该图像，但我还没有进行测试。

function exportCanvasAsPNG(id, fileName) {

    var canvasElement = document.getElementById(id);

    var MIME_TYPE = "image/png";

    var imgURL = canvasElement.toDataURL(MIME_TYPE);

    var dlLink = document.createElement('a');
    dlLink.download = fileName;
    dlLink.href = imgURL;
    dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');

    document.body.appendChild(dlLink);
    dlLink.click();
    document.body.removeChild(dlLink);
}

这是另一种方式，没有字符串，尽管我不知道它是否更快。而不是toDataURL（正如这里所有问题所建议的那样）。在我的情况下，我希望阻止dataUrl/base64，因为我需要一个数组缓冲区或视图。所以HTMLCanvasElement中的另一个方法是toBlob。（TypeScript函数）：

    export function canvasToArrayBuffer(canvas: HTMLCanvasElement, mime: string): Promise<ArrayBuffer> {
  return new Promise((resolve, reject) => canvas.toBlob(async (d) => {
    if (d) {
      const r = new FileReader();
      r.addEventListener('loadend', e => {
        const ab = r.result;
        if (ab) {
          resolve(ab as ArrayBuffer);
        }
        else {
           reject(new Error('Expected FileReader result'));
        }
      }); r.addEventListener('error', e => {
        reject(e)
      });
      r.readAsArrayBuffer(d);
    }
    else {
      reject(new Error('Expected toBlob() to be defined'));
    }
  }, mime));
}

blobs的另一个优点是可以创建ObjectUrl来将数据表示为文件，类似于HTMLInputFile的“文件”成员。更多信息：

https://developer.mozilla.org/en/docs/Web/API/HTMLCanvasElement/toBlob

如果您通过服务器进行下载（这样您可以命名/转换/后处理等文件），这里有一些帮助：

-使用toDataURL发布数据

-设置标题

$filename = "test.jpg"; //or png
header('Content-Description: File Transfer');
if($msie = !strstr($_SERVER["HTTP_USER_AGENT"],"MSIE")==false)      
  header("Content-type: application/force-download");else       
  header("Content-type: application/octet-stream"); 
header("Content-Disposition: attachment; filename=\"$filename\"");   
header("Content-Transfer-Encoding: binary"); 
header("Expires: 0"); header("Cache-Control: must-revalidate"); 
header("Pragma: public");

-创建图像

$data = $_POST['data'];
$img = imagecreatefromstring(base64_decode(substr($data,strpos($data,',')+1)));

-将图像导出为JPEG

$width = imagesx($img);
$height = imagesy($img);
$output = imagecreatetruecolor($width, $height);
$white = imagecolorallocate($output,  255, 255, 255);
imagefilledrectangle($output, 0, 0, $width, $height, $white);
imagecopy($output, $img, 0, 0, 0, 0, $width, $height);
imagejpeg($output);
exit();

-或透明PNG

imagesavealpha($img, true);
imagepng($img);
die($img);