Updating snapshot feature

Author: photonstorm

src/renderer/snapshot/WebGLSnapshot.js

@@ -4,6 +4,8 @@
  * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
  */
 
+var GetFastValue = require('../../utils/object/GetFastValue');
+
 /**
  * Takes a snapshot of the current frame displayed by a WebGL canvas.
  *
@@ -16,48 +18,64 @@
  *
  * @return {HTMLImageElement} A new image which contains a snapshot of the canvas's contents.
  */
-var WebGLSnapshot = function (sourceCanvas, type, encoderOptions)
+var WebGLSnapshot = function (sourceCanvas, snapshotConfig)
 {
-    if (!type) { type = 'image/png'; }
-    if (!encoderOptions) { encoderOptions = 0.92; }
+    var type = GetFastValue(snapshotConfig, 'type', 'image/png');
+    var encoderOptions = GetFastValue(snapshotConfig, 'encoder', 0.92);
+    var x = GetFastValue(snapshotConfig, 'x', 0);
+    var y = GetFastValue(snapshotConfig, 'y', 0);
+    var getPixel = GetFastValue(snapshotConfig, 'getPixel', false);
 
     var gl = sourceCanvas.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);
-
-    //  CanvasPool?
-    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);
+    if (getPixel)
+    {
+        var pixel = new Uint8Array(4);
 
-    var data = imageData.data;
+        gl.readPixels(x, gl.drawingBufferHeight - y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
 
-    for (var y = 0; y < canvas.height; y += 1)
+        return pixel;
+    }
+    else
     {
-        for (var x = 0; x < canvas.width; x += 1)
+        var pixels = new Uint8Array(gl.drawingBufferWidth * gl.drawingBufferHeight * 4);
+
+        gl.readPixels(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+    
+        //  CanvasPool?
+        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)
         {
-            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];
+            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(type, encoderOptions);
+        var image = new Image();
+    
+        image.src = src;
+    
+        return image;
     }
-
-    ctx.putImageData(imageData, 0, 0);
-
-    var src = canvas.toDataURL(type, encoderOptions);
-    var image = new Image();
-
-    image.src = src;
-
-    return image;
 };
 
 module.exports = WebGLSnapshot;

src/renderer/webgl/WebGLRenderer.js

@@ -210,6 +210,9 @@ var WebGLRenderer = new Class({
          * @since 3.0.0
          */
         this.snapshotState = {
+            x: 0,
+            y: 0,
+            getPixel: false,
             callback: null,
             type: null,
             encoder: null
@@ -1924,10 +1927,13 @@ var WebGLRenderer = new Class({
 
         // Unbind custom framebuffer here
 
-        if (this.snapshotState.callback)
+        var state = this.snapshotState;
+
+        if (state.callback)
         {
-            this.snapshotState.callback(WebGLSnapshot(this.canvas, this.snapshotState.type, this.snapshotState.encoder));
-            this.snapshotState.callback = null;
+            state.callback(WebGLSnapshot(this.canvas, state));
+
+            state.callback = null;
         }
 
         var pipelines = this.pipelines;
@@ -1952,9 +1958,23 @@ var WebGLRenderer = new Class({
      */
     snapshot: function (callback, type, encoderOptions)
     {
-        this.snapshotState.callback = callback;
-        this.snapshotState.type = type;
-        this.snapshotState.encoder = encoderOptions;
+        var state = this.snapshotState;
+
+        state.callback = callback;
+        state.type = type;
+        state.encoder = encoderOptions;
+
+        return this;
+    },
+
+    getPixel: function (x, y, callback)
+    {
+        var state = this.snapshotState;
+
+        state.x = x;
+        state.y = y;
+        state.getPixel = true;
+        state.callback = callback;
 
         return this;
     },