How to do images editing in ionic3?

Ionic Framework ionic-v3
1

Hello there,

I want to create responsive boxes on image by user. I mean user can select the objects in image. By tapping on image we need to show one responsive box and that can be responsive, i.e can increase or decrease.

Please help me how to implement it.

Thanks

2

See: Any image editing plugin/library available for Ionic 3?

3

Thanks for ur response. But i need to create responsive boxes and save on images, so that objects in image will be highlighted by using boxes or custom shapes. Can u please tell me how to that?

4

What have you tried so far? Have code examples of what you tried? Maybe show a picture of what you mean because…I’m not fully sure what it is you want. Touching an image in a certain spot like creates a square over the image?

5

Sure, In a image we need to select objects by creating boxes or custom shapes on our wish(as many we want), we alse need to remove the shapes if u dont want before saving image.The following is reference image, in that square boxes are created by user as many he want and he can remove also before saving image.

Story%202
Story 2.jpg750×1334 117 KB
.

6

ya so you just want to use html canvas. Canvases can load images and then you can draw squares or any shape really on there. After that it’s going to be pretty custom to the user interface you want. But ya that’s it, load the image into a canvas, build a user interface where the user can select different tools and then draw the squares on there.

7

Thank you so much for ur suggestion, can we have any reference url or blog ?

8

Ya the mozilla docs are always a good place to start: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

That will probably get you everything you need to get started, just follow through each section listed in the sidebar:

55%20AM
Screen Shot 2018-10-09 at 11.26.55 AM.png578×1296 68.2 KB

You can see it covers drawing shapes, using images, and hit regions. Which together with some touch position code inside the canvas should give you everything you need, except the actual user interface you want to build with it.

You’d also need the ionic native image picker or camera plugin to load the image itself, but after that it should all work the same whether it’s ionic or just a responsive website.