canvas - KineticJS - 連続して適用される複数の変換

Question

KineticJS を使用して、ユーザーが画像を操作できるようにしています (トリミング、回転、拡大縮小、反転など)。

画像に変換を適用すると、うまく機能します。しかし、2 番目の変換を適用すると、新しい画像ではなく、変換されていない元の画像に作用します。

ここに単純化された jsfiddle があります: http://jsfiddle.net/sdWPj/ Scale ボタンを 2 回クリックします - サイズを増やし続ける必要があります。回転ボタンを 2 回クリックすると、画像が画面上に保持されます。

なぜこれが起こっているのか知っています。これは、変換によって実際の画像が変更されるのではなく、その画像の見方が変わるだけだからです。しかし、私はそれが実際のイメージを変えたいと思っています。各変換後に画像を保存するか、ステージを平坦化できますか?

複数の変換を連続して実行するにはどうすればよいですか?

フィドルのコードは次のとおりです。

HTML:

<button id="scale">Scale</button>
<button id="rotate">Rotate photo</button>
<div id="container"></div>

JavaScript:

var photoPath = "http://www.html5canvastutorials.com/demos/assets/yoda.jpg";
var stage;
var photo;
stage = new Kinetic.Stage({
    container: 'container',
    width: 0,
    height: 0
});
var layer = new Kinetic.Layer({
    id: "imageLayer"
});
var originalImage = new Image();
originalImage.src = photoPath;
originalImage.onload = function () {
    photo = new Kinetic.Image({
        id: "image",
        image: originalImage
    });
    stage.setHeight(originalImage.height);
    stage.setWidth(originalImage.width);
    layer.add(photo);
    stage.add(layer);
};
var scale = function () {
    var image = stage.get('#image')[0];
    var scale = 1.5;
    image.setScale(scale, scale);
    stage.draw();
};
var rotate = function () {
    var angle = 90;
    var image = stage.get('#image')[0];
    image.rotateDeg(angle);
    image.setX(image.getHeight());
    stage.draw();
};
document.getElementById('scale').addEventListener('click', scale, false);
document.getElementById('rotate').addEventListener('click', rotate, false);