Simple Browser Based Image Manipulation

SimonTemplar

I'm in the design stages of a web application project. I would love for the following to be features, but I'm unsure how to implement them in the browser:

- paste a screenshot into the browser which can be saved as a jpg (such as using Window's Snipping Tool or the PrtSrn button. I'd rather the user simply pastes the screenshot rather than having to save it as an image file first for uploading.

- The ability to resize and crop said image

- The ability to add simple shapes over the image with a small selection of colours the user could choose from (such as using a red circle to highlight a relevent area on the image)

- The ability to add text over the image.

I could definately do this using a stand alone application but I don't know what kind of browser support there is for these features, especially the pasting of the image directly into the browser.

I know you can crop / resize images in Facebook and Google. I also know that you can add text over images for meme generation sites, so adding a simple shape should be along the same lines. However, I don't know where to start, what libraries to use, and what browsers would be compatible with such functionality.

Any guidance or recommendations would be appreciated. Thanks.

EDIT: I should have mentioned that we are currently stuck with using IE8 in our company so any functionality would need to be compatible with that.

CreepingDeath

You probably want to break down each task.
I'd say this can all be done with HTML 5 and Javascript.
Sample links to start off with...

Accessing clipboard from Javascript

HTML 5 Drawing on a canvas

The One Who Knocks

Have a look at this http://app.prntscr.com/

SimonTemplar

Thanks. I should have mentioned that we are currently stuck with using IE8 in our company so any functionality would need to be compatible with that.

Worst case scenario is that the user uses Paint to make add the relevant shapes/text/cropping to the image and simply uploads it. But I would obviously prefer everything to be handled within the web application itself.

PrzemoF

SimonTemplar wrote: »

Thanks. I should have mentioned that we are currently stuck with using IE8 in our company so any functionality would need to be compatible with that.

Worst case scenario is that the user uses Paint to make add the relevant shapes/text/cropping to the image and simply uploads it. But I would obviously prefer everything to be handled within the web application itself.

I have funny feeling that your requirement (IE8 only) has caused many smiles . It might be easier to convince your company to use firefox/chrome than to do what you want in IE8 (I'm open to correction if someone can prove me wrong)

SimonTemplar

PrzemoF wrote: »

I have funny feeling that your requirement (IE8 only) has caused many smiles . It might be easier to convince your company to use firefox/chrome than to do what you want in IE8 (I'm open to correction if someone can prove me wrong)

That's my fear.

It is a non-functional requirement and this functionality certainly isn't the core purpose of the application. It would just be neater to keep everything contained within the application.

I love web development but this highlights one of the main drawbacks of the architecture. This would be relatively easy with a stand alone app.

The One Who Knocks

Lightshot has an IE extension too -> http://app.prntscr.com/download.html

PrzemoF

SimonTemplar wrote: »

[..]
I love web development but this highlights one of the main drawbacks of the architecture. This would be relatively easy with a stand alone app.

You mean the drawback of IE8?

Try if this one works for you: https://www.picozu.com/