Upload issue

[[Nicolas]]

How can I make it so that you upload an image (Only the file extentions JPG, BMP, PNG, TIF, GIF, and TGA or DDS) and make it so that you can upload it to that page (not be redirected anywhere) and crop it to a certain size, then drag it to a space on the page. How can I do all this with PHP?
EDIT: I've attached the image I'll be using. You see the grey box on the card? How can the pic uploaded be that size? Please help! This script was supposed to be done a while ago!
Thanks ! :)

[djr33]

Without using Ajax (with a complicated implementation in Javascript), you must submit (refresh) the page to save the contents of the form.

You can set the action of the page to the current URL or even just leave it blank and it will use the current URL.

You must read a standard PHP uploads tutorial to learn the basics. Remember that you must set it as multipart data or the files won't be uploaded. (You need to use POST as well.)

Once you receive the file, check it (again, look at a basic tutorial) and look to see if the filename ends with an allowed extension. You cannot verify that the contents of, for example, "image.jpg" are really a valid image in any easy way. For those formats supported by PHP's GD library, you can check if you can load the image-- these are jpg, png and gif. (And bmp by an extension function-- google "php imagecreatefrombmp()".) You might be able to find some options for TGA and TIF, though DDS is a very unusual format. Most websites just allow jpg, gif and png anyway.

Now comes the hard part. In order to edit an image, you must be able to read the image. Additionally, you must be able to display it. Since DDS, TGA and TIF are not web formats and won't be supported by GD, you can't use them. (Again, you can look for an extension if you want, but I'm not sure you'll find one.) BMP can be used if you convert it to another format where you can display it on the page and work with it in PHP. See above for info on BMP. The rest will be handled natively by PHP.

PHP's GD library is very hard to work with, and I recommend taking it slow. In fact, you might want to wait on this project until you understand PHP better. The GD library is, in my opinion, one of the most advanced parts. It's fun in theory, but often it's more annoying than useful.

And again, we reach a point where you must either reload the page repeatedly or must rely on Javascript (and maybe Ajax).

The easiest way for a user to crop an image will be a complicated set of Javascript functions. This could be as simple as placing a white div on top of the corners of the image, or as complicated as actually making "cropping" graphics etc.

Once the image is "cropped" (this means, technically, that you know the coordinates they want to use), then you can submit a form and have PHP actually crop the image and output a new version.

Alternatively if you must avoid Javascript (not bad as a backup, but not easy to work with), you can use an image input (<input type="image"...>) and submit it twice: once to select the upper left corner and once to select the lower right corner. Cropping is two clicks, then you're done. But that will require submitting the page twice, and on the third load you'll have the final image.


Finally, you have the cropped image. "Dragging" is a vague description, but this MUST be done using Javascript, unless you want to click somewhere (NOT drag) for the image's destination. Using Javascript, you can drag it and do what you'd like. Of course I'm not sure why you'd want to "drag" it, but if you want to save that, then you'll need to submit another form (or use Ajax again).



