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

Source: Internet
Author: User
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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.