www.webdeveloper.com
Results 1 to 4 of 4

Thread: can anyone help me with uploading picture option to a frame

  1. #1
    Join Date
    Apr 2014
    Posts
    3

    Lightbulb can anyone help me with uploading picture option to a frame

    hi guys.
    I will really really appreciate if someone can help me building a form with giving option to view pictures and resize them before submitting to me.been trying to do this for months and can't it figure it out how to do it
    i am bringing my business online. we customise t-shirts coffee mugs and other stuff.
    my question is how can i have a blank mug picture in the background and on the side, give customers options to upload pictures and add font on it with some different colour options. so when people upload an image it will automatically shows on blank mug and they can resize the image as well as add more pictures and when they finalised the mug design they can add it to cart and have a option to buy it straight away.
    i hope I've cleared my question up well. please help meeeeeeeeeeeeeeeeeeeeeeeee!!!!!!!!!

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    Just to make sure I understand what you are asking I'll go over what I think you want. And what I think you want is system that allows users to add text and images over top of some background image (eg. blank t-shirt or coffee mug) and then submit this 'new' image via your form.

    And going off that I have to say... it's no simple task. It's not impossible, but it's not some simple code I can just type up in a few lines and post on these forums. It's more or less a small web application within itself.
    The first thing you'll want to look at for something like this is the HTML5 Canvas (link). This essentially gives you a way to dynamically add text and user uploaded images to a base/background image. You can also use the .toDataURL() method of the <canvas> tag (link) to send this newly generated image to a server-side script (such as PHP) where it can be saved to your server and viewed.

    I did once have a project that did something similar, but for different reasons. Essentially I was building a small image creation system that allowed users to import images and add formatted text, and even draw custom images. Because of how it was meant to work I had to handle everything in layers, which meant I couldn't immediately add elements to the canvas. So if you were to try something like this I'd suggest putting the images and text in HTML elements that simply overlay the <canvas> element. And once you submit the form you can run a function that takes these elements and adds them to the <canvas> as they are positioned. I'll have to dig through my old project code but I can probably post a few functions that might help you along.


    Also, just for the sake of covering everything, it is possible to do this outside of javascript/HTML5. In all fairness using <canvas> means that older browsers will not be able to use this system since they don't support some of the newer HTML5 additions that are necessary to make it work. This is where you would want to simply store the text and images a user wishes to add (as well as the positioning) and submit everything to PHP. PHP has a GD Graphics Library (link) that would allow you to build a new image based on what the user submitted. I'm less skilled with PHP so I can't really get into the specifics of how all of that would be done though, but it's another plausible option for you.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Apr 2014
    Posts
    3
    Quote Originally Posted by Sup3rkirby View Post
    Just to make sure I understand what you are asking I'll go over what I think you want. And what I think you want is system that allows users to add text and images over top of some background image (eg. blank t-shirt or coffee mug) and then submit this 'new' image via your form.

    And going off that I have to say... it's no simple task. It's not impossible, but it's not some simple code I can just type up in a few lines and post on these forums. It's more or less a small web application within itself.
    The first thing you'll want to look at for something like this is the HTML5 Canvas (link). This essentially gives you a way to dynamically add text and user uploaded images to a base/background image. You can also use the .toDataURL() method of the <canvas> tag (link) to send this newly generated image to a server-side script (such as PHP) where it can be saved to your server and viewed.

    I did once have a project that did something similar, but for different reasons. Essentially I was building a small image creation system that allowed users to import images and add formatted text, and even draw custom images. Because of how it was meant to work I had to handle everything in layers, which meant I couldn't immediately add elements to the canvas. So if you were to try something like this I'd suggest putting the images and text in HTML elements that simply overlay the <canvas> element. And once you submit the form you can run a function that takes these elements and adds them to the <canvas> as they are positioned. I'll have to dig through my old project code but I can probably post a few functions that might help you along.


    Also, just for the sake of covering everything, it is possible to do this outside of javascript/HTML5. In all fairness using <canvas> means that older browsers will not be able to use this system since they don't support some of the newer HTML5 additions that are necessary to make it work. This is where you would want to simply store the text and images a user wishes to add (as well as the positioning) and submit everything to PHP. PHP has a GD Graphics Library (link) that would allow you to build a new image based on what the user submitted. I'm less skilled with PHP so I can't really get into the specifics of how all of that would be done though, but it's another plausible option for you.

    hi Sup3rkirby,
    thank you so much for taking time and replying to my request.
    I'm sorry for replying late I have been away for the weekend to sort few things out.
    yeah I completely understand what you mean
    it is very hard for me to figure it out how to make all this, I have been trying for a while And in the end I just gave up and start seeking help.
    you got me right there. this is what I am trying to do. so customers can customise their product and order it. please PM me if you can help me bit more with this.
    thank you so so much for the links and all the great info. I m looking in to this since I got back this afternoon. I must say I m so dumb that I cant figure it out still how to complete this task. if you can please find your old project and help me with this one then buddy you will be The Great Lifesaver ever.
    thank you so so much for your time once again. I really really do appreciate your help

  4. #4
    Join Date
    Apr 2014
    Posts
    3
    Quote Originally Posted by Sup3rkirby View Post
    Just to make sure I understand what you are asking I'll go over what I think you want. And what I think you want is system that allows users to add text and images over top of some background image (eg. blank t-shirt or coffee mug) and then submit this 'new' image via your form.

    And going off that I have to say... it's no simple task. It's not impossible, but it's not some simple code I can just type up in a few lines and post on these forums. It's more or less a small web application within itself.
    The first thing you'll want to look at for something like this is the HTML5 Canvas (link). This essentially gives you a way to dynamically add text and user uploaded images to a base/background image. You can also use the .toDataURL() method of the <canvas> tag (link) to send this newly generated image to a server-side script (such as PHP) where it can be saved to your server and viewed.

    I did once have a project that did something similar, but for different reasons. Essentially I was building a small image creation system that allowed users to import images and add formatted text, and even draw custom images. Because of how it was meant to work I had to handle everything in layers, which meant I couldn't immediately add elements to the canvas. So if you were to try something like this I'd suggest putting the images and text in HTML elements that simply overlay the <canvas> element. And once you submit the form you can run a function that takes these elements and adds them to the <canvas> as they are positioned. I'll have to dig through my old project code but I can probably post a few functions that might help you along.


    Also, just for the sake of covering everything, it is possible to do this outside of javascript/HTML5. In all fairness using <canvas> means that older browsers will not be able to use this system since they don't support some of the newer HTML5 additions that are necessary to make it work. This is where you would want to simply store the text and images a user wishes to add (as well as the positioning) and submit everything to PHP. PHP has a GD Graphics Library (link) that would allow you to build a new image based on what the user submitted. I'm less skilled with PHP so I can't really get into the specifics of how all of that would be done though, but it's another plausible option for you.
    thank you so much for taking time and replying to my request.
    I'm sorry for replying late I have been away for the weekend to sort few things out.
    yeah I completely understand what you mean
    it is very hard for me to figure it out how to make all this, I have been trying for a while And in the end I just gave up and start seeking help.
    you got me right there. this is what I am trying to do. so customers can customise their product and order it. please PM me if you can help me bit more with this.
    thank you so so much for the links and all the great info. I m looking in to this since I got back this afternoon. I must say I m so dumb that I cant figure it out still how to complete this task. if you can please find your old project and help me with this one then buddy you will be The Great Lifesaver ever.
    thank you so so much for your time once again. I really really do appreciate your help

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles