Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

[noob too !] user image editing on website

  • 23-01-2014 11:26AM
    #1
    romarr
    Registered Users, Registered Users 2 Posts: 227 ✭✭


    hi
    I'm wondering how to implement a simple enough image editing function on a website ? something along the lines of this http://www.sleepymooncards.ie/cards/birthdays/all/girl_birthday_5/personalise

    Ideally I'd like to implement this in a wordpress site. All the image editors plugins that i've seen have too many functions for what I want the user to be able to do.

    The ones I like seem to be java script based (?) which I know nothing about.

    What would be the best way to implement this ?

    Thanks


Comments

  • #2
    stevenmu
    Moderators, Society & Culture Moderators Posts: 9,688 Mod ✭✭✭✭stevenmu


    Tbh, good image editing is a relatively difficult coding problem. If you don't know where to begin now, you would be looking at many months of intensive learning to get to the point where you could start.

    So the best option is to use existing image editing plugins. I'm not familiar with any, but I'd guess that at least a few of them will be configurable, so you can choose what functions are available. I'd suggest picking a few that seem close to what you want, and then do some research into them specifically to see how configurable they are.


  • #3
    CreepingDeath
    Closed Accounts Posts: 8,015 ✭✭✭CreepingDeath


    HTML 5 has a canvas element.

    HTML5Rocks Canvas Link

    And FabricJS has a lot of cool demos.


  • #4
    Procasinator
    Registered Users, Registered Users 2 Posts: 1,311 ✭✭✭Procasinator


    Looking at the example link you gave, there isn't any raw image editing happening in the browser. It's just using standard img and text, positioned and scaled correctly.

    The photo and editable text are simply standard content in the DOM and styled with CSS. The bird and one picture is simply rendered on top of the photo, with the O in one being transparent.

    If you resize the image, it simply increases the width/height. Move it a bit, it changes left/top.

    Increase the font size, and it simply increases the font-size in the CSS, and recalculates left on the parent div to keep it centred.


  • #5
    romarr
    Registered Users, Registered Users 2 Posts: 227 ✭✭romarr


    thanks for the responses

    procasinator - you're correct its not really raw image editing that I want to achieve. Just to be able to upload an image, place it in a template and edit some text

    DOM = document object model ? is that right (quick google), I'll have a read up on that and see if I can make sense of it. Would I still be looking at Java script (?) in order to implement this on a site ?

    quickly getting out of my depth here ! I've done a few WP sites, a few html sites ages ago, with a poor working knowledge of CSS if you have any further suggestions on how i might go about this I'd be v greatful

    Thanks again


Advertisement