Non-destructive manipulation of images in web development environments

• US 8,924,851 B2
• Filed: 10/10/2008
• Issued: 12/30/2014
• Est. Priority Date: 10/10/2008
• Status: Active Grant

• Current Assignee: Adobe Inc.
• Original Assignee: Adobe Systems Incorporated (Adobe Inc.)
• Inventors: Wichmann, Heiko
• Primary Examiner(s): NGUYEN, CHAU T
• Application Number:
  US12/249,750
• Publication Number:
  US 20140250363A1
• Time in Patent Office: 2,272 Days
• Field of Search: 715/255, 715/271, 715/272, 382/276, 382/309, 382/311
• US Class Current: 715/255
• CPC Class Codes: G06F 16/958 Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
• CPC Class Codes: G06F 8/30 Creation or generation of source code

Abstract

Non-destructive manipulation of images in a web development environment (WDE) is disclosed. The WDE provides an image preview component for operating on the original source image data of an image desired for placement on a web page under development in the WDE. Image manipulation tools, such as cropping and scaling, are provided in the image preview component allowing the designer to adjust the appearance of the original source image data that will be presented by the web image object placed on the design canvas of the WDE. The web image objects are defined having a link to the original source image data by maintaining the display modification instructions used to manipulate the original image defined by the original source image data into the display of the web image object.

Claims

1. A method comprising:

displaying, by a processor, a source image in an image preview interface in response to a first request to display the image preview interface;

receiving, by the processor, a first modification command, the first modification command specifying a first rendering instruction to be performed in response to a command to display the source image, wherein the first modification command specifies hiding a portion of the source image as displayed in the image preview interface;

generating, by the processor, a web image object comprising a link to the source image and further comprising the first rendering instruction;

receiving, by the processor, a second modification command, the second modification command specifying a second rendering instruction to be performed in response to the command to display the source image, wherein the second modification command specifies a change to a non-hidden portion of the source image as displayed with the web image object;

updating, by the processor, the web image object to include the second rendering instruction; and

displaying, by the processor, the source image in the image preview interface in response to a second request to display the image preview interface, wherein the source image is displayed in the image preview interface by executing the first and second rendering instructions included in the web image object in response to the second request, wherein displaying the source image in the image preview interface in response to the second request further comprises;

applying the change specified by the second modification command to the portion of the source image hidden by the first modification command, and

displaying the portion of the source image in the image preview interface with the applied change specified by the second modification command.

2. The method of claim 1,

wherein the first modification command further comprises a cropping command and wherein the first rendering instruction comprises a command to display a first portion of the source image in the image preview interface and to hide a second portion of the source image, wherein the first portion comprises the non-hidden portion and is within boundaries specified by a cropping function window and the second portion comprises the hidden portion and is outside of the boundaries specified by the cropping function window;

wherein the second modification command further comprises a change in a dimension of the first portion as displayed with the web image object; and

wherein displaying the portion of the source image in the image preview interface with the applied change specified by the second modification command comprises displaying the second portion of the source image with the change in the dimension specified by the second modification command.

3. The method of claim 2, wherein the second modification command comprises stretching the first portion of the source image as displayed with the web image object and wherein displaying the second portion of the source image with the change in the dimension specified comprises displaying a stretched version of the second portion of the source image in the image preview interface.

4. The method of claim 2, wherein the second modification command comprises shrinking the first portion of the source image as displayed with the web image object and wherein displaying the second portion of the source image with the change in the dimension specified comprises displaying a shrunken version of the second portion of the source image in the image preview interface.

5. The method of claim 1, wherein the first and second rendering instructions are executed without modifying the source image from which a displayed version of the web image object is generated.

6. The method of claim 5, wherein displaying the source image in the image preview interface in response to the second request to display the image preview interface comprises retrieving the unmodified source image.

7. The method of claim 6, wherein displaying the source image in the image preview interface in response to the second request further comprises selecting a portion of the unmodified source image to display in the image preview interface based on the first and second rendering instructions.

8. The method of claim 1, wherein the first modification is received with respect to the source image via the image preview interface and the second modification command is received with respect to the web image object via an additional interface different from the image preview interface.

9. A system comprising:

a processor communicatively coupled to a non-transitory computer-readable medium and programmable by executable code stored on the non-transitory computer-readable medium to perform operations comprising;

