PHP + jQuery + jCrop online downloading and cropping the Avatar (including the source code)

PHP + jQuery + jCrop: two open-source jQuery plug-ins are used in the source code for online upload of the cropped Avatar (including the source code): the Ajax Upload uses uploadify, which is a great plug-in, there are also a lot of things that can be customized, and I am not perfect in the demo, the cancel Upload and delete functions used in the project were not added with PHP + jQuery + jCrop online Upload and cropping pictures (including the source code)

Two open-source jQuery plug-ins are used in the source code: One is that the Ajax Upload uses uploadify, which is awesome and can be customized, in the demo, I used incomplete functions. I did not add the cancel Upload and delete functions used in the project. I can also use other jQuery Upload plug-ins that do not need Flash. The second is jQuery jCrop, which is used to crop uploaded images.

? On the server side, I wrote three php files, config. inc. php contains two public functions. the only one that can be configured is that the uploaded image will be compressed into a thumbnail with a width and height not greater than 500px (default) and then called by the foreground, if a user uploads a large image, it will not only occupy a large amount of storage space, but also put extra pressure on the server.

Function resize ($ ori) {if (preg_match ('/^ http: \/[a-zA-Z0-9] +/', $ ori) {return $ ori ;} $ info = getImageInfo (ROOT_PATH. $ ori); if ($ info) {// The maximum width and height after the image is uploaded. $ width = 500; $ height = 500; $ scrimg = ROOT_PATH. $ ori; if ($ info ['type'] = 'jpg '| $ info ['type'] = 'jpeg ') {$ im = imagecreatefromjpeg ($ scrimg);} if ($ info ['type'] = 'GIF') {$ im = imagecreatefromgif ($ scrimg );} if ($ info ['type'] = 'PNG ') {$ im = imagecreatefrompng ($ scrimg );} if ($ info ['width'] <= $ width & $ info ['height'] <= $ height) {return ;} else {if ($ info ['width']> $ info ['height']) {$ height = intval ($ info ['height']/($ info ['width']/$ width ));} else {$ width = intval ($ info ['width']/($ info ['height']/$ height) ;}$ newimg = imagecreatetruecolor ($ width, $ height); imagecopyresampled ($ newimg, $ im, 0, 0, 0, 0, $ width, $ height, $ info ['width'], $ info ['height']); imagejpeg ($ newimg, ROOT_PATH. $ ori); imagedestroy ($ im);} return ;}

? The other two files, upload. php and resize. php, are used to upload and crop the front-end Ajax request image. It must be noted that in resize. php will crop the compressed image uploaded in the first step and then copy it to N images to generate portraits of different sizes. if you only need one image and do not need to retain the original image, you can modify the source image directly, which saves a lot of resources. It is best to emphasize that image processing uses the GD library, but imagick is recommended.