diff --git a/dist/kinetic-core.js b/dist/kinetic-core.js index 70a14681..4fc283ba 100644 --- a/dist/kinetic-core.js +++ b/dist/kinetic-core.js @@ -3,7 +3,7 @@ * http://www.kineticjs.com/ * Copyright 2012, Eric Rowell * Licensed under the MIT or GPL Version 2 licenses. - * Date: Mar 23 2012 + * Date: Mar 24 2012 * * Copyright (C) 2011 - 2012 by Eric Rowell * @@ -1118,12 +1118,12 @@ Kinetic.Stage.prototype = { /** * Creates a composite data URL and passes it to a callback. If MIME type is not * specified, then "image/png" will result. For "image/jpeg", specify a quality - * level as arg2 (range 0.0 - 1.0) + * level as quality (range 0.0 - 1.0) * @param {function} callback * @param {String} mimeType (optional) - * @param {Number} arg2 (optional) + * @param {Number} quality (optional) */ - toDataURL: function(callback, mimeType, arg2) { + toDataURL: function(callback, mimeType, quality) { var bufferLayer = this.bufferLayer; var bufferContext = bufferLayer.getContext(); var layers = this.children; @@ -1138,7 +1138,7 @@ Kinetic.Stage.prototype = { addLayer(n); } else { - callback(bufferLayer.getCanvas().toDataURL(mimeType, arg2)); + callback(bufferLayer.getCanvas().toDataURL(mimeType, quality)); } }; imageObj.src = dataURL; @@ -1373,7 +1373,7 @@ Kinetic.Stage.prototype = { // propapgate backwards through children for(var i = children.length - 1; i >= 0; i--) { var child = children[i]; - if (child.isListening) { + if(child.isListening) { if(child.className === 'Shape') { var exit = this._detectEvent(child, evt); if(exit) { diff --git a/dist/kinetic-core.min.js b/dist/kinetic-core.min.js index f7fe8576..9b8f62b5 100644 --- a/dist/kinetic-core.min.js +++ b/dist/kinetic-core.min.js @@ -3,7 +3,7 @@ * http://www.kineticjs.com/ * Copyright 2012, Eric Rowell * Licensed under the MIT or GPL Version 2 licenses. - * Date: Mar 23 2012 + * Date: Mar 24 2012 * * Copyright (C) 2011 - 2012 by Eric Rowell * diff --git a/src/Stage.js b/src/Stage.js index 3ee14739..1c30594a 100644 --- a/src/Stage.js +++ b/src/Stage.js @@ -132,12 +132,12 @@ Kinetic.Stage.prototype = { /** * Creates a composite data URL and passes it to a callback. If MIME type is not * specified, then "image/png" will result. For "image/jpeg", specify a quality - * level as arg2 (range 0.0 - 1.0) + * level as quality (range 0.0 - 1.0) * @param {function} callback * @param {String} mimeType (optional) - * @param {Number} arg2 (optional) + * @param {Number} quality (optional) */ - toDataURL: function(callback, mimeType, arg2) { + toDataURL: function(callback, mimeType, quality) { var bufferLayer = this.bufferLayer; var bufferContext = bufferLayer.getContext(); var layers = this.children; @@ -152,7 +152,7 @@ Kinetic.Stage.prototype = { addLayer(n); } else { - callback(bufferLayer.getCanvas().toDataURL(mimeType, arg2)); + callback(bufferLayer.getCanvas().toDataURL(mimeType, quality)); } }; imageObj.src = dataURL; @@ -387,7 +387,7 @@ Kinetic.Stage.prototype = { // propapgate backwards through children for(var i = children.length - 1; i >= 0; i--) { var child = children[i]; - if (child.isListening) { + if(child.isListening) { if(child.className === 'Shape') { var exit = this._detectEvent(child, evt); if(exit) { diff --git a/tests/js/functionalTests.js b/tests/js/functionalTests.js index a2623643..f85e86b6 100644 --- a/tests/js/functionalTests.js +++ b/tests/js/functionalTests.js @@ -303,9 +303,9 @@ Test.prototype.tests = { }); } var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 + container: containerId, + width: 578, + height: 200 }); var layer = new Kinetic.Layer(); var greenBox = new Kinetic.Rect({ @@ -1000,7 +1000,7 @@ Test.prototype.tests = { layer.add(rect); stage.add(layer); - stage.rotateDeg(20); + stage.rotateDeg(20); stage.setScale(0.5); stage.draw(); @@ -1344,4 +1344,97 @@ Test.prototype.tests = { layer.add(group); stage.add(layer); }, + 'STAGE - save image as png (click on circle to open new window)': function(containerId) { + var stage = new Kinetic.Stage({ + container: containerId, + width: 578, + height: 200 + }); + var layer = new Kinetic.Layer(); + + var circle = new Kinetic.Circle({ + x: stage.width / 2, + y: stage.height / 2, + radius: 70, + fill: 'violet', + stroke: 'black', + strokeWidth: 4 + }); + + circle.on('click', function() { + stage.toDataURL(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); + }); + }); + + layer.add(circle); + stage.add(layer); + }, + 'STAGE - save image as low quality jpg (click on circle to open new window)': function(containerId) { + var stage = new Kinetic.Stage({ + container: containerId, + width: 578, + height: 200 + }); + var layer = new Kinetic.Layer(); + + var circle = new Kinetic.Circle({ + x: stage.width / 2, + y: stage.height / 2, + radius: 70, + fill: 'violet', + stroke: 'black', + strokeWidth: 4 + }); + + circle.on('click', function() { + stage.toDataURL(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); + }, 'image/jpeg', 0); + }); + + layer.add(circle); + stage.add(layer); + }, + 'STAGE - save image as high quality jpg (click on circle to open new window)': function(containerId) { + var stage = new Kinetic.Stage({ + container: containerId, + width: 578, + height: 200 + }); + var layer = new Kinetic.Layer(); + + var circle = new Kinetic.Circle({ + x: stage.width / 2, + y: stage.height / 2, + radius: 70, + fill: 'violet', + stroke: 'black', + strokeWidth: 4 + }); + + circle.on('click', function() { + stage.toDataURL(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); + }, 'image/jpeg', 1); + }); + + layer.add(circle); + stage.add(layer); + } };