将HTML画布捕获为gif/jpg/png/pdf？

Question

将HTML画布捕获为gif/jpg/png/pdf？是否有可能捕获或打印在html画布中显示的图像或pdf？我希望通过画布生成一个图像，并能够从该图像生成一个PNG。

Answer 1

哎呀。最初的回答是针对一个类似的问题。已对此进行了修订：

var canvas = document.getElementById("mycanvas");var img    = canvas.toDataURL("image/png");

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

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

Answer 2

HTML 5提供Canvas.toDataURL(Mimetype)，它在Opera、Firefox和Safari 4 beta中实现。但是，有许多安全限制(主要与将内容从另一个原点绘制到画布上有关)。

所以你不需要额外的图书馆。

G.

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

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

Answer 3

我想我应该把这个问题的范围扩大一点，并提供一些关于这件事的有用的小道消息。

为了将画布作为图像，您应该执行以下操作：

var canvas = document.getElementById("mycanvas");var image = canvas.toDataURL("image/png");

您可以使用它将图像写入页面：

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

其中“Image/PNG”是MIME类型(PNG是唯一必须支持的类型)。如果您想要一个受支持类型的数组，您可以这样做：

var imageMimes = ['image/png', 'image/bmp', 'image/gif', 'image/jpeg', 'image/tiff']; //Extend as necessary var acceptedMimes = new Array();
for(i = 0; i < imageMimes.length; i++) {
    if(canvas.toDataURL(imageMimes[i]).search(imageMimes[i])>=0) {
        acceptedMimes[acceptedMimes.length] = imageMimes[i];
    }}

您只需要每页运行一次-它不应该在页面的生命周期中发生变化。

如果希望使用户在保存文件时下载该文件，可以执行以下操作：

var canvas = document.getElementById("mycanvas");var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
//Convert image to 'octet-stream' (Just a download, really)window.location.href = image;

如果您使用的是不同的MIME类型，请确保更改了图像/png的两个实例，而不是图像/八进制流。还值得一提的是，如果在呈现画布时使用任何跨域资源，则在尝试使用toDataUrl方法时会遇到安全错误。