Canvas Drawing + Saving Images as Files with Ionic

Learn to create a canvas drawing app using Ionic and storing the canvas images to your file system!
Join my special Ionic School today: ionicacademy.com/
Video Courses, Project Templates, Community & the Support you deserve to learn Ionic!
#############################
Want to read instead of watch? Here's the full tutorial: devdactic.com/...
Want more tutorials? Here you go! devdactic.com/
Just getting started? Take my 7 Day Ionic Crash Course: ionicacademy.c...
#############################
My Private Daily Vlog: / @solopreneuradventures...
You can also find me
on / schlimmson
on / devdactic
on / simongrimm_
#############################

[@talhasahi1458]

please also make tutorials on ionic 5

[@carlosgaleanohn]

Wow... Thanks for all that you do for us, Ionic Developers Community. Any tutorial that you created, it's helper for me! My best from Honduras Central America :)

[@galaxies_dev]

Thanks a lot Carlos, really happy to help the community!

[@zefred999]

Is there an updated version of this for the latest version of ionic (ionic 4)? I'm a student and I would happily buy it from ionic marketplace if there is one.

[@bradybrown325]

I tried to copy and paste this to ionic 4 but I don't know what to change. I would also buy this off from the marketplace of there is one.

[@galaxies_dev]

Alright, I'll try to work on an updated version!

[@zefred999]

@@galaxies_dev This guy a legend

[@mriganksingh7586]

awesome and new content yet again

[@giovanniapple9150]

Hi Simon, nice video and content!.
I'm wondering if it's possible to draw a section on a map, like a circular outline on a picture or on a map (using NativeGeocoder or similar)?

[@ionwizard606]

i think its possible.create the component and put it top of google or whatever map that you are using

[@niamreg_dev]

Awesome content! You are awesome! :)

[@galaxies_dev]

Thanks Germain :)

[@sadelbrid]

Does this save to camera roll? Trying to find a way to do this that isn't deprecated

[@kusdiyanto9769]

Hi simon
Could you make a tutorial
For saving images from server
To ionic
android picture folder
I have 5 picture product image that already load on ionic slide
But i.m failed to make download button function
That can save current image and all image
It would be great if you make a turorial
Cause it.s so hard to find out there😀
Thanks

[@jorgelogomez8480]

Excellent tutorial I have a question, how would you do to convert a base64 pdf and save it to the device?

[@ivonikolov8278]

Hi Simon and the community. How can I pinch zoom in and out the canvas? Thanks.

[@galaxies_dev]

I don't think you can naturally zoom the canvas, only scale it. But perhaps you could wrap it inside Ionic slides, which allow to zoom with the right settings!

[@AyubIdrees]

What will be the exact location to save image in gallery ?

[@vinhnguyen-lr6mr]

Thanks for wonderfull video. I have the project that I take a photo like scanning after that I can export to file pdf. Could you make a video to show me how to do it? Thanks and best regards.

[@derikmaanda4210]

Did you find a way to do that?

[@princedosi4587]

Can you help me out with how to add image to canvas from our gallery and perform edits on it,I'm not getting any solutions to this.

[@anime017]

hey you got solution ?

[@TylerJaggs]

@@anime017 solution?

[@derikmaanda4210]

Solution anyone?

[@NirajRungrut]

I like your editor interface, what name of editor? and what name of theme ?

[@galaxies_dev]

Visual studio code, and the theme is Atom One Dark

[@NirajRungrut]

@@galaxies_dev It worked! Thank you so much

[@bhaveshlathigara]

Hi Simon,
I am seeing your videos regularly and it’s awesome. Thank You.
I am trying to make same demo in Ionic 5 but getting error as below. Can you please provide me any solution or if you can make demo for Ionic 5 as well.
My build is successful so I copied same as you are doing but console giving error.
this.fixedContainer.nativeElement is undefined.
after trying to draw on canvas
this.canvasElement is undefined
Can you please help me to rid out.
Regards.

[@galaxies_dev]

Then I guess your viewchild is not connected correctly to your class if it's undefined?

[@bhaveshlathigara]

Yes it’s connected otherwise I was not be able to compile. But there is no error like this. Thanks for reply.

[@TylerJaggs]

Great video! is there a way of implementing this over an image? we want to be able to use this tool to edit
images in our app. Thanks

[@derikmaanda4210]

Did you find a way to do that?

[@shubhamshetyanavar8333]

Hi simon , i just wanted to know which emulator you are using for the testing purpose ??

[@galaxies_dev]

I'm using Visual Studio Code!

[@galaxies_dev]

I'm mostly using my iPhone or the iOS Simulator!

[@petfrogg]

Will this work offline as a pwa?

[@galaxies_dev]

I'm pretty sure, I don't see any outside connection so it should work :)