Save an Image with superimposed Label on the device

Question

I have some images in my ftp web space, and through this method I can view them on the screen, and above them I insert a Label.

var ImageUrl = "ftp://xxxxxxxxx.jpg";

//Download Image
byte[] ImgByte1 = WebClient.DownloadData(ImageUrl);
MemoryStream mStream1 = new MemoryStream(ImgByte1);

ObservableCollection<FraseClass> listFrasi = new ObservableCollection<FraseClass>
 {
    new FraseClass{Source=ImageSource.FromStream(() => mStream1)},
 }

XAML

<Image 
     Source="{Binding Source}"/>
<Label 
     Text="Hello"/>

I am looking for a way to be able to save the image on the device with the text superimposed. I tried to search but couldn't find anything to fix my problem

Cherry Bu - MSFT · Answer 1 · 2021-04-25T08:15:31.333

I am looking for a way to be able to save the image on the device with the text superimposed. I tried to search but couldn't find anything to fix my problem

According to your description, you want to save image that downloadind from url into local storage, am I right?

If yes, I suggest you can use Xamarin.Forms DependencyService to do this.

Firstly, create an interface in shared code.

public interface IImageFile
{
    void SaveImage(string name, byte[] data, string location = "temp");
}

Then implement the interface on Android platform. Don't forget to register the platform implementations.

[assembly: Dependency(typeof(ImageFile))]
namespace FormsSample.Droid
{
public class ImageFile : IImageFile
{
    public void SaveImage(string name, byte[] data, string location = "temp")
    {
        var documentsPath = System.Environment.GetFolderPath(System.Environment.SpecialFolder.Personal);
        documentsPath = System.IO.Path.Combine(documentsPath, "Orders", location);
        Directory.CreateDirectory(documentsPath);

        string filePath = System.IO.Path.Combine(documentsPath, name);
        using (FileStream fs = new FileStream(filePath, FileMode.OpenOrCreate))
        {
            int length = data.Length;
            fs.Write(data, 0, length);
        }
    }

  
}
}

Finally, resolving platform implementations with the DependencyService

 private void btn1_Clicked(object sender, EventArgs e)
    {

        var ImageUrl = "ftp://xxxxxxxxx.jpg";

        //Download Image
        byte[] ImgByte1 = WebClient.DownloadData(ImageUrl);
        DependencyService.Get<IImageFile>().SaveImage("ImageName.jpg", ImgByte1, "imagesFolder");
    }

you need to add permission WRITE_EXTERNAL_STORAGE and READ_EXTERNAL_STORAGE in AndroidMainfeast.xml, then you also need to Runtime Permission Checks in Android 6.0. Using the following code in Mainactivity.cs to request permissions.

private void checkpermission()
{
    if (ContextCompat.CheckSelfPermission(this, Manifest.Permission.WriteExternalStorage) == (int)Permission.Granted)
    {
        // We have permission, go ahead and use the writeexternalstorage.
    }
    else
    {
        // writeexternalstorage permission is not granted. If necessary display rationale & request.
    }
    if (ContextCompat.CheckSelfPermission(this, Manifest.Permission.ReadExternalStorage) == (int)Permission.Granted)
    {
        // We have permission, go ahead and use the ReadExternalStorage.
    }
    else
    {
        // ReadExternalStorage permission is not granted. If necessary display rationale & request.
    }
}

Detailed info about IOS platform, you can take a look:

How to download image and save it in local storage using Xamarin-Forms.?

Update:

If you want to add text watermark on image, you need to convert byte[] to bitmap to add text firstly.

 Android.Graphics.Bitmap mutableBitmap;
    Android.Graphics.Bitmap bitmap;
    public void ConvertImage(byte[] imageArray)
    {
         bitmap = BitmapFactory.DecodeByteArray(imageArray, 0, imageArray.Length);
       
    }
   
    public void Watermark()
    {            
        mutableBitmap = bitmap.Copy(Android.Graphics.Bitmap.Config.Argb8888, true);
        Canvas canvas = new Canvas(mutableBitmap);
        // Canvas canvas = new Canvas(bitmap);
        Paint paint = new Paint();
        paint.Color = Android.Graphics.Color.Black;
        paint.TextSize = 50;
        canvas.DrawText("hellod world", 50, 50, paint);
    }

Then convert bitmap into byte[] to save image into local storage.

 public void convertbitmap(Bitmap bitmap)
    {
        bitmap = mutableBitmap;
        MemoryStream stream = new MemoryStream();
        bitmap.Compress(Bitmap.CompressFormat.Png, 0, stream);
        byte[] bitmapData = stream.ToArray();
    }

why would he need DependencyService to do this? He can write directly to a file from the NET Standard project. I believe that he is actually asking about capturing a specific view as an image — Jason, Apr 25 '21 at 02:26
@Jason I think op want to save image that download from url into local device storage in Xamarin.forms, maybe I understand something wrong. — Cherry Bu - MSFT, Apr 25 '21 at 02:36
With what you have suggested I can save an image on the device, which is what I need, but what I would like to do precisely is to have a saved image with some text inserted inside it. I have updated the code with a practical example — trecchino, Apr 25 '21 at 07:28
@trecchino You want to add text watermark on image, please see my update. — Cherry Bu - MSFT, Apr 25 '21 at 08:12

Save an Image with superimposed Label on the device

1 Answers1