Snapshot implementation

Author: bitnenfer

v3/src/renderer/canvas/CanvasRenderer.js

@@ -3,6 +3,7 @@ var DrawImage = require('./utils/DrawImage');
 var BlitImage = require('./utils/BlitImage');
 var GetBlendModes = require('./utils/GetBlendModes');
 var GetContext = require('../../canvas/GetContext');
+var Snapshot = require('../../snapshot/Snapshot');
 
 var CanvasRenderer = function (game)
 {
@@ -257,9 +258,21 @@ CanvasRenderer.prototype = {
         this.currentAlpha = 1;
         this.currentBlendMode = 0;
 
+        if (this.snapshotCallback)
+        {
+
+            this.snapshotCallback(Snapshot.CanvasSnapshot(this.gameCanvas));
+            this.snapshotCallback = null;
+        }
+
         //  Add Post-render hook
     },
 
+    snapshot: function (callback) 
+    {
+        this.snapshotCallback = callback;
+    },
+
     /**
      * Removes everything from the renderer and optionally removes the Canvas DOM element.
      *

v3/src/renderer/webgl/WebGLRenderer.js

@@ -16,6 +16,7 @@ var BlendModes = require('../BlendModes');
 var ScaleModes = require('../ScaleModes');
 var ResourceManager = require('./ResourceManager');
 var Resources = require('./resources');
+var Snapshot = require('../../snapshot/Snapshot');
 
 var WebGLRenderer = function (game)
 {
@@ -60,6 +61,7 @@ var WebGLRenderer = function (game)
     this.currentShader = null;
     this.resourceManager = null;
     this.currentRenderTarget = null;
+    this.snapshotCallback = null;
 
     this.init();
 };
@@ -386,11 +388,25 @@ WebGLRenderer.prototype = {
         {
             this.currentRenderer.flush();
         }
+
+        if (this.snapshotCallback)
+        {
+
+            this.snapshotCallback(Snapshot.WebGLSnapshot(this.view));
+            this.snapshotCallback = null;
+        }
+
         //  Add Post-render hook
 
         // console.log('%c render end ', 'color: #ffffff; background: #ff0000;');
     },
 
+    snapshot: function (callback) 
+    {
+        this.snapshotCallback = callback;
+    },
+
+
     destroy: function ()
     {
         this.gl = null;

v3/src/snapshot/CanvasSnapshot.js

@@ -0,0 +1,9 @@
+var CanvasSnapshot = function (canvas) 
+{
+    var src = canvas.toDataURL();
+    var image =  new Image();
+    image.src = src;
+    return image;
+};
+
+module.exports = CanvasSnapshot;

v3/src/snapshot/Snapshot.js

@@ -0,0 +1,4 @@
+module.exports = {
+    CanvasSnapshot: require('./CanvasSnapshot'),
+    WebGLSnapshot: require('./WebGLSnapshot')
+};

v3/src/snapshot/WebGLSnapshot.js

@@ -0,0 +1,36 @@
+var WebGLSnapshot = function (canvas) 
+{
+    var gl = canvas.getContext('experimental-webgl');
+    var pixels = new Uint8Array(gl.drawingBufferWidth * gl.drawingBufferHeight * 4);
+    gl.readPixels(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+
+    var canvas = document.createElement('canvas');
+    var ctx = canvas.getContext('2d');
+    var imageData;
+    canvas.width = gl.drawingBufferWidth;
+    canvas.height = gl.drawingBufferHeight;
+
+    imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    var data = imageData.data;
+    for (var y = 0; y <  canvas.height; y += 1)
+    {
+        for (var x = 0; x < canvas.width; x += 1)
+        {
+            var si = ((canvas.height - y) * canvas.width + x) * 4;
+            var di = (y * canvas.width + x) * 4;
+            data[di + 0] = pixels[si + 0];
+            data[di + 1] = pixels[si + 1];
+            data[di + 2] = pixels[si + 2];
+            data[di + 3] = pixels[si + 3];
+        }
+    }
+    ctx.putImageData(imageData, 0, 0);
+
+    var src = canvas.toDataURL();
+    var image =  new Image();
+    image.src = src;
+
+    return image;
+};
+
+module.exports = WebGLSnapshot;