4 Replies - 12352 Views - Last Post: 01 February 2011 - 06:29 PM

#1 RobyB   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 31-January 11

Web application help - Upload picture, add markers etc

Posted 31 January 2011 - 03:31 PM

Hi,

I am currently looking into designing an application for a client and I am looking for some insights some of you professionals might have on the subject. I am not looking to re-invent the wheel, so if there is any sort of open source project or a programming language that would have a solid framework to start this project please do point me in the right direction please.


The project

1: Allow users to upload a picture on the web site on their home page.
2: Allow users to place markers on the picture by selecting a special area (web graphic interface).
3: Place a template, from the database, on the user picture from the information gathered from the "user markers" allowing to crop or stretch the template to fit the picture.


A simple mockup of the final resulting picture uploaded with template :

Posted Image


Would appreciate it, if you guys can point me in the right direction.

thanks!

Is This A Good Question/Topic? 0
  • +

Replies To: Web application help - Upload picture, add markers etc

#2 KuroTsuto   User is offline

  • D.I.C Head
  • member icon

Reputation: 42
  • View blog
  • Posts: 182
  • Joined: 13-February 09

Re: Web application help - Upload picture, add markers etc

Posted 01 February 2011 - 01:46 AM

Hey there - I'm not all that sure if I'll be of much use, but I have a clarifying question or two.

What are the purpose of the user markers? You mentioned stretching and cropping of the template - is there any reason a simple bounding box could not be used in lieu of these markers?

My understanding is that this web-app consists of basic image manipulation. A number of layers are present (in your example, two), either uploaded by the user or selected from a database. The user then has the ability to resize layers to their heart's content.

I wouldn't doubt if there might be similar implementations already available 'round the net, but were I to try to develop this web app, my tools of choice would be PHP and jQuery + jQuery UI. jQuery UI already providing drag-drop/resizing functionality, it would be a breeze to set different images into floating DIV elements. Plus with jQuery's AJAX functionality, it wouldn't be too difficult to dynamically load and retrieve images from a database. Various plug-ins also provide AJAX file uploads, as well. With a quick plugin search, I found Jcrop, which appears to streamline the cropping of images. If jQuery is the route you decide to take, searching for more image manipulation plugins would definitely pay off, I think.

If the resulting image then must be able to be saved/downloaded, I believe it would be fairly simple to retrieve the properties of the divs in relationship to one another, then re-create the image server-side with the PHP GD graphics library. On a quick Google search, I've also ran into a PHP class by the name of Asido. It appears that you could perform the necessary tasks of resizing images and combining them with but two method calls. I've never heard of the class before, but it certainly looks promising, and I take heart from the fact that it's not bloated with unnecessary features!

Of course, another approach entirely would be to do this with Flash. And, if your app is only to run on modern browsers - I have no doubt that you could accomplish it without any server-side technologies using CSS3, HTML5, some javascript, and of course the canvas element!

I hope that helped! I would be very happy to see where this goes, too - if it wouldn't be to much of a hassle, drop me a private message or some such!

Cheers,
~KuroTsuto
Was This Post Helpful? 0
  • +
  • -

#3 RobyB   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 31-January 11

Re: Web application help - Upload picture, add markers etc

Posted 01 February 2011 - 02:54 AM

View PostKuroTsuto, on 01 February 2011 - 01:46 AM, said:

Hey there - I'm not all that sure if I'll be of much use, but I have a clarifying question or two.

What are the purpose of the user markers? You mentioned stretching and cropping of the template - is there any reason a simple bounding box could not be used in lieu of these markers?

My understanding is that this web-app consists of basic image manipulation. A number of layers are present (in your example, two), either uploaded by the user or selected from a database. The user then has the ability to resize layers to their heart's content.

I wouldn't doubt if there might be similar implementations already available 'round the net, but were I to try to develop this web app, my tools of choice would be PHP and jQuery + jQuery UI. jQuery UI already providing drag-drop/resizing functionality, it would be a breeze to set different images into floating DIV elements. Plus with jQuery's AJAX functionality, it wouldn't be too difficult to dynamically load and retrieve images from a database. Various plug-ins also provide AJAX file uploads, as well. With a quick plugin search, I found Jcrop, which appears to streamline the cropping of images. If jQuery is the route you decide to take, searching for more image manipulation plugins would definitely pay off, I think.

If the resulting image then must be able to be saved/downloaded, I believe it would be fairly simple to retrieve the properties of the divs in relationship to one another, then re-create the image server-side with the PHP GD graphics library. On a quick Google search, I've also ran into a PHP class by the name of Asido. It appears that you could perform the necessary tasks of resizing images and combining them with but two method calls. I've never heard of the class before, but it certainly looks promising, and I take heart from the fact that it's not bloated with unnecessary features!

