HowTo save image as transparent PNG?

Hi @all!

I want to use the SfImageEditor as a signature control and save the image as a transparent PNG file.
Is this possible?

Thanks for any help
Greetings

Thomas

15 Replies

MP Michael Prabhu M Syncfusion Team September 13, 2018 10:59 AM UTC

Hi Thomas, 
 
Greetings from Syncfusion, currently we don't have support for saving image as a transparent PNG but this feature is under development and it will be available in our upcoming Volume 3 release which is scheduled to be rolled out at the end of September 2018. We appreciate your patience until then. 
 
Thanks, 
Michael  




TK Thomas Klocker September 13, 2018 12:15 PM UTC

Hi Michael!

These are great News! Thanks for your answer. Looking forward for the Volume 3 Release

Greetings
Thomas


CC CT CHANG replied to Michael Prabhu M September 14, 2018 10:06 PM UTC

Hi Thomas, 
 
Greetings from Syncfusion, currently we don't have support for saving image as a transparent PNG but this feature is under development and it will be available in our upcoming Volume 3 release which is scheduled to be rolled out at the end of September 2018. We appreciate your patience until then. 
 
Thanks, 
Michael  



That great and looking forward of this feature!


KE Kevin February 20, 2020 03:28 PM UTC

Did feature this get implemented? Is there any documentation anywhere?


DD Devakumar Dhanapoosanam Syncfusion Team February 21, 2020 09:41 AM UTC

Hi Kevin,   
   
Query: Did feature this get implemented?   
  
Yes. The required feature “To save the Trasparent png image” has been implemented.  
  
Query: Is there any documentation anywhere?  
  
Yes. We already added the needed information to expose the required feature as per in below UG  
  
   
Please let us know if you need any further assistance on this and please don't hesitate to contact us.   
 
Regards, 
Devakumar D 



KE Kevin February 21, 2020 01:16 PM UTC

Thanks Devakumar.

I was able to use the png save, once setting a transparent image in the editor

if (editor.Bitmap == null)
{   
editor.Bitmap = Bitmap.CreateBitmap(500, 500, Bitmap.Config.Argb8888);
}

Is there a way to give the image bounds a background color?  Or set a border?  As now it's not very clear where the image starts, and the background begins... 


For example:


Ideally, a different background tint under the red box illustrated here... Or a border:




RS Ramya Soundar Rajan Syncfusion Team February 24, 2020 01:03 PM UTC

Hi Kevin, 
 
With our current implementation, it is not possible to achieve your requirement. We will check any other possibilities and update the complete details on February 25,2020 
 
Regards, 
Ramya S 



KE Kevin February 24, 2020 01:14 PM UTC

Thanks Ramya - I appreciate it


HM Hemalatha Marikumar Syncfusion Team February 25, 2020 02:44 PM UTC

Hi Kevin, 
 
Thanks for your patience. 
 
We have checked the possibility to show the transparent image’s bounds by using ActualImageRenderedBounds property which is hold the actual image bounds once image has been loaded. With the help of CustomView, you can load any view with that actual image bounds to have a border look on Transparent Image as per in below code snippet 
 
