<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>
从理论上讲,这应该创建然后导航到中间带有绿色方块的图像,但我还没有测试过 .
28
我想我会扩大这个问题的范围,在这个问题上有一些有用的花絮 .
要将画布作为图像,您应该执行以下操作:
var canvas = document.getElementById("mycanvas");
var image = canvas.toDataURL("image/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;
10 回答
哎呀 . 原始答案是针对类似问题的 . 这已被修改:
使用IMG中的值,您可以将其写为新图像,如下所示:
HTML5提供了Canvas.toDataURL(mimetype),它在Opera,Firefox和Safari 4 beta中实现 . 但是,存在许多安全限制(主要与将另一个来源的内容绘制到画布上有关) .
所以你不需要额外的库 .
例如
从理论上讲,这应该创建然后导航到中间带有绿色方块的图像,但我还没有测试过 .
我想我会扩大这个问题的范围,在这个问题上有一些有用的花絮 .
要将画布作为图像,您应该执行以下操作:
您可以使用它将图像写入页面:
其中“image / png”是mime类型(png是唯一必须支持的类型) . 如果您想要一组受支持的类型,您可以按照以下方式执行某些操作:
您只需要每页运行一次 - 它永远不会改变页面的生命周期 .
如果您希望让用户在保存文件时下载该文件,您可以执行以下操作:
如果您使用不同的mime类型,请务必更改image / png的两个实例,而不是image / octet-stream . 还值得一提的是,如果在渲染画布时使用任何跨域资源,则在尝试使用toDataUrl方法时将遇到安全性错误 .
我会用“wkhtmltopdf” . 它工作得很好 . 它使用webkit引擎(用于Chrome,Safari等),它非常易于使用:
而已!
Try it
如果您通过服务器下载(这样您可以命名/转换/后处理/等等您的文件),这里有一些帮助:
使用
toDataURL
的数据设置 Headers
另一个有趣的解决方案是PhantomJS . 这是一个使用JavaScript或CoffeeScript的无头WebKit脚本 .
其中一个用例是屏幕截图:您可以通过编程方式捕获Web内容,包括SVG和Canvas和/或使用缩略图预览创建网站屏幕截图 .
最佳切入点是screen capture维基页面 .
这是极地时钟的一个很好的例子(来自RaphaelJS):
您要将页面呈现为PDF吗?
如果您正在使用jQuery,这是很多人所做的,那么您将实现接受的答案,如下所示:
您可以使用jspdf将画布捕获到图像或pdf中,如下所示:
更多信息:https://github.com/MrRio/jsPDF
在某些版本的Chrome上,您可以:
使用绘制图像功能
ctx.drawImage(image1, 0, 0, w, h);
右键单击画布