After javascript-js achieves Image cropping, how can I upload the cropping part to the server ??

Source: Internet
Author: User
How can I upload the cropped image to the server after js achieves Image cropping ?? Because the cropping implemented by js is only an effect, it does not make any changes to the source file and cannot save the selected part to the local disk, then how can I upload the cropped image to the server ?? How can I upload the cropped image to the server after I want to achieve Image cropping ??
Because the cropping implemented by js is only an effect, it does not make any changes to the source file and cannot save the selected part to the local disk, then how can I upload the cropped image to the server ??

My idea is:

  1. Upload source files

  2. Upload the related information of the cropped image, including the related coordinates and the size of the cropped image.

  3. You can use the gd function library in php to crop and save the uploaded original images and related information.

I don't know how to implement Avatar settings on the Internet, for example on various forums ??

Reply content:

How can I upload the cropped image to the server after js achieves Image cropping ??
Because the cropping implemented by js is only an effect, it does not make any changes to the source file and cannot save the selected part to the local disk, then how can I upload the cropped image to the server ??

My idea is:

  1. Upload source files

  2. Upload the related information of the cropped image, including the related coordinates and the size of the cropped image.

  3. You can use the gd function library in php to crop and save the uploaded original images and related information.

I don't know how to implement Avatar settings on the Internet, for example on various forums ??

Recently I wrote an image cropping task. In fact, most of the cropping tasks are in this process:
Upload-> Preview-> confirm the cropping parameters (x, y, w, h, maxW, and maxH)-> submit to the server, and generate a new image address after php processing on the server.

Plug-in address, relatively lightweight https://github.com/Vanthink-UED/jquery.core.image.upload

Currently, the cropping is performed by the server.
What the front-end can do is to record the coordinates (x, y) and width (w, h) in the upper left corner of the cropping, and then crop and save the four parameters on the server.

Compatibility not considered
1. use canvas to obtain the cut image data
2. Upload image data to the server

On github: https://github.com/baijunjie/jQuery-photoClip

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.