当前位置主页 > 资料库 > 前端教程 > HTML5 Canvas:获取canvas内容-toDataURL()

HTML5 Canvas:获取canvas内容-toDataURL()

2015-07-26

我们可以通过canvastoDataURL()方法来获取绘制在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!
    
返回HTML5 Canvas教程目录
Previous:
上一篇:HTML5 Canvas:绘图状态和状态栈
Next:
下一篇:HTML5 Canvas:像素处理

我要评论

返回顶部