将 HTML Canvas 捕获为 gif/jpg/png/pdf？

Question

是否可以将 html 画布中显示的内容捕获或打印为图像或 pdf？

我想通过画布生成图像，并能够从该图像生成 png。

原文由 Parand 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

原始答案特定于类似问题。这已被修改：

 const canvas = document.getElementById('mycanvas')
const img    = canvas.toDataURL('image/png')

使用 IMG 中的值，您可以将其作为新图像写出，如下所示：

 document.getElementById('existing-image-id').src = img

或者

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

原文由 donohoe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

HTML5 提供了在 Opera、Firefox 和 Safari 4 beta 中实现的 Canvas.toDataURL(mimetype)。但是，存在许多安全限制（主要与将来自另一个来源的内容绘制到画布上有关）。

所以你不需要额外的库。

例如

 <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>

从理论上讲，这应该创建并导航到中间有一个绿色方块的图像，但我还没有测试过。

原文由 olliej 发布，翻译遵循 CC BY-SA 3.0 许可协议