将HTML Canvas捕获为gif / jpg / png / pdf？
是否可以捕获或打印HTML画布中显示的图像或PDF？
我想通过画布生成一个图像，并能够从该图像生成一个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 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>
理论上讲，这应该创建并导航到中间有一个绿色正方形的图像，但我没有测试过。
我想我会稍微扩展这个问题的范围，并提供一些有用的消息。
为了将画布作为图像，您应该执行以下操作：
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类型，请确保更改image / png的两个实例，但不是图像/八位字节流。 还值得一提的是，如果您在呈现画布时使用任何跨域资源，则当您尝试使用toDataUrl方法时，将会遇到安全错误。
链接地址: http://www.djcxy.com/p/50317.html