.NET Maui Apps | How to convert Image to Base64string and from Base64string to image in MAUI apps.

which means hi you're welcome this is net code  up Channel this channel we facilitate a lot of   dotnet projects and also lessons check our  playlist we have a lot of lessons in Project   4.net murray.net Blazer that is Blazer server and  also Blazer webassembly if today is the first time   of watching a video a lesson from that's good up  then you can just subscribe to this as soon as I   upload a new video you have notification to watch  it this video or this lesson we are going to talk   about how to convert image in your application  that is a Murray app from a normal image to   you basis for string and also vice versa from  base4 strength to normal image why do we have   to convert image to base default string it's very  easy for you to be able to store it in a database   when you have sqlite database in your application  you want to use that to upload images it could be   um e-commerce it could be profile that a person  has to set an image or profile image so when that   image is selected or picked you have to convert  this into base default string so you can never   access to and save it into the sqlite database and  in case you want to display the same image to you   then you have to do it you have to reconvert it  from base default string to normal image for the   user to see so let's take a look on how to do that  now I have some images I'm going to copy these   images here into the folder here now these are the  images so I'm going to grab these images from here so with this I'll just   put them in the solution Explorer but  before that you have to create a new project so I have the demo name as convert demo convert  image to basic default string vice versa I know   one thing is when I'm done with this project or  this lesson I'm going to put it at the description   so go there check the link over there you're  going to have a GitHub link click on this   and you can have access to the source code here  maybe if we like to review it later so let's go so I'll go to my projects folder and that is a solution Explorer so views   then in here what we have the resources where you  have the raw folder I'm going to paste this here so I have these images I can put them in  the images folder as well okay but since   I'm going to convert this I like to put them  in the Raw folder so I have about bookends   contact and a home four Images here okay  now let's see so save that now if I go to   main page the example file there's a Code behind  file and we have this so maybe I like ties to you   use as close view for this so Maybe instead  of having this let's use great to design and   output of this so we have scroll view  then you can have retica or grid View so let's have row definition  and there's going to be four let's make it as four or two and then column definition is going to be  also two as well because you want to have   the label and so it does 30 star 30 70 so in this let's have the  first one and that is a label so this label you want to set the test to image and you want to have the image icon so that is the image and now let's see the sauce now let's set this as source so default you  want to set this to maybe about dot P jpg   so this is a default image that we are setting   and let's go to the next so in here you  want to set this as grade that column one let's copy this we paste it here so inside of this image  you want to use label instead to two labels   and now this is basis the fourth string and now this maybe you would like to set it so let's pass it as base64 string and let's set this as grid dot row so  this is one and grade that column one   column one and here going  to be greater through one one okay now we have this done  let's set their names so X name   and now here it is basically four string so base  64 string and now this is going to be the image   so X name and now this will be the image okay so we have this image like this okay so we have this and now let's set  a button so let's put button on top so we have nice button so you can put this in a stack layout uh retica stack layout like this and now with  this button you want to say that test X select   image so X name vtn selects image let's  have an event so let's generate a new event okay now let's go back to the  Cs and now let's clear this let's let this as well okay so when this button  is clicked what you want to do we have the image   set already so let's set this image here  the first thing that we're going to do let's have using so you can have a variable  yes set as let's encode Stream So encode that stream and now we can set this to a weight  file system so the first thing to do is you   are getting the the location of the file  so file system dot open package file async   and now here the first one that you're  going to use here it is about dot jpg so about the JP that is a file so we want to get  access to the file so we pass in the file name   and you're going to open the file package file  system and and grab it for us aside from that   let's have a create an instance of a memory  stream so we save or let's let's use using as   soon as it finishes it's closes it up for us  so let's use stream or you can say M stream and this is records you new memory stream okay so to do this here we are going  to convert this image so let's set here so converting to base64 string so we can set each M stream so  that is the the file the location   you can set this to so copy two and now with  this we can have access to this mainstream   aside from that let's now convert the  image so we create VAR convert image   is equal to they're going to use the keyword  as convert dot then to basic default string   and I'm going to pass in this memory  stream.2 array and let's set base 64 string Dot test so this is a label okay  it's equal to this convert image   let's run this and see so if I click on this whoa so the image is too big let's  resize the image from this main page   so what we have this label as image let's recite  it so wait request let's say 200 and also height   request let's set this to 100. so let's save  that and now Okay so we have the image over   here as you can see from the base64 string it is  not converted yet so if I click on this button you   can see we have the image converted so that is a  basic default string image so you see we have the now let's let's see we have four Images here so  that's what you're gonna do let's add the model   here so we can run through them quickly  so let's add a class so add the new class   and I'm going to say image  model so images or image model and now this image model  this is public and let's have that string and you can have just image name okay  we can have this name here now let's go to this   list and now on top of this you want to create  a list of this so let's have list of image model then you can say images Accords  you new list of image model now with this we are going to populate  this image so we say image images dot add then we are going to  add this so we say New Image   New Image model and I will pass in the name is that that is about dot jpg so let's  make a copy of this and I add a few ones   so you can just make a copy of  this and we have four images okay so we have this now the  first one we have about the   jpg we have bookings of jpg so let's check that so booking.jpg and we have  contact and home.png so contact and whom and the extension here it is PNG okay so we now have that list here  now what you're going to do here is   to join the conversion you're going  to cut this I'm going to use for each and it's a VAR image and images you want  to specify this so instead of passing in   the name here explicit let's pass in this image  this image is a strength and I just want to hold   so after doing this you want to delay so let's  say tax license and I'll wait and a less delay   for some time before we display the next one so  let's use three seconds that is three thousand and now let's run this so  let's see so it is saying that   image cannot be used cannot convert string  to so let's see what we can do from here let's pass this to string save that and unless um refresh the app so let's go to the main page now where we  have there is we want to at least 70 30   that is the image and let's increase  the size of the image to maybe 200   and that is a 200. okay so this button you want  to say start converting so start converting all right now let's refresh this up so now let's click on this button start  converting as soon as I click on this   we have an exception the system cannot  find the file specified and let's see   so we have the object okay so we have to specify let's see so that is the image dot name instead  okay now let's go to so let's edit this and now   let's go to so let's stop this and see so  we have to clear one okay problem solved   now let's in our page the width here let's put  it to the center for reset which you maybe 100 and now let's set vertica to Center on a horizontal to Center  okay let's run this again so you can see let's increase the  weight of these two let's say 200 okay so as soon as I click on start converting  let's you can see we have the first image it's   going to wait for 30 seconds and let's say it  has to change to get the next image so you can   see that it is changing over here but the image  here it is not changing so let's have a look at it let's see so let's go to you can just stop this and here after a setting up  the text to this we want to set   the image as well okay so with this  base default string we can also say image label dot source so it's equal to so image dot name now let's run this so let's start converting so this is the first  image three seconds second image that is a basic   four string third image and that is it and  now the last one is the fourth image so that   is it so we are looping through the images  to generate their base default string now   the next thing I want to talk about here is how  do you convert this string into the same image   so down here let's see now  this page main page example   after the button you want to have the image  converted so let's have this an image tag so this has to come after this image and now with this you want to have margin  of 20 and let's set the x name of this as image from base so with this we can set this to  let's say vertical option as Center   and horizontal to Center let's save that so  let's copy this image from base name and now   let's go to our page so here we are going  to convert this so after converting this   setting up the name here you want to now  converting from base64 string so converting image from basically for string  so the image that we have here the   string that we have here we are going  to also convert it back to your image   so how are going to do that  let's create the image byte size and let's set this by size two convert Dot and here we're going to use  from base64 string and now we're going   to pass in this convert image so once we  have this we can now copy set memory stream and we can say this memory stream is equal to new then memory stream okay or instead of creating this in my  stream we can just do something like   so while this memory stream is equal to new memory  stream and now here we can pass in whatever that   you want to pass in also we can decide to set it  as as you have this memory stream then equal to we   have this object here and I can pass in inside  of this you can say this shortcut is as new   and we can just copy this image  and paste it in so image size okay now let's set this image from  base dot source so we set this to   let's convert to image source so image source  Dot from stream then here we are calling a method   so we are using a pointer here  and we are pointing at you   this memory stream so let's copy this and  I'll press it here and that is all after   that touch the delay for three seconds then  as you move on to the next one let's run this all right so our page is now  loaded let me just make it small   now I just made some modifications here and I  just set a 2 by item and I'll put it over here   so convert you have this button I'll put this  code and this gets up so check the description   and you have the link for this so click on this  convert now you see we have the image this is to   base default string and that is from base default  string so this is the image that we have here and   it is converting it to this base default string  and now this is for string also array converting   back to image and that's why we have this  so you see we can perform 64 string image   from image and to the same image as well okay  now we have this let's run this um in Android   emulator and let's see if also going to work or  if Android is to support this so I'll close this thank you so let's click on the button and that's the  two bar button over here in the Android device   so I click on this and now let's see so you  see we have the image here and that is also   the image here is around this area  let's format this one so instead   of having this spacing or margin  of 100 you can have margin of 10 so I can do something like this and I will save that okay so let's restart  this again and see the correct view for this so I click on the button again   and now you can see we have from the  before image here and it keeps converting so let's do it again all right so you see we have been able to  do that I did with both in the Android and   also on Windows that is it for this video I'll  put this in a GitHub and I'll put the link and   description so let's go in there and get  this source code view them as well thank   you so much for watching if you like what I'm  doing please subscribe to the channel and also   give me thumbs up as soon as I continue  you have the notification to watch it   thank you take care of yourself and I'm  gonna catch you up in the next video

Channel: Netcode-Hub

Views: 532

Keywords: skip(), scaffolding, assign-role, mobile apps, maui app, mobile app, android, map key, google map api key, google map.api key, api key, context menu, How to use Font Awesome in NET MAUI Mobile and Desktop applications., icons, sqlite database, contact app, carousel in app, display data with listview, list view component, using list view, material designicons, google icons, google fonts, filepicker, fileuploader, camera, access device camera, base64string, convert imag to base64string

Id: rCngb9f_P2o

Length: 26min 4sec (1564 seconds)

Published: Fri Aug 18 2023