CodeSnippet[C#]: 
 
private async void Editor_OnImageLoaded(object sender, ImageLoadedEventArgs args)
        {
            await Task.Delay(1000);
 
  
            SfBorder border = new SfBorder()
            {
                BorderColor = Color.Red,
                BorderWidth = 3
            };
            
            editor.AddCustomView(border, new CustomViewSettings() { Bounds = new Rectangle(0,0,(editor.ActualImageRenderedBounds.Width+ border.BorderWidth - editor.ActualImageRenderedBounds.X),
                (editor.ActualImageRenderedBounds.Height - editor.ActualImageRenderedBounds.Y+border.BorderWidth))});
        
        }
 
 
 
I hope this information helps. If you need any further assistance, please don't hesitate to contact us. 
 
Regards, 
Hemalatha M. 
 



AS Anil Simon replied to Devakumar Dhanapoosanam March 15, 2021 02:57 AM UTC

Hi Kevin,   
   
Query: Did feature this get implemented?   
  
Yes. The required feature “To save the Trasparent png image” has been implemented.  
  
Query: Is there any documentation anywhere?  
  
Yes. We already added the needed information to expose the required feature as per in below UG  
  
   
Please let us know if you need any further assistance on this and please don't hesitate to contact us.   
 
Regards, 
Devakumar D 


Hi,

Has this been fixed for android as well? When i load up a .PNG image into SFImageEditor, edit it and then save it, i see that its turning the transparent background to black. Is there any way to fix this?

This is an android only problem i see.
SFImageEditor Version is 18.4.0.47

Thanks!


SS Sridevi Sivakumar Syncfusion Team March 16, 2021 12:41 PM UTC

Hi Anil Simon,

We have analysed your requirement, we would like to inform you that in our SfImageEditor image will be saved in .Jpg format.  So, we can't see the transparent background.

You can get saved images in Transparent background by saving the image in .png format as per the  below code snippet, we have called the editor.Save(".png")  in button click event.

Code snippet:

[XAML]:
 
        <Grid Margin="0,30,0,0"> 
            <Grid.RowDefinitions> 
                <RowDefinition  Height="50"/> 
                <RowDefinition Height="*"/> 
            </Grid.RowDefinitions> 
            <Button Text="Click to save" Clicked="Button_Clicked"/> 
            <imageeditor:SfImageEditor Grid.Row="1" x:Name="editor" Source="{Binding Image}"  /> 
        </Grid> 

[C#]:
 
        private void Button_Clicked(object sender, EventArgs e) 
        { 
            editor.Save(".png"); 
        } 

We have prepared a sample for your requirement, Please have a sample from the below link
https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample942531614


For more information about Save image editor edited image
https://help.syncfusion.com/xamarin/image-editor/save

Let us know if you need any further assistance.

Regards,
Sridevi S.
 
 



AS Anil Simon replied to Sridevi Sivakumar March 21, 2021 01:38 AM UTC

Hi Anil Simon,

We have analysed your requirement, we would like to inform you that in our SfImageEditor image will be saved in .Jpg format.  So, we can't see the transparent background.

You can get saved images in Transparent background by saving the image in .png format as per the  below code snippet, we have called the editor.Save(".png")  in button click event.

Code snippet:

[XAML]:
 
         
             
                 
                 
             
           
             
         

[C#]:
 
        private void Button_Clicked(object sender, EventArgs e) 
        { 
            editor.Save(".png"); 
        } 

We have prepared a sample for your requirement, Please have a sample from the below link
https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample942531614


For more information about Save image editor edited image
https://help.syncfusion.com/xamarin/image-editor/save

Let us know if you need any further assistance.

Regards,
Sridevi S.
 
 


Hi, 

Thank you for the reply. This solution should be fine for normal scenarios where the image is saved into the device. However, my project dictates using the image stream.
When reviewing the imageStream, i see that it is indeed of  .png format. However, the black background is added.
Note: This occurs only on android.


public class CustomImageEditor: SfImageEditor
    {
 public CustomImageEditor()
        {
            Save(".png");
            ImageSaving += SavingFunction;
        }

        private void SavingFunction(object sender, ImageSavingEventArgs args)
        {
            var imageDetails =  args.Stream
              /* send the imageDetails to parent controller */
        }





ET Eswaran Thirugnanasambandam Syncfusion Team March 23, 2021 02:58 PM UTC

Hi Anil Simon, 
 
Thanks for your patience. 
 
We checked the reported query, and we can display the transparent image without black background by saving the image as PNG file format. To achieve that we have removed the default save toolbar and added a customer save toolbar. So, when clicking the custom save toolbar, we have saved the image as PNG. The code snippet is provided below: 
 
public class CustomImageEditor : SfImageEditor 
    { 
        public CustomImageEditor() 
        { 
            this.SetToolbarItemVisibility("save", false); 
            this.ToolbarSettings.ToolbarItems.Add(new HeaderToolbarItem() { Text = "Save", Name="Save" }); 
            ToolbarSettings.ToolbarItemSelected += ToolbarSettings_ToolbarItemSelected; 
            ImageSaving += SavingFunction; 
        } 
 
        private void ToolbarSettings_ToolbarItemSelected(object sender, ToolbarItemSelectedEventArgs e) 
        { 
            if (e.ToolbarItem.Text == "Save") 
            { 
                // Save the image as png file 
                this.Save(".png"); 
            } 
        } 
 
        private void SavingFunction(object sender, ImageSavingEventArgs args) 
        { 
            var imageDetails = args.Stream; 
            args.Cancel = true; 
            /* send the imageDetails to parent controller */ 
            Navigation.PushAsync(new ImagePage(imageDetails)); 
        } 
    } 
   
Based on your requirement we have prepared a sample to display the transparent image without black background when saving from image stream. The sample link is provided below. 
 
 
Please check the attached sample and let us know if you have any other concerns. 
 
Regards, 
Eswaran 



AS Anil Simon March 24, 2021 12:55 AM UTC

Hi,

Thank you for the reply.
This fix works.

Regards,
Anil


SS Sridevi Sivakumar Syncfusion Team March 24, 2021 05:53 AM UTC

Hi Anil Simon ,

Thanks for your update. We are glad to hear that given solution works at your end.

Please let us know if you need any further assistance.

Regards,
Sridevi S.
 


Loader.
Up arrow icon