updated functional tests with new toDataUrl functionality

This commit is contained in:
Eric Rowell 2012-03-24 00:08:08 -07:00
parent 0610337db5
commit 50ddf3f952
4 changed files with 109 additions and 16 deletions

10
dist/kinetic-core.js vendored
View File

@ -3,7 +3,7 @@
* http://www.kineticjs.com/ * http://www.kineticjs.com/
* Copyright 2012, Eric Rowell * Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses. * Licensed under the MIT or GPL Version 2 licenses.
* Date: Mar 23 2012 * Date: Mar 24 2012
* *
* Copyright (C) 2011 - 2012 by Eric Rowell * 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 * 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 * 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 {function} callback
* @param {String} mimeType (optional) * @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 bufferLayer = this.bufferLayer;
var bufferContext = bufferLayer.getContext(); var bufferContext = bufferLayer.getContext();
var layers = this.children; var layers = this.children;
@ -1138,7 +1138,7 @@ Kinetic.Stage.prototype = {
addLayer(n); addLayer(n);
} }
else { else {
callback(bufferLayer.getCanvas().toDataURL(mimeType, arg2)); callback(bufferLayer.getCanvas().toDataURL(mimeType, quality));
} }
}; };
imageObj.src = dataURL; imageObj.src = dataURL;

View File

@ -3,7 +3,7 @@
* http://www.kineticjs.com/ * http://www.kineticjs.com/
* Copyright 2012, Eric Rowell * Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses. * Licensed under the MIT or GPL Version 2 licenses.
* Date: Mar 23 2012 * Date: Mar 24 2012
* *
* Copyright (C) 2011 - 2012 by Eric Rowell * Copyright (C) 2011 - 2012 by Eric Rowell
* *

View File

@ -132,12 +132,12 @@ Kinetic.Stage.prototype = {
/** /**
* Creates a composite data URL and passes it to a callback. If MIME type is not * 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 * 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 {function} callback
* @param {String} mimeType (optional) * @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 bufferLayer = this.bufferLayer;
var bufferContext = bufferLayer.getContext(); var bufferContext = bufferLayer.getContext();
var layers = this.children; var layers = this.children;
@ -152,7 +152,7 @@ Kinetic.Stage.prototype = {
addLayer(n); addLayer(n);
} }
else { else {
callback(bufferLayer.getCanvas().toDataURL(mimeType, arg2)); callback(bufferLayer.getCanvas().toDataURL(mimeType, quality));
} }
}; };
imageObj.src = dataURL; imageObj.src = dataURL;

View File

@ -1344,4 +1344,97 @@ Test.prototype.tests = {
layer.add(group); layer.add(group);
stage.add(layer); 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);
}
}; };