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

12
dist/kinetic-core.js vendored
View File

@ -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) {

View File

@ -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
*

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
* 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) {

View File

@ -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);
}
};