Screenshots working

windows/RNViewShot.Net46/RNViewShot.Net46.csproj

@@ -70,14 +70,22 @@
       <HintPath>..\packages\Newtonsoft.Json.9.0.1\lib\net45\Newtonsoft.Json.dll</HintPath>
       <Private>True</Private>
     </Reference>
+    <Reference Include="PresentationCore" />
+    <Reference Include="PresentationFramework" />
     <Reference Include="System" />
     <Reference Include="System.Core" />
+    <Reference Include="System.Drawing" />
+    <Reference Include="System.Windows" />
     <Reference Include="System.Xml.Linq" />
     <Reference Include="System.Data.DataSetExtensions" />
     <Reference Include="Microsoft.CSharp" />
     <Reference Include="System.Data" />
     <Reference Include="System.Net.Http" />
     <Reference Include="System.Xml" />
+    <Reference Include="Windows.Foundation.UniversalApiContract">
+      <HintPath>..\..\..\..\..\..\..\..\..\Program Files (x86)\Windows Kits\10\References\Windows.Foundation.UniversalApiContract\2.0.0.0\Windows.Foundation.UniversalApiContract.winmd</HintPath>
+    </Reference>
+    <Reference Include="WindowsBase" />
   </ItemGroup>
   <ItemGroup>
     <Compile Include="Properties\AssemblyInfo.cs" />

windows/RNViewShot.Net46/RNViewShotModule.cs

@@ -1,9 +1,9 @@
 using Newtonsoft.Json.Linq;
 using ReactNative.Bridge;
+using ReactNative.UIManager;
 using System;
+using System.IO;
 using System.Collections.Generic;
-//using Windows.ApplicationModel.Core;
-//using Windows.UI.Core;
 
 namespace RNViewShot
 {
@@ -12,14 +12,15 @@ namespace RNViewShot
     /// </summary>
     class RNViewShotModule : ReactContextNativeModuleBase
     {
-        private ReactContext reactContext;
+        private const string ErrorUnableToSnapshot = "E_UNABLE_TO_SNAPSHOT";
+        private readonly ReactContext _reactContext;
 
         /// <summary>
         /// Instantiates the <see cref="RNViewShotModule"/>.
         /// </summary>
-        public RNViewShotModule(ReactContext reactContext) : base(reactContext) 
+        public RNViewShotModule(ReactContext reactContext) : base(reactContext)
         {
-            this.reactContext = reactContext;
+            this._reactContext = reactContext;
         }
 
         /// <summary>
@@ -34,45 +35,16 @@ namespace RNViewShot
         }
 
         [ReactMethod]
-        public void takeSnapshot(int tag, JObject options, IPromise promise) {
-            // Android Equivalent Code
-            //ReactApplicationContext context = getReactApplicationContext();
-            //String format = options.hasKey("format") ? options.getString("format") : "png";
-            //Bitmap.CompressFormat compressFormat =
-            //        format.equals("png")
-            //                ? Bitmap.CompressFormat.PNG
-            //                : format.equals("jpg") || format.equals("jpeg")
-            //                ? Bitmap.CompressFormat.JPEG
-            //                : format.equals("webm")
-            //                ? Bitmap.CompressFormat.WEBP
-            //                : null;
-            //if (compressFormat == null)
-            //{
-            //    promise.reject(ViewShot.ERROR_UNABLE_TO_SNAPSHOT, "Unsupported image format: " + format + ". Try one of: png | jpg | jpeg");
-            //    return;
-            //}
-            //double quality = options.hasKey("quality") ? options.getDouble("quality") : 1.0;
-            //DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
-            //Integer width = options.hasKey("width") ? (int)(displayMetrics.density * options.getDouble("width")) : null;
-            //Integer height = options.hasKey("height") ? (int)(displayMetrics.density * options.getDouble("height")) : null;
-            //String result = options.hasKey("result") ? options.getString("result") : "file";
-            //Boolean snapshotContentContainer = options.hasKey("snapshotContentContainer") ? options.getBoolean("snapshotContentContainer") : false;
-            //try
-            //{
-            //    String name = options.hasKey("filename") ? options.getString("filename") : null;
-            //    File tmpFile = "file".equals(result) ? createTempFile(getReactApplicationContext(), format, name) : null;
-            //    UIManagerModule uiManager = this.reactContext.getNativeModule(UIManagerModule.class);
-            //    uiManager.addUIBlock(new ViewShot(tag, format, compressFormat, quality, width, height, tmpFile, result, snapshotContentContainer, promise));
-            //}
-            //catch (Exception e) {
-            //    promise.reject(ViewShot.ERROR_UNABLE_TO_SNAPSHOT, "Failed to snapshot view tag "+tag);
-            //}
+        public void takeSnapshot(int tag, JObject options, IPromise promise)
+        {
+            string format = options["format"] != null ? options.Value<string>("format") : "png";
+            double quality = options["quality"] != null ? options.Value<double>("quality") : 1.0;
+            int? width = options["width"] != null ? options.Value<int?>("width") : null;
+            int? height = options["height"] != null ? options.Value<int?>("height") : null;
+            string result = options["result"] != null ? options.Value<string>("result") : "file";            
 
-            //Bitmap bitmap = new Bitmap(Screen.PrimaryScreen.Bounds.Width, Screen.PrimaryScreen.Bounds.Height);
-            //Graphics graphics = Graphics.FromImage(bitmap as Image);
-            //graphics.CopyFromScreen(0, 0, 0, 0, bitmap.Size);
-            //bitmap.Save("c:\\screenshot.jpeg", ImageFormat.Jpeg);
-            promise.Resolve("This is working!");
+            UIManagerModule uiManager = this._reactContext.GetNativeModule<UIManagerModule>();
+            uiManager.AddUIBlock(new ViewShot(tag, format, quality, width, height, result, promise));
         }
     }
 }

