Image cropping system and method
View Patent ↗Electronic document design systems and methods allowing a user engaged in customizing an electronic product to re-crop product images in a manner that is compatible with the product layout. Upon selection of an image area in the product design, the user can choose to re-crop the image currently displayed in the image area or to select and crop a different image to be used in the selected image area. A cropping indicator that can be resized and repositioned is provided to the user. The cropping indicator is automatically sized to have and retain the same height to width ratio as the selected image area. Upon completion of any resizing or repositioning operation, the selected image area of the electronic product is updated to reflect the cropping changes made by the user.
1. A computer-implemented method for facilitating user customization of the image content of an image container in an electronic product design, the method comprising
displaying by one or more processors an electronic product design on an electronic display, the design containing at least one or more user-customizable image containers, each image container characterized by an associated height-to-width ratio and each image container having associated therewith a base image and cropping information identifying at least a portion of the base image as content of the image container;
allowing, by one or more processors, selection by a user of an image container in the electronic product design for customization of the content of the image container, and
in response to a user request to perform custom cropping for the selected image container, displaying on the electronic display by one or more processors the associated base image and a cropping indicator having a height-to-width ratio which matches the height-to-width ratio of the selected image container and positioned over the base image to indicate to the user the portion of the base image that is the current content of the image container.
2. The method of claim 1 further comprising allowing the user to modify the size of the cropping indicator relative to the base image while maintaining the height-to-width ratio of the selected image container, and in response to user modification of the size of the cropping indicator, updating by one or more processors the cropping information identifying the portion of the base image indicated by the modified cropping indicator.
3. The method of claim 2 wherein the cropping indicator is characterized by a box shape having four corners, wherein
in response to user modification of the size of the cropping indicator, each corner of the cropping indicator is only allowed by one or more processors to move along a slope line defined by the original position of the corner and the original position of its opposite corner.
4. The method of claim 2 wherein, upon completion of a cropping indicator size modification, the selected image container is updated by one or more processors to incorporate the portion of the base image indicated by the modified cropping indicator.
5. The method of claim 3 wherein, upon completion of a cropping indicator size modification, the selected image container is updated by one or more processors to incorporate the portion of the base image indicated by the modified cropping indicator.
6. The method of claim 1 further comprising allowing the user to reposition the cropping indicator relative to the base image, and in response to user repositioning of the cropping indicator, updating by one or more processors the cropping information identifying the portion of the base image indicated by the repositioned cropping indicator.
7. The method of claim 6 wherein, upon completion of a cropping indicator repositioning, the selected image container is updated by one or more processors to incorporate the portion of the base image indicated by the repositioned cropping indicator.
8. The method of claim 2 , further comprising
detecting by one or more processors selection of a corner of the image container by a mouse,
calculating by one or more processors the slope of the line between the selected corner and its opposite corner of the cropping indicator, and
repetitively monitoring by one or more processors a current position of the mouse on the display, calculating a point of intersection on the slope of the line between the slope line and a perpendicular line between the current mouse position and the slope line, positioning the selected corner at the calculated point of intersection, calculating the positions of the corners of the cropping indicator that are adjacent to the selected corner so as to maintain the height-to-width ratio of the cropping indicator to match the height-to-width ratio of the selected image container, and updating the display of the cropping indicator over the base image with the modified positions of the corners of the cropping indicator.
9. The method of claim 3 , further comprising
detecting by one or more processors selection of a corner of the image container by a mouse,
calculating by one or more processors the slope of the line between the selected corner and its opposite corner of the cropping indicator, and
repetitively monitoring by one or more processors a current position of the mouse on the display, calculating a point of intersection on the slope of the line between the slope line and a perpendicular line between the current mouse position and the slope line, positioning the selected corner at the calculated point of intersection, calculating the positions of the corners of the cropping indicator that are adjacent to the selected corner so as to maintain the height-to-width ratio of the cropping indicator to match the height-to-width ratio of the selected image container, and updating the display of the cropping indicator over the base image with the modified positions of the corners of the cropping indicator.
10. The method of claim 1 further including allowing by one or more processors the user to select a different base image to be associated with the selected image container.
11. The method of claim 4 further comprising forwarding by one or more processors the electronic product design to a printer for printing.
12. The method of claim 5 further comprising forwarding by one or more processors the electronic product design to a printer for printing.
13. The method of claim 7 further comprising forwarding by one or more processors the electronic product design to a printer for printing.
14. A Non-transitory computer readable storage memory tangibly embodying program instructions which, when executed by one or more processors, implements a method for facilitating user customization of the image content of an image container in an electronic product design, the method comprising
displaying an electronic product design to a user, the design containing at least one or more user-customizable image containers, each image container characterized by an associated height-to-width ratio and each image container having associated therewith a base image and cropping information identifying at least a portion of the base image as content of the image container;
allowing the user to select an image container in the electronic product design for customization of the content of the image container, wherein
in response to a user request to perform custom cropping for the selected image container, the associated base image and a cropping indicator having a height-to-width ratio which matches the height-to-width ratio of the selected image container and positioned over the base image to indicate to the user the portion of the base image that is the current content of the image container is displayed to the user.
15. The memory of claim 14 , the method further comprising allowing the user to modify the size of the cropping indicator relative to the base image while maintaining the height-to-width ratio of the selected image container, and in response to user modification of the size of the cropping indicator, updating the cropping information identifying the portion of the base image indicated by the modified cropping indicator.
16. The memory of claim 15 wherein the cropping indicator is characterized by a box shape having four corners, wherein
in response to user modification of the size of the cropping indicator, each corner of the cropping indicator is only allowed to move along a slope line defined by the original position of the corner and the original position of its opposite corner.
17. The memory of claim 15 wherein, upon completion of a cropping indicator size modification, the selected image container is updated to incorporate the portion of the base image indicated by the modified cropping indicator.
18. The memory of claim 16 wherein, upon completion of a cropping indicator size modification, the selected image container is updated to incorporate the portion of the base image indicated by the modified cropping indicator.
19. The memory of claim 14 , the method further comprising allowing the user to reposition the cropping indicator relative to the base image, and in response to user repositioning of the cropping indicator, updating the cropping information identifying the portion of the base image indicated by the repositioned cropping indicator.
20. The memory of claim 19 wherein, upon completion of a cropping indicator repositioning, the selected image container is updated to incorporate the portion of the base image indicated by the repositioned cropping indicator.
21. The memory of claim 15 , the method further comprising
detecting selection of a corner of the image container by a mouse,
calculating the slope of the line between the selected corner and its opposite corner of the cropping indicator, and
repetitively monitoring a current position of the mouse on the display, calculating a point of intersection on the slope of the line between the slope line and a perpendicular line between the current mouse position and the slope line, positioning the selected corner at the calculated point of intersection, calculating the positions of the corners of the cropping indicator that are adjacent to the selected corner so as to maintain the height-to-width ratio of the cropping indicator to match the height-to-width ratio of the selected image container, and updating the display of the cropping indicator over the base image with the modified positions of the corners of the cropping indicator.
22. The memory of claim 16 , the method further comprising
detecting selection of a corner of the image container by a mouse,
calculating the slope of the line between the selected corner and its opposite corner of the cropping indicator, and
repetitively monitoring a current position of the mouse on the display, calculating a point of intersection on the slope of the line between the slope line and a perpendicular line between the current mouse position and the slope line, positioning the selected corner at the calculated point of intersection, calculating the positions of the corners of the cropping indicator that are adjacent to the selected corner so as to maintain the height-to-width ratio of the cropping indicator to match the height-to-width ratio of the selected image container, and updating the display of the cropping indicator over the base image with the modified positions of the corners of the cropping indicator.
23. The memory of claim 14 , the method further comprising allowing the user to select a different base image to be associated with the selected image container.
24. The memory of claim 17 , the method further comprising forwarding the electronic product design to a printer for printing.
25. The memory of claim 18 , the method further comprising forwarding the electronic product design to a printer for printing.
26. The memory of claim 20 , the method further comprising forwarding the electronic product design to a printer for printing.
27. A system for facilitating user customization of image content of an image container in an electronic product design, the system comprising:
one or more processors configured to
display an electronic product design to a user, the design containing at least one or more user-customizable image containers, each image container characterized by an associated height-to-width ratio and each image container having associated therewith a base image and cropping information identifying at least a portion of the base image as content of the image container, and
in response to user selection of an image container in the electronic product design for customization of the content of the image container and a user request to perform custom cropping for the selected image container are provided, to display to the user the associated base image and a cropping indicator having a height-to-width ratio which matches the height-to-width ratio of the selected image container and positioned over the base image to indicate to the user the portion of the base image that is the current content of the selected image container.
28. The system of claim 27 , the one or more processors further configured to allow the user to modify the size of the cropping indicator relative to the base image while maintaining the height-to-width ratio of the selected image container, and in response to user modification of the size of the cropping indicator, to update the cropping information identifying the portion of the base image indicated by the modified cropping indicator.
29. The system of claim 28 wherein the cropping indicator is characterized by a box shape having four corners, and wherein to allow the user to modify the size of the cropping indicator relative to the base image while maintaining the height-to-width ratio of the selected image container, the one or more processors are configured to allow movement of each corner of the cropping indicator only along a slope line defined by the original position of the respective corner and the original position of the corner opposite the respective corner.
30. The system of claim 28 , the one or more processors further configured to update the selected image container upon completion of a cropping indicator size modification to incorporate the portion of the base image indicated by the modified cropping indicator.
31. The system of claim 29 , the one or more processors further configured to update the selected image container upon completion of a cropping indicator size modification to incorporate the portion of the base image indicated by the modified cropping indicator.
32. The system of claim 27 , the one or more processors further configured to allow the user to reposition the cropping indicator relative to the base image, and responsive to user repositioning of the cropping indicator by updating the cropping information identifying the portion of the base image indicated by the repositioned cropping indicator.
33. The system of claim 32 , the one or more processors further configured to update the selected image container upon completion of a cropping indicator repositioning to incorporate the portion of the base image indicated by the modified cropping indicator.
34. The system of claim 28 , wherein the cropping indicator is characterized by a box shape having four corners, and wherein to allow the user to modify the size of the cropping indicator relative to the base image while maintaining the height-to-width ratio of the selected image container, the one or more processors are configured to
detect selection of a corner of the image container by a mouse,
calculate the slope of the line between the selected corner and its opposite corner of the cropping indicator, and
repetitively monitor a current position of the mouse on the display, calculate a point of intersection on the slope of the line between the slope line and a perpendicular line between the current mouse position and the slope line, position the selected corner at the calculated point of intersection, calculate the positions of the corners of the cropping indicator that are adjacent to the selected corner so as to maintain the height-to-width ratio of the cropping indicator to match the height-to-width ratio of the selected image container, and update the display of the cropping indicator over the base image with the modified positions of the corners of the cropping indicator.
35. The system of claim 29 , wherein the cropping indicator is characterized by a box shape having four corners, and wherein to allow the user to modify the size of the cropping indicator relative to the base image while maintaining the height-to-width ratio of the selected image container, the one or more processors are configured to
detect selection of a corner of the image container by a mouse,
calculate the slope of the line between the selected corner and its opposite corner of the cropping indicator, and
repetitively monitor a current position of the mouse on the display, calculate a point of intersection on the slope of the line between the slope line and a perpendicular line between the current mouse position and the slope line, position the selected corner at the calculated point of intersection, calculate the positions of the corners of the cropping indicator that are adjacent to the selected corner so as to maintain the height-to-width ratio of the cropping indicator to match the height-to-width ratio of the selected image container, and update the display of the cropping indicator over the base image with the modified positions of the corners of the cropping indicator.