如何在html5中将画布保存为图像？

Question

如何将画布保存为html5中的图像（使用javascript）？我想创建一个按钮，以便用户可以将html5中的画布保存为图像。

Answer 1

将画布另存为图像的方法：

添加 HTML：

<div class="canvas__container">
  <canvas id="cnvs" class="canvas__canvas"></canvas>
  <img src="" id="mirror" class="canvas__mirror" />
</div>

添加 CSS：

.canvas__container {
  height: 100%;
  position: relative;
  width: 100%;
}
.canvas__canvas {
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
}
.canvas__mirror {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%; 
}

添加JS：

var cnvs = document.getElementById('cnvs'),
    ctx = cnvs.getContext('2d'),
    mirror = document.getElementById('mirror');


cnvs.width = mirror.width = window.innerWidth;
cnvs.height = mirror.height = window.innerHeight;

添加监听器事件：

mirror.addEventListener('contextmenu', function (e) { });

将数据画布解析为数据 URL：

mirror.addEventListener('contextmenu', function (e) {
    var dataURL = canvas.toDataURL('image/png');
    mirror.src = dataURL;
});

添加下载按钮：

<script>
var button = document.getElementById('btn-download');
button.addEventListener('click', function (e) {
    var dataURL = canvas.toDataURL('image/png');
    button.href = dataURL;
});
</script>

<a href="#" class="button" id="btn-download">Download</a>

我希望，它可能会有所帮助。