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

Question

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

是否有可能捕获或打印在html画布中显示的图像或pdf？

我希望通过画布生成一个图像，并能够从该图像生成一个PNG。

Answer 1

哎呀。最初的回答是针对一个类似的问题。已对此进行了修订：var&nbsp;canvas&nbsp;=&nbsp;document.getElementById("mycanvas");var&nbsp;img&nbsp;&nbsp;&nbsp;&nbsp;=&nbsp;canvas.toDataURL("image/png");使用IMG中的值，您可以将其写成如下所示的新图像：document.write('<img&nbsp;src="'+img+'"/>');

Answer 2

HTML 5提供Canvas.toDataURL(Mimetype)，它在Opera、Firefox和Safari 4 beta中实现。但是，有许多安全限制(主要与将内容从另一个原点绘制到画布上有关)。所以你不需要额外的图书馆。G.&nbsp;<canvas&nbsp;id=canvas&nbsp;width=200&nbsp;height=200></canvas> &nbsp;<script> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.onload&nbsp;=&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;canvas&nbsp;=&nbsp;document.getElementById("canvas"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;context&nbsp;=&nbsp;canvas.getContext("2d"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context.fillStyle&nbsp;=&nbsp;"green"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context.fillRect(50,&nbsp;50,&nbsp;100,&nbsp;100); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;no&nbsp;argument&nbsp;defaults&nbsp;to&nbsp;image/png;&nbsp;image/jpeg,&nbsp;etc&nbsp;also&nbsp;work&nbsp;on&nbsp;some &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;implementations&nbsp;--&nbsp;image/png&nbsp;is&nbsp;the&nbsp;only&nbsp;one&nbsp;that&nbsp;must&nbsp;be&nbsp;supported&nbsp;per&nbsp;spec. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.location&nbsp;=&nbsp;canvas.toDataURL("image/png"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;</script>从理论上讲，这应该会创建并导航到中间有一个绿色方块的图像，但我还没有进行测试。

Answer 3

我想我应该把这个问题的范围扩大一点，并提供一些关于这件事的有用的小道消息。为了将画布作为图像，您应该执行以下操作：var&nbsp;canvas&nbsp;=&nbsp;document.getElementById("mycanvas");var&nbsp;image&nbsp;=&nbsp;canvas.toDataURL("image/png");您可以使用它将图像写入页面：document.write('<img&nbsp;src="'+image+'"/>');其中“Image/PNG”是MIME类型(PNG是唯一必须支持的类型)。如果您想要一个受支持类型的数组，您可以这样做：var&nbsp;imageMimes&nbsp;=&nbsp;['image/png',&nbsp;'image/bmp',&nbsp;'image/gif',&nbsp;'image/jpeg',&nbsp;'image/tiff'];&nbsp;//Extend&nbsp;as&nbsp;necessary&nbsp;var&nbsp;acceptedMimes&nbsp;=&nbsp;new&nbsp;Array(); for(i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;imageMimes.length;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;if(canvas.toDataURL(imageMimes[i]).search(imageMimes[i])>=0)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;acceptedMimes[acceptedMimes.length]&nbsp;=&nbsp;imageMimes[i]; &nbsp;&nbsp;&nbsp;&nbsp;}}您只需要每页运行一次-它不应该在页面的生命周期中发生变化。如果希望使用户在保存文件时下载该文件，可以执行以下操作：var&nbsp;canvas&nbsp;=&nbsp;document.getElementById("mycanvas");var&nbsp;image&nbsp;=&nbsp;canvas.toDataURL("image/png").replace("image/png",&nbsp;"image/octet-stream");&nbsp; //Convert&nbsp;image&nbsp;to&nbsp;'octet-stream'&nbsp;(Just&nbsp;a&nbsp;download,&nbsp;really)window.location.href&nbsp;=&nbsp;image;如果您使用的是不同的MIME类型，请确保更改了图像/png的两个实例，而不是图像/八进制流。还值得一提的是，如果在呈现画布时使用任何跨域资源，则在尝试使用toDataUrl方法时会遇到安全错误。