How to implement Image manipulation in Jquery or ASP.Net?

Question

---

Dear All,

My Requirement is to develop a page to get car damage details from customer. Page will contain a car image, Customer has to paint parts of the car which reflects damage.

For instance: Red - Crack Blue - Scratch... etc.

Is it possible to do? Is there any off-the shelf components available?

Can anyone please tell me the solution for this?

Regards, Bala.

Answer 1

Is it possible to paint part of the image rather than pixel? Can we save an image (manipulated) in server location?

Let us take an example given in sketch.js.

For Example: When user clicks on eye, Eye should be painted, If it is forehead, It should be painted.

Thanks for you feedback....

Answer 2

Yes it is possible. Maybe with something like this sketch program?

http://intridea.github.io/sketch.js/

This one lets you load your image behind the painting canvas so they can just draw over it.

This sort of functionality is typically only available on HTML5 compliant browsers, but it works on most recent browsers.

An alternative for older browsers would be to drag/drop prerendered pieces of damage onto an image (but that is not as easy as the Sketch.js solution).

Answer 3

This is probably possible using a HTML 5 Canvas object, although this will have limited browser capability (e.g. IE 8 and lower do not support Canvas). Read more about the Canvas element here.

Also see here for something similar to what you are looking for.