如果你想允许用户下载一个 HTML 画布（ <canvas> 元素），你可以创建一个有 download 属性的链接，将画布数据作为文件 URL - 在线编辑器

<canvas id="my-canvas"></canvas>
<a id="my-anchor" href="" download="我的画布.png">下载图片</a>

<script>
  var canvas = document.getElementById('my-canvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green';
  ctx.fillRect(0, 0, 80, 100);
  
  var link = document.getElementById('my-anchor');
  link.addEventListener('click', function (ev) {
    link.href = canvas.toDataURL();
  }, false);
</script>
​x
 
<canvas id="my-canvas"></canvas>
<a id="my-anchor" href="" download="我的画布.png">下载图片</a>
​
<script>
  var canvas = document.getElementById('my-canvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green';
  ctx.fillRect(0, 0, 80, 100);
  
  var link = document.getElementById('my-anchor');
  link.addEventListener('click', function (ev) {
    link.href = canvas.toDataURL();
  }, false);
</script>
​