捕获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上，您可以：
- 使用绘图函数
ctx.drawImage(image1, 0, 0, w, h); - 右键单击canvas
