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

Posted 2023-03-05

【中文标题】如何将画布保存为html5中的图像？

【英文标题】：How to save canvas as an image in html5?

【发布时间】：2015-01-10 17:33:01

【问题描述】：

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

【问题讨论】：

Capture HTML Canvas as gif/jpg/png/pdf? 的可能重复项

How To Save Canvas As An Image With canvas.toDataURL()?的可能重复

【参考方案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>

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