windows/RNViewShot.Net46/ViewShot.cs

@@ -1,12 +1,105 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
+using ReactNative.Bridge;
+using ReactNative.UIManager;
+using System;
+using System.IO;
+using System.Windows;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
 
 namespace RNViewShot
 {
-    class ViewShot
+    public class ViewShot : IUIBlock
     {
+        private const string ErrorUnableToSnapshot = "E_UNABLE_TO_SNAPSHOT";
+        private int tag;
+        private string extension;
+        private double quality;
+        private int? width;
+        private int? height;
+        private string result;
+        private IPromise promise;
+
+        public ViewShot(
+            int tag,
+            string extension,
+            double quality,
+            int? width,
+            int? height,
+            string result,
+            IPromise promise)
+        {
+            this.tag = tag;
+            this.extension = extension;
+            this.quality = quality;
+            this.width = width;
+            this.height = height;
+            this.result = result;
+            this.promise = promise;
+        }
+
+        public void Execute(NativeViewHierarchyManager nvhm)
+        {
+            var view = nvhm.ResolveView(tag) as FrameworkElement;
+            if (view == null)
+            {
+                promise.Reject(ErrorUnableToSnapshot, "No view found with reactTag: " + tag);
+                return;
+            }
+            int width = (int)view.ActualWidth;
+            int height = (int)view.ActualHeight;
+
+            RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap(width, height, 96, 96, PixelFormats.Default);
+            renderTargetBitmap.Render(view);
+
+            BitmapEncoder image;
+            if (extension == "png")
+            {
+                image = new PngBitmapEncoder();
+            }
+            else if (extension == "jpg" || extension == "jpeg")
+            {
+                image = new JpegBitmapEncoder();
+            }
+            else
+            {
+                promise.Reject(ErrorUnableToSnapshot, "Unsupported image format: " + extension + ". Try one of: png | jpg | jpeg");
+                return;
+            }
+
+            // TODO: Allow setting quality
+            image.Frames.Add(BitmapFrame.Create(renderTargetBitmap));
+
+            if ("file" == result)
+            {
+                // TODO: Allow specifying path
+                string path = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments), "testing." + extension);
+                using (Stream fileStream = File.Create(path))
+                {
+                    image.Save(fileStream);
+                }
+            }
+            else if ("base64" == result)
+            {
+                MemoryStream stream = new MemoryStream();
+                image.Save(stream);
+                byte[] imageBytes = stream.ToArray();
+                string data = Convert.ToBase64String(imageBytes);
+                promise.Resolve(data);
+
+            }
+            else if ("data-uri" == result)
+            {
+                MemoryStream stream = new MemoryStream();
+                image.Save(stream);
+                byte[] imageBytes = stream.ToArray();
+                string data = Convert.ToBase64String(imageBytes);
+                data = "data:image/" + extension + ";base64," + data;
+                promise.Resolve(data);
+            }
+            else
+            {
+                promise.Reject(ErrorUnableToSnapshot, "Unsupported result: " + result + ". Try one of: file | base64 | data-uri");
+            }
+        }
     }
 }

windows/RNViewShot/RNViewShotModule.cs

@@ -1,6 +1,8 @@
 using Newtonsoft.Json.Linq;
 using ReactNative.Bridge;
+using ReactNative.UIManager;
 using System;
+using System.IO;
 using System.Collections.Generic;
 using Windows.ApplicationModel.Core;
 using Windows.UI.Core;
@@ -12,14 +14,15 @@ namespace RNViewShot
     /// </summary>
     class RNViewShotModule : ReactContextNativeModuleBase
     {
-        private ReactContext reactContext;
+        private const string ErrorUnableToSnapshot = "E_UNABLE_TO_SNAPSHOT";
+        private readonly ReactContext _reactContext;
 
         /// <summary>
         /// Instantiates the <see cref="RNViewShotModule"/>.
         /// </summary>
         public RNViewShotModule(ReactContext reactContext) : base(reactContext) 
         {
-            this.reactContext = reactContext;
+            this._reactContext = reactContext;
         }
 
         /// <summary>
@@ -34,10 +37,9 @@ namespace RNViewShot
         }
 
         [ReactMethod]
