How to load image from camera and insert it to PDF document in Xamarin Forms

The Syncfusion Essential PDF is a Xamarin PDF library used to create, read, and edit PDF documents. Using this library, you can load images from the camera and insert it to the PDF document in Xamarin Forms.

Steps to load images from the camera and insert it to PDF document programmatically

1. Create a new C# Xamarin.Forms application.

2. Select the project template and required platforms to deploy the application. In this application, the portable assemblies to be shared across multiple platforms, the .NET Standard code sharing strategy has been selected. For more details about code sharing, refer to this link.
   Note:

   If the .NET Standard is not available in the code-sharing strategy, the Portable Class Library can be selected.

3. Install the Syncfusion.Xamarin.Pdf NuGet package as a reference to your .NET Framework application from NuGet.org.

4. Add new Forms XAML page in the portable project if there is no XAML page is defined in the App class or, proceed to the next step.

1. To add the new XAML page, right-click the project and select Add -> New Item and add a Forms XAML Page from the list. Name it as MainPage.
2. In-App class of portable project (App.cs), replace the existing constructor of App class with the following code sample that invokes the MainPage.

   public App()
   {
       InitializeComponent();
       MainPage = new MainPage();
   }
   

5. In the MainPage.xaml, add code as follows.

   <?xml version="1.0" encoding="utf-8" ?>
   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:local="clr-namespace:ImageFromCamera"
                x:Class="ImageFromCamera.MainPage">
    
       <Grid BackgroundColor="White" Padding="20,70,20,0">
           <Grid.RowDefinitions>
               <RowDefinition Height="0.6*" />
               <RowDefinition Height="1" />
               <RowDefinition Height="50" />
               <RowDefinition Height="0.6*" />
               <RowDefinition Height="*" />
           </Grid.RowDefinitions>
           <Grid Grid.Row="0">
               <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="*" />
                   <ColumnDefinition Width="1" />
                   <ColumnDefinition Width="*" />
               </Grid.ColumnDefinitions>
               <Grid Grid.Column="0"  BackgroundColor="Transparent">
                   <Grid.RowDefinitions>
                       <RowDefinition Height="1.5*" />
                       <RowDefinition Height="*" />
                   </Grid.RowDefinitions>
                   <Image x:Name="TakePhoto"  AutomationId="TakePhoto" Grid.Row="0" Source="{Binding TakePic}" >
                       <Image.GestureRecognizers>
                           <TapGestureRecognizer Tapped="TakeAPhotoTapped" NumberOfTapsRequired="1" />
                       </Image.GestureRecognizers>
                   </Image>
                   <Label FontSize="18" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="1" TextColor="#333333" Text="Take a photo" />
               </Grid>
           </Grid>
           <StackLayout Grid.Row="1" Padding="0,5,0,0" >
               <StackLayout  HeightRequest="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="#808080" />
           </StackLayout>
       </Grid>
   </ContentPage>
   

6. Include the following namespace in MainPage.xaml.cs file.

   using Syncfusion.Drawing;
   using Syncfusion.Pdf;
   using Syncfusion.Pdf.Graphics;
   

7. Include the following code sample to launch the camera and get the image stream from the taken picture in MainPage.xaml.cs file.

   public MainPage()
   {
       InitializeComponent();
    
       MessagingCenter.Subscribe<byte[]>(this, "ImageSelected", (args) =>
       {
           Device.BeginInvokeOnMainThread(() =>
           {
               var imageStream = new MemoryStream(args);
               GetImageStream(imageStream);
           });
       });
   }
    
   void TakeAPhotoTapped(object sender, System.EventArgs e)
   {
       Device.BeginInvokeOnMainThread(() =>
       {
           var fileName = SetImageFileName();
           DependencyService.Get<CameraInterface>().LaunchCamera(FileFormatEnum.JPEG, fileName);
       });
   }
    
   private string SetImageFileName(string fileName = null)
   {
       if (Device.RuntimePlatform == Device.Android)
       {
           if (fileName != null)
               App.ImageIdToSave = fileName;
           else
               App.ImageIdToSave = App.DefaultImageId;
    
           return App.ImageIdToSave;
       }
       else
       {
           if (fileName != null)
           {
               App.ImageIdToSave = fileName;
               return fileName;
           }
           else
               return null;
       }
   }
   

8. Include the following code sample in the GetImageStream method of MainPage.xaml.cs file to load the image from the camera and insert it to the PDF document.

   //Create a new PDF document
   PdfDocument doc = new PdfDocument();
    
   //Add a page to the document
   PdfPage page = doc.Pages.Add();
    
   //Create PDF graphics for the page
   PdfGraphics graphics = page.Graphics;
    
   //Load image from the camera 
   PdfBitmap image = new PdfBitmap(imageStream);
    
   //Draw the image
   graphics.DrawImage(image, 0, 0, page.GetClientSize().Width, page.GetClientSize().Height);
    
   //Save the document to the stream
   MemoryStream stream = new MemoryStream();
   doc.Save(stream);
    
   //Close the document
   doc.Close(true);
    
   stream.Position = 0;
    
   //Save the stream as a file in the device and invoke it for viewing
   Xamarin.Forms.DependencyService.Get<ISave>().SaveAndView("Sample.pdf", "application/pdf", stream);
   

9. Download the helper files from this link and add them to the mentioned project. These helper files allow you to save the stream as a physical file and open the file for viewing.

• Create a new XML file with the name of provider_paths.xml under the Android project Resources folder and add the following code in it.

Ex: Resources/xml/provider_paths.xml

<?xml version="1.0" encoding="utf-8" ?> 
<paths xmlns:android="http://schemas.android.com/apk/res/android">
  <external-path name="external_files" path="."/>
</paths>

• Add the following code to the AndroidManifest.xml file located under Properties/AndroidManifest.xml.

  <?xml version="1.0" encoding="utf-8"?>
  <manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="com.companyname.CropPdfPage">
      <uses-sdk android:minSdkVersion="21" android:targetSdkVersion="27" />
      <application android:label="CropPdfPage.Android">
        <provider android:name="android.support.v4.content.FileProvider"
                   android:authorities="${applicationId}.provider"
                   android:exported="false"
                   android:grantUriPermissions="true">
          <meta-data android:name="android.support.FILE_PROVIDER_PATHS"
                     android:resource="@xml/provider_paths" />
        </provider>
      </application>
  </manifest>
  

10. Compile and execute the application. This creates the pdf document with an image file that has been loaded from the camera.

Download the complete working sample from ImageFromCamera.zip.

Take a moment to peruse the documentation. You can find the options like creating a table using the PdfLightTable and PdfGrid, cell and row customization in PdfLightTable and PdfGrid, built-in table styles to PdfGrid, pagination in PdfGrid and PdfLightTable, and features like inserting an image in a new PDF document, Image pagination, and Image extraction with code examples.

Refer to this link to explore a rich set of Syncfusion Essential PDF features. 

See Also:

Insert an image to PDF in Xamarin Forms

Convert image to PDF in Windows Forms

Insert image in PDF table in Windows Forms