Of course, another approach entirely would be to do this with Flash. And, if your app is only to run on modern browsers - I have no doubt that you could accomplish it without any server-side technologies using CSS3, HTML5, some javascript, and of course the canvas element!

I hope that helped! I would be very happy to see where this goes, too - if it wouldn't be to much of a hassle, drop me a private message or some such!

Cheers,
~KuroTsuto



Hi KuroTsudo,

thank you very much for the reply! you have pointed me in the right way, it's been a while since I had to program web related content so it helps a lot knowing whats available nowadays. Having programmed using c++, java, Javascript it shouldn't be too much of a leap to get to know a few of the languages you mentioned!

The reason I was using markers was to help the program identify what are the boundaries of the picture, say a user uploads a picture of a house per say, the markers will identify the boundaries and help the code apply the template over the house and not the whole picture. A bounding box might also be another solution, but if the image in questions has a more complicated subject 4 corners might not be enough information to apply the template correctly. I will have to see what works and what doesn't.


Thank you for sharing your wisdom, it is much appreciated! I will let you know how it works out!


P.S: I wonder if one day there will be a unified language for the web, it seems like a mess with all these various coding languages right now...


RB

This post has been edited by RobyB: 01 February 2011 - 03:01 AM

Was This Post Helpful? 0
  • +
  • -

#4 KuroTsuto   User is offline

  • D.I.C Head
  • member icon

Reputation: 42
  • View blog
  • Posts: 182
  • Joined: 13-February 09

Re: Web application help - Upload picture, add markers etc

Posted 01 February 2011 - 06:21 PM

Quote

Having programmed using c++, java, Javascript

I'm willing to bet you could pick up PHP in a day, if you so desired ;). You'll find that it's very much like Java in that if you need to get something done, there's likely already a core function to do it for you (and extensive documentation to guide you!).

Quote

The reason I was using markers was to help the program identify what are the boundaries of the picture, say a user uploads a picture of a house per say, the markers will identify the boundaries and help the code apply the template over the house and not the whole picture. A bounding box might also be another solution, but if the image in questions has a more complicated subject 4 corners might not be enough information to apply the template correctly.

I could definitely see that, now. Beneficial not only in setting the template on top of the uploaded image at the proper location, but also in scaling the template from the start so that user has to do as little manual-manipulation as possible!

For clarification, when you speak of more complicated subjects, do you mean to imply that the distortions of templates may require more complicated transformations, beyond those offered by simple 2-axis scaling? If so, this is probably just about where I'd get sketched out and jump over to Flash and Actionscript for a little more freedom!

If not, you could certainly use the user-markers to calculate the max and min coordinates on each axis, which should be adequate to set the size and the location of the incoming template... Further adjustments could be made by manipulating the resulting bounding box. My fixation on the bounding box is that it's cake to implement, and something that most users should find intuitive, I think.

Quote

P.S: I wonder if one day there will be a unified language for the web, it seems like a mess with all these various coding languages right now...


True story! 5 languages to build a modern website is a little absurd. Given, it offers a lot of flexibility in that you can omit pretty much any of the languages except HTML and still have a functioning site, but still! Oh well... All we can do is hope and pray ;)
Was This Post Helpful? 0
  • +
  • -

#5 RobyB   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 31-January 11

Re: Web application help - Upload picture, add markers etc

Posted 01 February 2011 - 06:29 PM

[quote name='KuroTsuto' date='01 February 2011 - 06:21 PM' timestamp='1296609687' post='1237931']

Quote

For clarification, when you speak of more complicated subjects, do you mean to imply that the distortions of templates may require more complicated transformations, beyond those offered by simple 2-axis scaling? If so, this is probably just about where I'd get sketched out and jump over to Flash and Actionscript for a little more freedom!


Well hopefully 2 axis will be more than enough to achieve the desired effect. No need to go crazy in version 1.0. Besides its better to leave some space to grow for updates and site upgrades ;)!

Quote

True story! 5 languages to build a modern website is a little absurd. Given, it offers a lot of flexibility in that you can omit pretty much any of the languages except HTML and still have a functioning site, but still! Oh well... All we can do is hope and pray ;)


We can only dream a big player creates an efficient language that put together each language in a comprehensive package with a very strong framework... the web is still young, I figure we're still in the the Old west time frame of it :)!


Thank you again for all the tips and encouragements!

This post has been edited by RobyB: 01 February 2011 - 06:32 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1