您的位置：首页 > Web前端 > JavaScript

HTML5画布阶段数据与KineticJS URL

2014-01-04 16:09 281 查看

获取数据的URL KineticJS的阶段,我们可以使用toDataURL()方法需要一个回调函数。此外,我们也可以传入一个mime类型如图像/ jpeg和质量范围在0和1之间的值。我们也可以获得数据的url的特定节点,包括层、组和形状。

注意:toDataURL()方法要求任何图像绘制到画布上驻留在web服务器上使用相同的域代码执行。如果不满足此条件,SECURITY_ERR抛出异常。
说明:拖放矩形,然后单击save按钮获得复合数据url和打开生成的图像在一个新的窗口

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#buttons {
position: absolute;
left: 10px;
top: 0px;
}
button {
margin-top: 10px;
display: block;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="buttons">
<button id="save">
Save as image
</button>
</div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rectX = stage.getWidth() / 2 - 50;
var rectY = stage.getHeight() / 2 - 25;

var box = new Kinetic.Rect({
x: rectX,
y: rectY,
width: 100,
height: 50,
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
draggable: true
});

box.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});

box.on('mouseout', function() {
document.body.style.cursor = 'default';
});

layer.add(box);
stage.add(layer);

document.getElementById('save').addEventListener('click', function() {
/*
* since the stage toDataURL() method is asynchronous, we need
* to provide a callback
*/
stage.toDataURL({
callback: function(dataUrl) {
/*
* here you can do anything you like with the data url.
* In this tutorial we'll just open the url with the browser
* so that you can see the result as an image
*/
window.open(dataUrl);
}
});
}, false);
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML5画布阶段数据

相关文章推荐

新的分享

章节导航