It is theoretically possible to use a server program (if it's windows, then any .exe) to manage the images instead of using PHP. This would be faster, more difficult, and probably allow more formats. This is if you must use those other formats.



I just completed a project that involves many of these steps, and it takes a lot of experience to make it all fit together. Take it slowly and be patient, or wait to start until you really know what you're doing. I don't mean to sound unsupportive when I say this, but if you have to ask the questions you're asking, then this project is going to be very challenging.

Finally, be aware that working with images in code requires a level of confidence with math, especially basic coordinate system geometry. If you already understand this, then that's a good start, because otherwise it will be confusing. And here's a point to get you started: unlike in standard math, where the vertical axis (Y) is increasing as you go up, in PHP, CSS, Javascript and everything else you'll need to use, it increases as it goes down. The Y value increases as you move away from the top of the page/image. (The X axis, horizontal, increases to the left as usual.)

[[Nicolas]]

Umm... wow.... Ok, take away the file allow things. Does anyone have an example? Lol.. Hate to ask... But wow.. This was not expected. :P

[djr33]

So you don't need to "drag" it-- just automatically place it in the box?

And if you don't need cropping, but you just need resizing, then that is easier.

It still requires GD and some work though.

Why not just start with a basic image upload example, such as on php.net or many other places.

[[Nicolas]]

So you don't need to "drag" it-- just automatically place it in the box?

And if you don't need cropping, but you just need resizing, then that is easier.

It still requires GD and some work though.

Why not just start with a basic image upload example, such as on php.net or many other places.
Right. No need for dragging or cropping. Just resizing. Ok I can do an image upload. Hmm, what (ofc not including things that have nothing to do with images) doesn't need GD? Lol. Well, this will be harder than expected. But, worse news. How can PHP take a pic of the screen (or just the card if possible) and save it as a random 15 digit number to the server and add a link to it for the user to download it? Ugh.. wow. Lol. Harder than expected! :P :)

[djr33]

PHP can't take a picture of the screen. You could save information in the database and regenerate it later. That's as close as you'll get.

Well, you only need GD in this example then to resize it. There are resizing examples on php.net that would work. Realize, though, that it may be complex if images are upload that are smaller than your box.

[[Nicolas]]

PHP can't take a picture of the screen. You could save information in the database and regenerate it later. That's as close as you'll get.

K, none of that lol.


Realize, though, that it may be complex if images are upload that are smaller than your box.

Yeah that would be an issue... hmm, I'm not sure. Though, on another one of my sites, there is an Image Resizer. Refer user to there and get the right size? Not sure.

[[Nicolas]]

Sorry for double post, but does anyone have an example for uploading images and adding them to the page? I need it today.

BTW, I don't know if this has already been posted but the forum says not.

[djr33]

Start here reading how to upload files in PHP. It's a dense page, but it has all the information you need and it has working examples.
http://www.php.net/manual/en/features.file-upload.post-method.php

After you are comfortable with that, you can start working with the images directly.

But I don't think that expecting this to be done today makes any sense. I'm not sure what to suggest for the current project, but in the future I'd recommend against agreeing to a deadline if you don't know how to do something-- often it can take a lot longer than you expect.

[[Nicolas]]

Start here reading how to upload files in PHP. It's a dense page, but it has all the information you need and it has working examples.
http://www.php.net/manual/en/features.file-upload.post-method.php

After you are comfortable with that, you can start working with the images directly.

But I don't think that expecting this to be done today makes any sense. I'm not sure what to suggest for the current project, but in the future I'd recommend against agreeing to a deadline if you don't know how to do something-- often it can take a lot longer than you expect.

Well actually this was my project I told a whole bunch of people I'd have done by a certain time :P Thank you!

[[Nicolas]]

OK, I got an upload script working. And, had an idea. How can I use JS, Ajax, or PHP to update an img tag by typing in the link to the image then clicking a button? Could this be used?

[djr33]

That won't allow you to resize the image, but you can use a form and set an image tag.

With PHP, you would submit the form, retrieve the value as $_GET['fieldname'] then echo that into the SRC for the image.

With Javascript, you would create a function that dynamically changes the SRC of the image based on document.getElementById('fieldname').value, triggered by the onchange event for the field, perhaps. (Then you could just use 'this.value'.)

[[Nicolas]]

Do you have a JS example? I'd do it real quick but I'm with my family watching a movie.

[djr33]

<img src="demo.jpg" id="myimg" alt="imgtitle" />
<input type="text" onchange="document.getElementById('myimg').src = this.value;" />

If you want someone to actually write the page for you, you'll need to get paid help-- see the section at the bottom of the forums.

[[Nicolas]]

Thank you very much! I would not like to pay, besides I'm not allowed :P (If you look at my profile, you'll see I'm 12 years old). This would work out just fine! :D

[[Nicolas]]

Is it possible to make a <BR> 'enter' at a certain amount of pixels? Maybe with CSS? One BR tag is too much. Get rid of it and it isn't enough. Do you understand what I mean? I'm confusing myself :P

[djr33]

Use a margin instead, or you can set the margin of the <br> tag.

<br style="margin-top:10px;">

[[Nicolas]]

THANK YOU! This works great! Also, out of curiosity, is there such a thing as a Margin-Bottom? Lol. Thanks DJR you've been a great help!
EDIT: And btw, what gallery script do you recommend or do you recommend one? Lol.

[djr33]

Yes, margin-bottom, margin-top, margin-left, margin-right, and 'margin' itself applies to all 4 as a general property.

A gallery entirely depends on what you want it to do. There are lots here on DD (and elsewhere if you can't find one that fits).
Personally I've used this and I like it:
http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm
Generally, more features means more configuration and more to customize, so use the simplest one you can find that will do everything you need.

[[Nicolas]]

Thanks! Unfortunately, only Margin-top is working :/ But I'm using negative numbers for it :)
Now the image on it is fantastic, I can give you an image if you want. This is actually being done in HTML, JS, and CSS so far. But, about grabbing the screen, how could it be done again? If it were put into a database, could the user download it? Like give the user a link to download it?
EDIT: To try it out, go to: http://dbanimefree.x10.mx/cardgenerator.html and first type in an image link, (the text box right under the div), then choose a template (a select box to the far right after the text (still under the div)) then you can drag the symbols at the bottom of the page. Speaking of that, how do I make 'infinity' images on one image? Or atleast a bunch. Tell me what you think ;)

[djr33]

You are displaying two images together. PHP cannot grab the screen. You could try to display the same two images together again, using variables in the URL.

[[Nicolas]]

How could I do this? Any example code? Thanks.

[[Nicolas]]

Sorry for double post.
How can I use a certain font for a certain textbox? Thanks. I just got some nice fonts for Pokemon cards :D

[djr33]

Might be best to post this in a new thread for the HTML or CSS section, since it's not really the same thing we've been talking about.

But why not google CSS for text boxes?

[[Nicolas]]

Sure, never knew what to search for :P And hmm... Maybe this should just be moved to the lounge or something? Idk...

[djr33]

When the subject changes (such as PHP to CSS) it's often a good idea to start a new thread so that others can help. Right now, only people who know PHP are looking at this, and that is probably a very different group than the people who can help with CSS. So try to keep things organized by splitting topics so that people that can help are able to find your questions. It's good to do it in order, though: start with one, then once that is solved, move on to the next part in a new thread. (Please try not to have many threads about the same topic at the same time, but if they are separate questions for different parts of your site, especially if they are not overlapping at the same time, then that's fine.)

[[Nicolas]]

Ok :) But I don't know how to make most of the posts in here topics...

[djr33]

I'm saying that in the future when you have a new question, post it separately. You can refer to an old topic by posting a link if you need to.
(Again, this refers only to new questions, not just asking a second time about the same thing. But your new question here fits.)