I have prepared a simple test case with screenshot, demonstrating my problem and am probably missing a tiny bit, just few lines of code.
I have a diagram representing wins and losses in a web game over the weeks.
I.e. the vertical axis represents the game score and the horizontal axis represents numbers of weeks.
My ajax script returns the data for 52 weeks, but I'd like to add a slider and allow users change the viewed number of weeks to any number between 12 and 52.
Can anybody please advise me, how to modify the change function?
$("#money_slider").slider({
min: 12,
max: 52,
change: function(event, ui) {
// XXX what to do here with
// hAxis.viewWindow.min and .max?
}
});
Below is my complete test case, just save it to an .html file and you will be able to try it in a browser:
<!DOCTYPE HTML>
<html>
<style type="text/css">
h3,p,div {
text-align: center;
}
#slider {
width: 700px;
margin-left: auto;
margin-right: auto;
}
</style>
<style type="text/css" title="currentStyle">
#import "https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css";
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart'],'language':'ru'}]}"></script>
<script type="text/javascript">
google.setOnLoadCallback(drawChart);
$(function() {
$('#slider').slider({
disabled: true,
range: 'min',
min: 12,
max: 52,
change: function(event, ui) {
// XXX what to do here with
// hAxis.viewWindow.min and .max?
$("#header").text("debug=" + ui.value);
}
});
});
function drawChart() {
var jsonData = '{"cols":[{"label":"Week number","type":"string"},{"label":"Week leader","type":"number"},{"label":"Your win","type":"number"},{"label":"Your loss","type":"number"}],"rows":[{"c":[{"v":"2011-33"},{"v":10671},{"v":0},{"v":-3113}]},{"c":[{"v":"2011-34"},{"v":7975},{"v":0},{"v":-2113}]},{"c":[{"v":"2011-35"},{"v":11009},{"v":0},{"v":-2244}]},{"c":[{"v":"2011-36"},{"v":10679},{"v":0},{"v":-689}]},{"c":[{"v":"2011-37"},{"v":11197},{"v":305},{"v":0}]},{"c":[{"v":"2011-38"},{"v":6762},{"v":419},{"v":0}]},{"c":[{"v":"2011-39"},{"v":7823},{"v":0},{"v":-1563}]},{"c":[{"v":"2011-40"},{"v":10171},{"v":1152},{"v":0}]},{"c":[{"v":"2011-41"},{"v":9903},{"v":0},{"v":-1008}]},{"c":[{"v":"2011-42"},{"v":5940},{"v":0},{"v":-1332}]},{"c":[{"v":"2011-43"},{"v":7979},{"v":0},{"v":-593}]},{"c":[{"v":"2011-44"},{"v":7833},{"v":0},{"v":-653}]},{"c":[{"v":"2011-45"},{"v":9691},{"v":0},{"v":-562}]},{"c":[{"v":"2011-46"},{"v":8836},{"v":0},{"v":-1686}]},{"c":[{"v":"2011-47"},{"v":10358},{"v":0},{"v":-2120}]},{"c":[{"v":"2011-48"},{"v":9956},{"v":0},{"v":-1353}]},{"c":[{"v":"2011-49"},{"v":8787},{"v":160},{"v":0}]},{"c":[{"v":"2011-50"},{"v":9590},{"v":0},{"v":0}]},{"c":[{"v":"2011-51"},{"v":8931},{"v":887},{"v":0}]},{"c":[{"v":"2011-52"},{"v":8529},{"v":0},{"v":-1434}]},{"c":[{"v":"2012-01"},{"v":8680},{"v":0},{"v":-1416}]},{"c":[{"v":"2012-02"},{"v":9932},{"v":0},{"v":-169}]},{"c":[{"v":"2012-03"},{"v":8334},{"v":0},{"v":-3149}]},{"c":[{"v":"2012-04"},{"v":8077},{"v":217},{"v":0}]},{"c":[{"v":"2012-05"},{"v":7788},{"v":0},{"v":-3683}]},{"c":[{"v":"2012-06"},{"v":10070},{"v":113},{"v":0}]},{"c":[{"v":"2012-07"},{"v":8318},{"v":1704},{"v":0}]},{"c":[{"v":"2012-08"},{"v":8208},{"v":0},{"v":-104}]},{"c":[{"v":"2012-09"},{"v":11561},{"v":272},{"v":0}]},{"c":[{"v":"2012-10"},{"v":7797},{"v":0},{"v":0}]},{"c":[{"v":"2012-11"},{"v":9893},{"v":0},{"v":-90}]},{"c":[{"v":"2012-12"},{"v":9197},{"v":0},{"v":-191}]},{"c":[{"v":"2012-13"},{"v":7287},{"v":651},{"v":0}]},{"c":[{"v":"2012-14"},{"v":7072},{"v":646},{"v":0}]},{"c":[{"v":"2012-15"},{"v":7183},{"v":0},{"v":-907}]},{"c":[{"v":"2012-16"},{"v":6021},{"v":0},{"v":-993}]}]}';
var data = new google.visualization.DataTable(jsonData);
var options = {
width: 700,
height: 500,
legend: {position: 'top'},
areaOpacity: 1.0,
vAxis: {format: '$#'},
hAxis: {title: 'Week number', titleTextStyle: {color: 'blue'}, slantedText: true},
colors: ['CCFFCC', '66CC66', 'FF9999'],
animation: {duration: 1000, easing: 'out'}
};
var chart = new google.visualization.SteppedAreaChart(document.getElementById('money'));
google.visualization.events.addListener(chart, 'ready', function() {
$('#slider').slider('enable');
});
chart.draw(data, options);
}
</script>
</head>
<body>
<h3 id="header">Money</h3>
<div id="money"></div>
<div id="slider"></div>
</body>
</html>
I've read the Google example (on the bottom), but don't grok it yet.
My own solution (has rendering problems with Opera 11.62 though - I've filed a bug #882 for that):
<!DOCTYPE HTML>
<html>
<style type="text/css">
h3,p,div {
text-align: center;
}
#slider {
width: 700px;
margin-left: auto;
margin-right: auto;
}
</style>
<style type="text/css" title="currentStyle">
#import "https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css";
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart'],'language':'ru'}]}"></script>
<script type="text/javascript">
google.setOnLoadCallback(initChart);
var jsonData = '{"cols":[{"label":"Week number","type":"string"},{"label":"Week leader","type":"number"},{"label":"Your win","type":"number"},{"label":"Your loss","type":"number"}],"rows":[{"c":[{"v":"2011-33"},{"v":10671},{"v":0},{"v":-3113}]},{"c":[{"v":"2011-34"},{"v":7975},{"v":0},{"v":-2113}]},{"c":[{"v":"2011-35"},{"v":11009},{"v":0},{"v":-2244}]},{"c":[{"v":"2011-36"},{"v":10679},{"v":0},{"v":-689}]},{"c":[{"v":"2011-37"},{"v":11197},{"v":305},{"v":0}]},{"c":[{"v":"2011-38"},{"v":6762},{"v":419},{"v":0}]},{"c":[{"v":"2011-39"},{"v":7823},{"v":0},{"v":-1563}]},{"c":[{"v":"2011-40"},{"v":10171},{"v":1152},{"v":0}]},{"c":[{"v":"2011-41"},{"v":9903},{"v":0},{"v":-1008}]},{"c":[{"v":"2011-42"},{"v":5940},{"v":0},{"v":-1332}]},{"c":[{"v":"2011-43"},{"v":7979},{"v":0},{"v":-593}]},{"c":[{"v":"2011-44"},{"v":7833},{"v":0},{"v":-653}]},{"c":[{"v":"2011-45"},{"v":9691},{"v":0},{"v":-562}]},{"c":[{"v":"2011-46"},{"v":8836},{"v":0},{"v":-1686}]},{"c":[{"v":"2011-47"},{"v":10358},{"v":0},{"v":-2120}]},{"c":[{"v":"2011-48"},{"v":9956},{"v":0},{"v":-1353}]},{"c":[{"v":"2011-49"},{"v":8787},{"v":160},{"v":0}]},{"c":[{"v":"2011-50"},{"v":9590},{"v":0},{"v":0}]},{"c":[{"v":"2011-51"},{"v":8931},{"v":887},{"v":0}]},{"c":[{"v":"2011-52"},{"v":8529},{"v":0},{"v":-1434}]},{"c":[{"v":"2012-01"},{"v":8680},{"v":0},{"v":-1416}]},{"c":[{"v":"2012-02"},{"v":9932},{"v":0},{"v":-169}]},{"c":[{"v":"2012-03"},{"v":8334},{"v":0},{"v":-3149}]},{"c":[{"v":"2012-04"},{"v":8077},{"v":217},{"v":0}]},{"c":[{"v":"2012-05"},{"v":7788},{"v":0},{"v":-3683}]},{"c":[{"v":"2012-06"},{"v":10070},{"v":113},{"v":0}]},{"c":[{"v":"2012-07"},{"v":8318},{"v":1704},{"v":0}]},{"c":[{"v":"2012-08"},{"v":8208},{"v":0},{"v":-104}]},{"c":[{"v":"2012-09"},{"v":11561},{"v":272},{"v":0}]},{"c":[{"v":"2012-10"},{"v":7797},{"v":0},{"v":0}]},{"c":[{"v":"2012-11"},{"v":9893},{"v":0},{"v":-90}]},{"c":[{"v":"2012-12"},{"v":9197},{"v":0},{"v":-191}]},{"c":[{"v":"2012-13"},{"v":7287},{"v":651},{"v":0}]},{"c":[{"v":"2012-14"},{"v":7072},{"v":646},{"v":0}]},{"c":[{"v":"2012-15"},{"v":7183},{"v":0},{"v":-907}]},{"c":[{"v":"2012-16"},{"v":6021},{"v":0},{"v":-993}]}]}';
var data = new google.visualization.DataTable(jsonData);
var chart;
var options = {
width: 700,
height: 500,
legend: {position: 'top'},
areaOpacity: 1.0,
vAxis: {format: '$#'},
hAxis: {title: 'Week number', titleTextStyle: {color: 'blue'}, slantedText: true, viewWindow: {min: 20, max: 35}},
colors: ['CCFFCC', '66CC66', 'FF9999'],
animation: {duration: 1000, easing: 'out'}
};
$(function() {
$('#slider').slider({
disabled: true,
range: 'min',
value: 20,
min: 0,
max: 20,
change: function(event, ui) {
$('#header').text('debug=' + ui.value);
options.hAxis.viewWindow.min = ui.value;
drawChart();
}
});
});
function initChart() {
chart = new google.visualization.SteppedAreaChart(document.getElementById('money'));
google.visualization.events.addListener(chart, 'ready', function() {
$('#slider').slider('enable');
});
drawChart();
}
function drawChart() {
chart.draw(data, options);
}
</script>
</head>
<body>
<h3 id="header">Money</h3>
<div id="money"></div>
<div id="slider"></div>
</body>
</html>
Related
I have an application with multiple stack of card, I would like to have a drag&drop ability between these stacks.
These stacks have a different layout in term of offset relative to the parent element.
I simplified to the max in this fiddle
https://jsfiddle.net/dtghbo7f/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Crapette HTML 5 + jQuery</title>
<style type="text/css">
.card, .box {
width: 71px;
height: 96px;
position: absolute;
}
#box1 {
top:31px;
left:25px;
}
#box2 {
top:31px;
left:255px;
}
.card {
background-image: url[...]
}
.box {
background-position: -1px -1px;
background-image: url[...]
}
</style>
<script src="jquery.min.js"></script>
<script src="jquery-ui.js"></script>
<script>
$("body").ready(function() {
$('<div>').attr('id','card0').addClass('card').appendTo($('#box1'));
for(let i=1;i<7;i++){
$('<div>').attr('id','card'+i).addClass('card').appendTo($('#box1 div.card:not(:has(*))')).css('top',5).css('left',5);
}
$('<div>').attr('id','card7').addClass('card').appendTo($('#box2'));
for(let i=1;i<7;i++){
$('<div>').attr('id','card'+(i+7)).addClass('card').appendTo($('#box2 div.card:not(:has(*))')).css('top',15);
}
$(".card").draggable({
revert: true,//'invalid',
revertDuration: 500,
start: function(event, ui) {
$(this).parents(".box").css('z-index',2);
},
drag: function(event, ui) {
},
stop: function(event, ui) {
$(".box").css('z-index',1);
if($(this).parents('.box').attr('id') == 'box1') {
$(this).css('top',5).css('left',5);
} else {
$(this).css('top',15).css('left',0);
}
},
});
$(".box, .card").droppable({
activate: function( event, ui ) {return false;},
drop: function( event, ui ) {
let source_offset = ui.draggable.parent().offset();
let destination_offset = $(this).offset();
$(this)
.append(ui.draggable);
ui.draggable
.css('top', parseInt(ui.draggable.css('top')) + parseInt(source_offset.top) - parseInt(destination_offset.top))
.css('left', parseInt(ui.draggable.css('left')) + parseInt(source_offset.left) - parseInt(destination_offset.left));
console.log(ui.draggable.css('top'), ui.draggable.css('left'));
$('.card, .box').droppable('enable');
$('.card:has(*), .box:has(*)').droppable('disable');
},
});
$('.card, .box').droppable('enable');
$('.card:has(*), .box:has(*)').droppable('disable');
});
</script>
</head>
<body>
<div id='box1' class='box'>
</div>
<div id='box2' class='box'>
</div>
</body>
</html>
As you can see, when you drop a card on the other stack, the revert options move the card to the original position relative to the parent. As this offset change on different stack, I would like to be able to modify this originalPosition when the droppable stack is determined. Can you help me ?
My site want to use a function when xAxis.afterSetExtremes. But in IE7, when I am selecting a range in xAxis, the selecting cannot be stoped by the second click. Why?
This problem only happened in IE7.
The test page is: Here
The whole code is:
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/huidu.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/js/html5shiv.min.js"></script>
<script src="/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div id="diantui" style="min-width:300px;height:400px">
</div>
</div>
</div>
<script>
function togglePlotbands() {
this.plotLinesAndBands.forEach(function(plotband) {
var ii = 1;
});
}
window.onload = function(){
var all_data = [];
all_data.push({x:1495641600000 , y: 1});
all_data.push({x:1497110300000 , y: 3});
all_data.push({x:1497210300000 , y: 4});
all_data.push({x:1497410300000 , y: 3});
all_data.push({x:1497510300000 , y: 2});
all_data.push({x:1497715300000 , y: 1});
all_data.push({x:1500134400000 , y: 2});
var hc_obj = {
chart: {
type: 'line',
zoomType: 'x',
renderTo: 'diantui',
events: {
load: function() {
togglePlotbands.call(this.xAxis[0]);
}
}
},
xAxis: {
plotBands: [
{color: '#FFFFEF',from: 1497110400000,to: 1497715200000,label: {text: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxfsdfsfsdfsfsdf'}}
],
events: {
afterSetExtremes: togglePlotbands
}
},
plotOptions: {
line: {
connectNulls: true,
marker: {
enabled: false
},
}
},
series: [
]
};
hc_obj['series'].push({name: 'xxx', data: all_data, visible: true});
var chart = new Highcharts.Chart(hc_obj);
}
</script>
</div>
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
For past many days i have been struggling to make a draggable and droppable event with specific CSS effect. All i want is , when draggble enters or touches the droppable , an under line should appear. i am fine with underline text-decoration thing if it gives me freedom to change color and space between text/element. And when draggable over/fit , the droppable should highlight. I have tried many things out there but no luck so far. I am using below code where any element can be draggble and droppable.
Please help.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" ></script>
</head>
<style>
.nav li{
display:block;
position:relative;
padding: 8px;
margin:16px;
text-decoration: none;
color: blue;
text-align: left;
}
.UnderLine {
border-bottom: 4px solid blue;
}
.BcgColor {
background-color: yellow;
}
.active
{
border-color : cyan;
background :#F781D8;
}
.hover
{
border-color : red;
background : #00FF80;
}
<!-- .nav li span:after{
content: "";
position:absolute;
bottom: 0;
left:0px;
height: 2px;
width:0;
background: brown;
text-align: left;
} -->
</style>
<script>
$(function() {
//console.log("About 1 "+ $("li").css("width") );
//console.log("About 2 "+ $("#DragContact").innerWidth() );
var mywid = '94px'
$("li").css({"width": mywid});
var myimg = $('<img/>').attr({
src:"add-icon.png",
width:15
})
//$("li").addClass('UnderLine')
$( "li" ).draggable({
revert: 'invalid',
/*cursor: "pointer",
cursorAt: { top: -10, left: -20 },
helper: function( event ) {
return $( myimg );
},*/
drag: function( event ) {
$(this).css('opacity','0.2');
}
});
$( "li" ).droppable({
tolerance: "touch",
hoverClass: "UnderLine",
over: function(event, ui) {
console.log("i am over")
$(this).addClass('BcgColor');
},
out: function(event, ui) {
console.log("i am out")
$(this).removeClass('BcgColor');
},
drop: function(event, ui) {
console.log("hi dropped ");
$(this).removeClass('BcgColor');
$(this).after($(ui.draggable));
$(ui.draggable).css('opacity','1');
}
});
$( "li2" ).droppable({
tolerance: "intersect",
hoverClass: "BcgColor",
drag: function( event ) {
console.log("hello dragging")
$(this).css('opacity','0.2');
},
drop: function(event, ui) {
console.log("hi drop intersect")
console.log($(this).nodeName)
$(this).removeClass('BcgColor');
$(this).after($(ui.draggable))
}
});
});
</script>
<body>
<div>
<ul class="nav">
<li id="About">1 About</li>
<li id="Portfolio">2 Portfolio</li>
<li id="Contact">3 Contact</li>
<li id="DragContact">4 DragContact</li>
</ul>
</div>
</body>
</html>
I'm using a Linechart from Google, in which I have drawn a graph from JSON data. There are two problems I'm running into I can't seem to fix.
Even though I have 'pointSize: 6' in my options, I still can't seem to draw any kind of point, anywhere on the graph. They just don't get visible.
I can't seem to edit any tooltip. I've added a new column, and neither "dataTable.setValue(i, 2, 'test')" nor manually adding a new entry in the JSON file with "Tooltip":"Test" seems to work.
Anyone who knows what I'm doing wrong, or who has a better suggestion for perhaps a framework/api to use? I'm trying to visualise a datastory with simple code.
<html>
<head>
<style>
body{
/*overflow: hidden;*/
}
#linechart{
margin-top: 20px;
margin-left: 30px}
</style>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
<script src='js/dimple.v2.1.2.js'></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
$(function() {
$.getJSON('data/priceData.json', function(data) {
var dataTable = new google.visualization.DataTable();
dataTable.addRows(1800);
dataTable.addColumn('string', 'Date');
dataTable.addColumn('number', 'Value');
//dataTable.addColumn({type: 'string', role: 'tooltip'});
dataTable.addColumn({ type: 'string', role: 'tooltip', 'p': { 'html': true} });
$.each(data, function(i, object){
dataTable.setValue(i, 0, object.DateY);
dataTable.setValue(i, 1, object.ClosePrice);
dataTable.setValue(i, 2, object.Tooltip);
//dataTable.setValue(i, 2, 'yo');
});
var options = {
colors: ['orange'],
tooltip: {isHtml: true},
chart: {
title: 'The Value of the Bitcoin',
subtitle: 'in dollars (USD)'
},
animation: {
duration: 1000,
easing: 'in',
startup: true
},
width: 1950,
height: 850,
pointSize: 6
};
var chart = new google.charts.Line(document.getElementById('linechart'));
chart.draw(dataTable, options);
});
});
};
</script>
</head>
<body>
<div id="linechart"></div>
</body>
</html>
I got this to work using google.visualization.LineChart instead of google.charts.Line.
It gives me both points and tooltips, see here:
Instead of using
google.load('visualization', '1.1', {packages: ['line']});
Just try including
<script type="text/javascript"
src="https://www.google.com/jsapi?autoload={
'modules':[{
'name':'visualization',
'version':'1',
'packages':['corechart']
}]
}"></script>
Then instead of:
var chart = new google.charts.Line(document.getElementById('linechart'));
Just try using:
var chart = new google.visualization.LineChart(document.getElementById('linechart'));
That ought to do it. Let me know if you have other problems.
Im having problems with kinetics. I have a stage with kinetics with a one image and text, but that I want is export the stage to a image like myImage.jpg no like [data:image/wIlksoks.e] that it is the callback that return dataUrl() from kinetics.
Im trying with this code:
stage.toDataURL({
width: 350,
height: 350,
mimeType: "image/jpeg",
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);
King Regards!
You can use stage.toDataURL to get your dataURL for the server:
stage.toDataURL({
callback:function(dataURL){
// dataURL is available for saving to your server
}
});
Note: Be sure that your image and your .html are hosted on the same domain.
Otherwise your stage.toImage will fail because of CORS security.
So be sure to check your console for CORS security errors !
Alternatively:
You can use stage.toImage to create a dataURL from your image+text.
Then you can create a temp canvas to get the dataURL.
stage.toImage({
callback:function(stageImg){
var tempCanvas=document.createElement("canvas");
var tempCtx=tempCanvas.getContext("2d");
tempCanvas.width=stageImg.width;
tempCanvas.height=stageImg.height;
tempCtx.drawImage(stageImg,0,0);
var dataURL=tempCanvas.toDataURL();
// dataURL is available for saving to your server
}
});
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/RV694/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:300px;
height:300px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 300,
height: 300
});
var layer = new Kinetic.Layer();
stage.add(layer);
var img=new Image();
img.onload=function(){
start();
}
img.crossOrigin="anonymous";
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png";
function start(){
var kImage = new Kinetic.Image({
x: 0,
y: 0,
width: 300,
height: 300,
image:img
});
layer.add(kImage);
var kText = new Kinetic.Text({
x:20,
y:20,
fontSize:24,
fill:"blue",
text:"Hello!"
});
layer.add(kText);
layer.draw();
}
$("#stageAsImage").click(function(){
stage.toImage({
callback:function(stageImg){
var tempCanvas=document.createElement("canvas");
var tempCtx=tempCanvas.getContext("2d");
tempCanvas.width=stageImg.width;
tempCanvas.height=stageImg.height;
tempCtx.drawImage(stageImg,0,0);
var dataURL=tempCanvas.toDataURL();
var imageElement=document.getElementById("newImage");
imageElement.src=dataURL;
}
});
});
}); // end $(function(){});
</script>
</head>
<body>
<button id="stageAsImage">Save stage as image</button>
<div id="container"></div>
<img id="newImage">
</body>
</html>