After resizing image using Javascript, how to uplo

问题:

Basically I try to code a webpage where users can upload pictures via iPhone/Andoid and Desktop. These pictures should been saved as thumbnail in ./userupload and the link to this is stored in a MySQL DB.

I realized it with simple HTML form upload and a PHP Script cutting out the part which should be the thumbnail, saving the new picture and write link to database. It sounds easy but what is tricky that iPhone pictures are really big nowadays and mobile upload of a 6MB picture would take a long time cia 3G. Therefore I looked for a possibility to do the resizing at the clientside with Javascript. Through stackoverflow I found this very helpful little script which I use for resizing now.

Unfortunately my Javascript and HTML5 skills are not very developed and I don't know how to pass the resized image, which is now displayed through a <img> tag, together with the other input of the <form>, to my backend php script to save the image and write the link into the database. Do you have any ideas?

Thank you in advance

回答1:

Well, since you have a base64 encoded image in src attribute of your resized <img>, you could put that value into a hidden input and upload the bas64 string (instead of real image). Then you can decode the image in your PHP script and save it the way you need.