-        public void takeSnapshot(int tag, JObject options, IPromise promise) {
-            // Android Equivalent Code
-            //ReactApplicationContext context = getReactApplicationContext();
-            //String format = options.hasKey("format") ? options.getString("format") : "png";
+        public void takeSnapshot(int tag, JObject options, IPromise promise)
+        {
+            string format = options["format"] != null ? options.Value<string>("format") : "png";
             //Bitmap.CompressFormat compressFormat =
             //        format.equals("png")
             //                ? Bitmap.CompressFormat.PNG
@@ -48,31 +50,35 @@ namespace RNViewShot
             //                : null;
             //if (compressFormat == null)
             //{
-            //    promise.reject(ViewShot.ERROR_UNABLE_TO_SNAPSHOT, "Unsupported image format: " + format + ". Try one of: png | jpg | jpeg");
+            //    promise.reject(ErrorUnableToSnapshot, "Unsupported image format: " + format + ". Try one of: png | jpg | jpeg");
             //    return;
             //}
-            //double quality = options.hasKey("quality") ? options.getDouble("quality") : 1.0;
-            //DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
-            //Integer width = options.hasKey("width") ? (int)(displayMetrics.density * options.getDouble("width")) : null;
-            //Integer height = options.hasKey("height") ? (int)(displayMetrics.density * options.getDouble("height")) : null;
-            //String result = options.hasKey("result") ? options.getString("result") : "file";
-            //Boolean snapshotContentContainer = options.hasKey("snapshotContentContainer") ? options.getBoolean("snapshotContentContainer") : false;
+            double quality = options["quality"] != null ? options.Value<double>("quality") : 1.0;
+            int? width = options["width"] != null ? options.Value<int?>("width") : null;
+            int? height = options["height"] != null ? options.Value<int?>("height") : null;
+            string result = options["result"] != null ? options.Value<string>("result") : "file";
+            bool snapshotContentContainer = options["snapshotContentContainer"] != null ? options.Value<bool>("snapshotContentContainer") : false;
+
+            UIManagerModule uiManager = this._reactContext.GetNativeModule<UIManagerModule>();
+            uiManager.AddUIBlock(new ViewShot(tag));
+
             //try
             //{
-            //    String name = options.hasKey("filename") ? options.getString("filename") : null;
-            //    File tmpFile = "file".equals(result) ? createTempFile(getReactApplicationContext(), format, name) : null;
-            //    UIManagerModule uiManager = this.reactContext.getNativeModule(UIManagerModule.class);
-            //    uiManager.addUIBlock(new ViewShot(tag, format, compressFormat, quality, width, height, tmpFile, result, snapshotContentContainer, promise));
+            //    string name = options["filename"] != null ? options.Value<string>("filename") : null;
+            //    //File tmpFile = "file" == result ? createTempFile(this._reactContext, format, name) : null;
+            //    UIManagerModule uiManager = this._reactContext.GetNativeModule<UIManagerModule>();
+            //    //uiManager.addUIBlock(new ViewShot(tag, format, compressFormat, quality, width, height, tmpFile, result, snapshotContentContainer, promise));
             //}
-            //catch (Exception e) {
-            //    promise.reject(ViewShot.ERROR_UNABLE_TO_SNAPSHOT, "Failed to snapshot view tag "+tag);
+            //catch (Exception e)
+            //{
+            //    promise.reject(ErrorUnableToSnapshot, "Failed to snapshot view tag " + tag);
             //}
 
             //Bitmap bitmap = new Bitmap(Screen.PrimaryScreen.Bounds.Width, Screen.PrimaryScreen.Bounds.Height);
             //Graphics graphics = Graphics.FromImage(bitmap as Image);
             //graphics.CopyFromScreen(0, 0, 0, 0, bitmap.Size);
             //bitmap.Save("c:\\screenshot.jpeg", ImageFormat.Jpeg);
-            promise.Resolve("This is working!");
+            promise.Resolve("Format: " + format + " Quality: " + quality);
         }
     }
 }

windows/RNViewShot/ViewShot.cs

@@ -3,10 +3,24 @@ using System.Collections.Generic;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
+using ReactNative.UIManager;
 
 namespace RNViewShot
 {
-    class ViewShot
+    public class ViewShot : IUIBlock
     {
+        private int tag;
+
+        public ViewShot(int tag)
+        {
+            this.tag = tag;
+        }
+
+        public void Execute(NativeViewHierarchyManager nvhm)
+        {
+            var view = nvhm.ResolveView(this.tag);
+
+            string depObj = view.ToString();
+        }
     }
 }