捕获HTMLcanvas作为gif / jpg / png / pdf?

是否有可能捕获或打印在HTMLcanvas中显示的图像或PDF?

我想通过canvas生成一个图像,并能够从该图像生成一个PNG。

哎呀。 原始答案是针对类似的问题。 这已经修改:

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

与IMG的价值,你可以把它写成一个新的形象,如下所示:

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

HTML5提供了在Opera,Firefox和Safari 4 beta中实现的Canvas.toDataURL(mimetype)。 然而,有很多安全性限制(主要是将另一个来源的内容绘制到canvas上)。

所以你不需要额外的库。

例如

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

理论上这应该创build,然后导航到中间有一个绿色方块的图像,但我没有testing过。

我想我会把这个问题的范围扩大一点,在这个问题上有一些有用的花絮。

为了将canvas作为图像,您应该执行以下操作:

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

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

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

“image / png”是一个MIMEtypes(png是唯一必须支持的)。 如果你想要一个支持types的数组,你可以按照下面的方法做一些事情:

 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; 

如果您使用不同的MIMEtypes,请务必更改image / png的两个实例,而不是图像/八位字节stream。 还值得一提的是,如果您在呈现canvas时使用任何跨域资源,则当您尝试使用toDataUrl方法时,将会遇到安全错误。

我会用“ wkhtmltopdf ”。 它工作得很好。 它使用webkit引擎(在Chrome,Safari等中使用),使用起来非常简单:

 wkhtmltopdf stackoverflow.com/questions/923885/ this_question.pdf 

而已!

尝试一下

 function exportCanvasAsPNG(id, fileName) { var canvasElement = document.getElementById(id); var MIME_TYPE = "image/png"; var imgURL = canvasElement.toDataURL(MIME_TYPE); var dlLink = document.createElement('a'); dlLink.download = fileName; dlLink.href = imgURL; dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':'); document.body.appendChild(dlLink); dlLink.click(); document.body.removeChild(dlLink); } 

这里有一些帮助,如果你通过服务器下载(这样你可以命名/转换/后处理/等你的文件):

– 使用toDataURL发布数据

– 设置标题

 $filename = "test.jpg"; //or png header('Content-Description: File Transfer'); if($msie = !strstr($_SERVER["HTTP_USER_AGENT"],"MSIE")==false) header("Content-type: application/force-download");else header("Content-type: application/octet-stream"); header("Content-Disposition: attachment; filename=\"$filename\""); header("Content-Transfer-Encoding: binary"); header("Expires: 0"); header("Cache-Control: must-revalidate"); header("Pragma: public"); 

– 创build图像

 $data = $_POST['data']; $img = imagecreatefromstring(base64_decode(substr($data,strpos($data,',')+1))); 

以JPEG格式导出图像

 $width = imagesx($img); $height = imagesy($img); $output = imagecreatetruecolor($width, $height); $white = imagecolorallocate($output, 255, 255, 255); imagefilledrectangle($output, 0, 0, $width, $height, $white); imagecopy($output, $img, 0, 0, 0, 0, $width, $height); imagejpeg($output); exit(); 

或透明的PNG

 imagesavealpha($img, true); imagepng($img); die($img); 

另一个有趣的解决scheme是PhantomJS 。 这是一个用JavaScript或CoffeeScript编写的无头WebKit脚本。

其中一个用例是屏幕截图:您可以以编程方式捕捉网页内容,包括SVG和Canvas和/或使用缩略图预览创build网站截图。

最好的入口点是屏幕截图 wiki页面。

这是极地时钟的一个很好的例子(来自RaphaelJS):

 >phantomjs rasterize.js http://raphaeljs.com/polar-clock.html clock.png 

你想呈现一个PDF页面?

 > phantomjs rasterize.js 'http://en.wikipedia.org/w/index.php?title=Jakarta&printable=yes' jakarta.pdf 

如果您使用的jQuery,相当多的人都这样做,那么你会实现接受的答案是这样的:

 var canvas = $("#mycanvas")[0]; var img = canvas.toDataURL("image/png"); $("#elememt-to-write-to").html('<img src="'+img+'"/>'); 

在某些版本的Chrome上,您可以:

  1. 使用绘图函数ctx.drawImage(image1, 0, 0, w, h);
  2. 右键单击canvas