displaying a source image in an image preview interface in response to a first request to display the image preview interface,

receiving a first modification command, the first modification command specifying a first rendering instruction to be performed in response to a command to display the source image, wherein the first modification command specifies hiding a portion of the source image as displayed in the image preview interface,

generating a web image object comprising a link to the source image and further comprising the first rendering instruction,

receiving a second modification command, the second modification command specifying a second rendering instruction to be performed in response to the command to display the source image, wherein the second modification command specifies a change to a non-hidden portion of the source image as displayed with the web image object,

updating the web image object to include the second rendering instruction, and

displaying the source image in the image preview interface in response to a second request to display the image preview interface, wherein the source image is displayed in the image preview interface by executing the first and second rendering instructions included in the web image object in response to the second request, wherein displaying the source image in the image preview interface in response to the second request further comprises;

applying the change specified by the second modification command to the portion of the source image hidden by the first modification command, and

displaying the portion of the source image in the image preview interface with the applied change specified by the second modification command.

10. The system of claim 9,

wherein the first modification command further comprises a cropping command and wherein the first rendering instruction comprises a command to display a first portion of the source image in the image preview interface and to hide a second portion of the source image, wherein the first portion comprises the non-hidden portion and is within boundaries specified by a cropping function window and the second portion comprises the hidden portion and is outside of the boundaries specified by the cropping function window;

wherein the second modification command comprises a change in a dimension of the first portion as displayed with the web image object; and

wherein displaying the portion of the source image in the image preview interface with the applied change specified by the second modification command comprises displaying the second portion of the source image with the change in the dimension specified by the second modification command.

11. The system of claim 10, wherein the second modification command comprises stretching the first portion of the source image as displayed with the web image object and wherein displaying the second portion of the source image with the change in the dimension specified comprises displaying a stretched version of the second portion of the source image in the image preview interface.

12. The system of claim 10, wherein the second modification command comprises shrinking the first portion of the source image as displayed with the web image object and wherein displaying the second portion of the source image with the change in the dimension specified comprises displaying a shrunken version of the second portion of the source image in the image preview interface.

13. The system of claim 9, wherein the first and second rendering instructions are executed without modifying the source image from which a displayed version of the web image object is generated.

14. The system of claim 13, wherein displaying the source image in the image preview interface in response to the second request to display the image preview interface comprises retrieving the unmodified source image.

15. The system of claim 14, wherein displaying the source image in the image preview interface in response to the second request further comprises selecting a portion of the unmodified source image to display in the image preview interface based on the first and second rendering instructions.

16. The system of claim 9, wherein the first modification is received with respect to the source image via the image preview interface and the second modification command is received with respect to the web image object via an additional interface different from the image preview interface.

17. A non-transitory computer-readable medium storing code executable by a processor, the code comprising:

code for displaying a source image in an image preview interface in response to a first request to display the image preview interface;

code for receiving a first modification command, the first modification command specifying a first rendering instruction to be performed in response to a command to display the source image, wherein the first modification command specifies hiding a portion of the source image as displayed in the image preview interface;

code for generating a web image object comprising a link to the source image and further comprising the first rendering instruction;

code for receiving a second modification command, the second modification command specifying a second rendering instruction to be performed in response to the command to display the source image, wherein the second modification command specifies a change to a non-hidden portion of the source image as displayed with the web image object;

code for updating the web image object to include the second rendering instruction; and

code for displaying the source image in the image preview interface in response to a second request to display the image preview interface, wherein the source image is displayed in the image preview interface by executing the first and second rendering instructions included in the web image object in response to the second request, wherein displaying the source image in the image preview interface in response to the second request further comprises;

applying the change specified by the second modification command to the portion of the source image hidden by the first modification command, and

displaying the portion of the source image in the image preview interface with the applied change specified by the second modification command.

18. The non-transitory computer-readable medium of claim 17, wherein the first and second rendering instructions are executed without modifying the source image from which a displayed version of the web image object is generated.

19. The non-transitory computer-readable medium of claim 18, wherein displaying the source image in the image preview interface in response to the second request to display the image preview interface comprises retrieving the unmodified source image and selecting a portion of the unmodified source image to display in the image preview interface based on the first and second rendering instructions.