add base64 image support

vnext/ReactUWP/Views/Image/ReactImage.cpp

@@ -6,6 +6,7 @@
 #include "ReactImage.h"
 
 #include <winrt/Windows.Web.Http.h>
+#include <winrt/Windows.Security.Cryptography.h>
 
 #include "unicode.h"
 
@@ -75,6 +76,7 @@ namespace react {
       winrt::Uri uri{ facebook::utf8ToUtf16(uriString) };
       winrt::hstring scheme{ uri.SchemeName() };
       bool needsDownload = (scheme == L"http") || (scheme == L"https");
+      bool inlineData = scheme == L"data";
 
       try
       {
@@ -84,16 +86,20 @@ namespace react {
         if (needsDownload)
         {
           memoryStream = co_await GetImageStreamAsync(source);
-
-          if (!memoryStream)
-          {
-            m_onLoadEndEvent(*this, false);
-          }
+        }
+        else if (inlineData)
+        {
+          memoryStream = co_await GetImageInlineDataAsync(source);
         }
 
+        if ((needsDownload || inlineData) && !memoryStream)
+        {
+          m_onLoadEndEvent(*this, false);
+        }
+
         if (!needsDownload || memoryStream)
         {
-          auto surface = needsDownload ?
+          auto surface = needsDownload || inlineData ?
             winrt::LoadedImageSurface::StartLoadFromStream(memoryStream) :
             winrt::LoadedImageSurface::StartLoadFromUri(uri);
 
@@ -166,5 +172,32 @@ namespace react {
 
       return nullptr;
     }
+
+    winrt::IAsyncOperation<winrt::InMemoryRandomAccessStream> GetImageInlineDataAsync(ImageSource source)
+    {
+      size_t start = source.uri.find(',');
+      if (start == std::string::npos || start + 1 > source.uri.length())
+        return nullptr;
+
+      try
+      {
+        co_await winrt::resume_background();
+
+        std::string_view base64String(source.uri.c_str() + start + 1, source.uri.length() - start - 1);
+        auto buffer = winrt::Windows::Security::Cryptography::CryptographicBuffer::DecodeFromBase64String(facebook::react::unicode::utf8ToUtf16(base64String));
+
+        winrt::InMemoryRandomAccessStream memoryStream;
+        co_await memoryStream.WriteAsync(buffer);
+        memoryStream.Seek(0);
+
+        return memoryStream;
+      }
+      catch (winrt::hresult_error const&)
+      {
+        // Base64 decode failed
+      }
+
+      return nullptr;
+    }
   }
 } // namespace react::uwp

vnext/ReactUWP/Views/Image/ReactImage.h

@@ -62,5 +62,6 @@ namespace react {
 
     // Helper functions
     winrt::Windows::Foundation::IAsyncOperation<winrt::Windows::Storage::Streams::InMemoryRandomAccessStream> GetImageStreamAsync(ImageSource source);
+    winrt::Windows::Foundation::IAsyncOperation<winrt::Windows::Storage::Streams::InMemoryRandomAccessStream> GetImageInlineDataAsync(ImageSource source);
   }
 } // namespace react::uwp

vnext/Universal.SampleApp/index.uwp.js

@@ -262,6 +262,15 @@ export default class Bootstrap extends Component {
               onError={() => { console.log('image onError!'); }}
             />
           </View>
+          <View style={{ backgroundColor: 'yellow', marginTop: 15 }}>
+            <Image
+              style={{ width: 66, height: 58 }}
+              source={{ width: 66, height: 58,
+              uri:
+              "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=="
+              }}
+              />
+          </View>
           <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 15 }}>
             <CheckBox
               onValueChange={value => this.setState({ checkBoxIsOn: value })}