Add Screenshot button

src/MjmlVisualizer/Helpers/WebBrowserHelper.cs

@@ -0,0 +1,68 @@
+using System;
+using System.Drawing;
+using System.Drawing.Imaging;
+using System.IO;
+using System.Windows.Forms;
+
+namespace MjmlVisualizer.Helpers
+{
+    public static class WebBrowserHelper
+    {
+        private static WebBrowser _webBrowser;
+        private static string _outputFile;
+        private static double _width;
+
+        public static void TakeScreenshot(string outputFile, string html, double width)
+        {
+            _outputFile = outputFile;
+            _width = width;
+
+            _webBrowser = new WebBrowser();
+            _webBrowser.ProgressChanged += wb_ProgressChanged;
+            _webBrowser.ScriptErrorsSuppressed = true;
+            _webBrowser.ScrollBarsEnabled = false;
+
+            var tempPath = SaveHtmlToTempFile(html);
+
+            _webBrowser.Navigate(tempPath);
+        }
+
+        private static string SaveHtmlToTempFile(string html)
+        {
+            var path = Path.Combine(Path.GetTempPath(), "index.html");
+            File.WriteAllText(path, html);
+            return path;
+        }
+
+        private static void wb_ProgressChanged(object sender, WebBrowserProgressChangedEventArgs e)
+        {
+            if (e.CurrentProgress != e.MaximumProgress)
+            {
+                return;
+            }
+
+            _webBrowser.ProgressChanged -= wb_ProgressChanged;
+
+            try
+            {
+                var scrollHeight = _webBrowser.Document.Body.ScrollRectangle.Height;
+                _webBrowser.Size = new Size(Convert.ToInt32(_width), scrollHeight);
+
+                var bitmap = new Bitmap(_webBrowser.Width, _webBrowser.Height);
+
+                for (var x = 0; x < bitmap.Width; x++)
+                {
+                    for (var y = 0; y < bitmap.Height; y++)
+                    {
+                        bitmap.SetPixel(x, y, Color.Black);
+                    }
+                }
+
+                _webBrowser.DrawToBitmap(bitmap, new Rectangle(0, 0, _webBrowser.Width, _webBrowser.Height));
+
+                bitmap.Save(_outputFile, ImageFormat.Jpeg);
+            }
+            catch { }
+        }
+    }
+}

src/MjmlVisualizer/MjmlVisualizer.csproj

@@ -84,6 +84,7 @@
   </ItemGroup>
   <ItemGroup>
     <Compile Include="Behaviors\BrowserBehavior.cs" />
+	<Compile Include="Helpers\WebBrowserHelper.cs" />
     <Compile Include="MjmlVisualizer.cs" />
     <Compile Include="Models\ResponseBody.cs" />
     <Compile Include="Models\RequestBody.cs" />

src/MjmlVisualizer/Repositories/MjmlRepository.cs

@@ -10,8 +10,8 @@ namespace MjmlVisualizer.Repositories
     public class MjmlRepository
     {
         private const string _apiURL = "https://api.mjml.io/v1/render";
-        private const string _userName = "c4303cb3-7710-417d-9bc7-da57885b3432";
-        private const string _password = "acaca040-7197-4450-b057-5bb3465f3459";
+        private const string _userName = "#{MJML_USERNAME}#";
+        private const string _password = "#{MJML_PASSWORD}#";
         private readonly HttpClient _httpClient;
 
         public MjmlRepository()

src/MjmlVisualizer/Windows/MjmlVisualizerWindow.xaml

@@ -66,7 +66,7 @@
             </Button>
         </Grid>
 
-        <TabControl Grid.Row="1" Background="Transparent">
+        <TabControl Grid.Row="1" Background="Transparent" BorderThickness="0">
             <TabItem Header="MJML">
                 <Grid>
                     <Grid.RowDefinitions>
@@ -155,8 +155,32 @@
                     </Grid>
                 </Grid>
             </TabItem>
+
             <TabItem Header="Preview">
-                <WebBrowser behaviors:BrowserBehavior.Html="{Binding HTML}" />
+                <Grid>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="*" />
+                        <RowDefinition Height="Auto" />
+                    </Grid.RowDefinitions>
+
+                    <Border BorderThickness="1" BorderBrush="{DynamicResource {x:Static SystemColors.ActiveBorderBrushKey}}">
+                        <WebBrowser x:Name="PreviewWebBrowser" behaviors:BrowserBehavior.Html="{Binding HTML}" />
+                    </Border>
+
+                    <Grid Grid.Row="1" Margin="0 10">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="Auto" />
+                        </Grid.ColumnDefinitions>
+
+                        <Button
+                            Grid.Column="2"
+                            Click="OnPreviewSaveButtonClick"
+                            Padding="22 6">
+                            Save
+                        </Button>
+                    </Grid>
+                </Grid>
             </TabItem>
         </TabControl>
     </Grid>

src/MjmlVisualizer/Windows/MjmlVisualizerWindow.xaml.cs

@@ -1,4 +1,5 @@
-using MjmlVisualizer.ViewModels;
+using MjmlVisualizer.Helpers;
+using MjmlVisualizer.ViewModels;
 using System.IO;
 using System.Windows;
 using SaveFileDialog = System.Windows.Forms.SaveFileDialog;
@@ -55,5 +56,26 @@ private void OnHtmlSaveButtonClick(object sender, RoutedEventArgs e)
 
             File.WriteAllText(safeFileDialog.FileName, (DataContext as MjmlVisualizerViewModel).HTML);
         }
+
+        private void OnPreviewSaveButtonClick(object sender, RoutedEventArgs e)
+        {
+            var safeFileDialog = new SaveFileDialog
+            {
+                Filter = "JPEG Image|*.jpg",
+                Title = "Save a JPEG Image"
+            };
+
+            safeFileDialog.ShowDialog();
+
+            if (string.IsNullOrEmpty(safeFileDialog.FileName))
+            {
+                return;
+            }
+
+            WebBrowserHelper.TakeScreenshot(
+                safeFileDialog.FileName,
+                (DataContext as MjmlVisualizerViewModel).HTML,
+                PreviewWebBrowser.ActualWidth);
+        }       
     }
 }