Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Simple Browser Based Image Manipulation

Options
  • 27-03-2014 5:56pm
    #1
    SimonTemplar
    Registered Users Posts: 2,815 ✭✭✭


    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.


Comments

  • Options
    #2
    CreepingDeath
    Closed Accounts Posts: 8,016 ✭✭✭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


  • Options
    #3
    The One Who Knocks
    Closed Accounts Posts: 2,301 ✭✭✭The One Who Knocks


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


  • Options
    #4
    SimonTemplar
    Registered Users Posts: 2,815 ✭✭✭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.


  • Options
    #5
    PrzemoF
    Registered Users Posts: 1,931 ✭✭✭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)


  • Options
    #6
    SimonTemplar
    Registered Users Posts: 2,815 ✭✭✭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.


  • Advertisement
  • Options
    #7
    The One Who Knocks
    Closed Accounts Posts: 2,301 ✭✭✭The One Who Knocks


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


  • Options
    #8
    PrzemoF
    Registered Users Posts: 1,931 ✭✭✭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/


Advertisement