HTML5 Canvas：获取canvas内容-toDataURL() - Web前端

我们可以通过Canvas的toDataURL()方法来获取绘制在html5 canvas中的内容。做法类似下面的示例代码：

var canvas  = document.getElementById("ex1");
var DataURL = canvas.todataurl();

从toDataURL()方法中返回的数据是一个经过编码的URL，它里面包含了从canvas中抓取的图形的数据。我们可以将这些数据显示在一个文本框中，例如：

var canvas  = document.getElementById("ex1");
var dataUrl = canvas.toDataURL();

document.getElementById("Textarea").value = dataUrl;

我们还可以将抓取到的图形数据显示在一个新的窗口中，例如：

var canvas  = document.getElementById("ex1");
var dataUrl = canvas.toDataURL();

window.open(dataUrl,"toDataURL() image", "width=600, height=200");

在下面的例子中，我们在canvas中绘制了一些文字，在下面又两个按钮，一个按钮可以将抓取到的canvas数据显示在文本框中，另一个按钮可以将抓取到的canvas数据显示在一个新的窗口中。

返回HTML5 Canvas教程目录