Capture HTML Canvas as gif/jpg/png/pdf？

javascript html canvas export png

2022-08-29 22:27:29

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

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

答案 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+'"/>');

答案 2

HTML5提供了Canvas.toDataURL（mimetype），它在Opera，Firefox和Safari 4测试版中实现。但是，存在许多安全限制（主要与将其他来源的内容绘制到画布上有关）。

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

例如：

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

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