×

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

作者:Web前端之家2016.09.08来源:Web前端之家浏览:26665评论:1
关键词:Canvashtml5
微信公众号

微信公众号

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

61.png

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教程目录

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/Canvas1473264000753.html

网友评论文明上网理性发言 已有1人参与

发表评论:

评论列表

最新留言

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2020 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.6 Valyria