Non-destructive manipulation of images in web development environments

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.

TECHNICAL FIELD

The present disclosure is directed, in general, to web development environments, and, more particularly, to non-destructive manipulation of web images.

BACKGROUND

From its simple beginnings as a broad network for exchanging information among scientists and researchers, the Internet and World Wide Web (Web) have grown into an integral and essential part of various aspects of personal and business existence. Advancing technology has helped transform the Internet from simple text based information, to a vast array of rich visual and interactive user experiences. In order to create this visual content, designers and developers use a variety of software tools.

In a typical workflow for web designers, the images, which will eventually be displayed in web content, are designed using specialized graphical development environments, such as Adobe Systems Incorporated's PHOTOSHOP® and FIREWORKS®, and the like. The resulting images are typically stored to a compression format such as PHOTOSHOP® Document (PSD), Portable Network Graphics (PNG), Graphics Interchange Format (GIF), a low-compression Joint Photographic Experts Group (JPEG), or the like. These original source graphics files are intended to maintain a great amount of detail for the designed images. Therefore, because of bandwidth restrictions and guidelines for adequate loading times, these original source files are impractical for use directly in the code defining the web page or web application. Typically, web designers will use the original source files to create web images in a format that is more compatible with web display, such as higher compression JPEGs, GIFs, or the like. Using web-optimized file formats helps to maintain efficient loading of the web images onto the users' browser windows.

Another technique generally used by web designers is to take only a portion of the original source file for an image and create some modified version of that image for the web file. For example, the original image source file may contain an image of an automobile. However, the web designer only wants an image of a license plate on a bumper for the web page under design. In order to generate this web image, the designer would convert the original source file into a web-optimized file format and insert this web image onto the design view of a web development environment (WDE), such as Adobe Systems Incorporated's DREAMWEAVER® and GOLIVE®, Microsoft Corporation's FRONT PAGE®, or the like. Many WDEs provide a dialog window that opens the original source file of the image and presents a number of options to the designer to select to determine how the designer would like the source file to be processed into the web image file. For example, the dialog may allow the designer to select the compression format, the type of compression, and possibly any filtering that the designer would like to use. When the designer is satisfied with his or her selections, he or she will select to insert the image file into the web page under development. This selection to insert would execute a conversion component to generate a new image file for the web image by converting the original source image file according to the designer's selections.

The image will then be displayed by the WDE on the design canvas and associated with a new web image file in the selected format. By working in the design view of the WDE, the designer may then apply a cropping feature to the web image which cuts out and deletes those portions of the larger image that the designer does not wish to use. In a typical crop operation, the user places a crop rectangle (a “crop rect”) onto the image and moves or shapes the crop rect to surround the area of the image that the designer wishes to keep. Upon executing the crop function, the WDE deletes all image data outside of the perimeter of the user-positionable crop rect and resaves the file representing the web image which now only includes the data from inside the crop rect. The cropped web image can now be manipulated further as the designer wishes.

As with other design endeavors, the designer may make a mistake with the cropped web image or may change his or her mind with regard to how the image has been modified or the amount of the original image that he or she desires to use in the resulting web page. For instance, maybe the designer would rather use an image of the license plate on an automobile that includes the image of the auto's headlamp, or, perhaps, the designer may not be satisfied with a particular result of a filter that has been used on the web image data. Because the WDE operates directly on the web image file, the designer typically is forced to delete the web image completely and start over from the original source file. While this restarting process may not be that inconvenient to the designer if the designer only needs to restart a few times, if the designer is making detailed modifications or applying complex filters to the web image, he or she may need to restart often in order to obtain just the desired effect. This restarting process, then, can be quite inconvenient and cost a great deal of design time, which costs the designer money and efficiency.

BRIEF SUMMARY

The present teaching is directed to providing non-destructive manipulation of images in a web development environment (WDE). 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 have 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.

Representative embodiments of the present teachings are directed to methods that include displaying an image preview dialog configured to present a source image representative of a web image object on a design canvas, detecting modification actions providing modification instructions for modifying the display of the source image, and, responsive to detecting a placement action, creating a modified web image object from the source image and replacing the web image object with the modified web image object on the design canvas rendered according to the modification instructions.

Additional representative embodiments of the present teachings are directed to systems that include a memory coupled to a processor, an image preview component stored in the memory, where the image preview component is configured to display a source image and provide image modification tools for modifying the display of the source image. The computer program product further includes a design view component stored in the memory, where the design view component is configured to display a web image associated with the source image and provide editing tools for editing the display of the web image, and a conversion component stored in the memory, where the conversion component is configured to convert the source image into the web image and compile a set of modification instructions associated with the modifying and the editing.

Further representative embodiments of the present teachings are directed to computer program products having a computer readable medium with computer program logic recorded thereon. The computer program product includes code for displaying an image preview dialog configured to present a source image representative of a web image object on a design canvas, code for detecting modification actions providing modification instructions for modifying display of the source image, and responsive to detecting a placement action, code for creating a modified web image object from the source image, and code for replacing the web image object with the modified web image object on the design canvas rendered according to the modification instructions.

DETAILED DESCRIPTION

One feature that has been developed in graphical development environments that connects the source image file to additional instances of the image is the source-linked image layer. A source-linked image layer is an image layer that contains a link to the original source data of the image. Various adjustment layers may be added to change the display characteristic of the image. However, the original source data remains unchanged and the designer may recapture the original data when changes to the image are desired. Additionally, the designer may make changes to the original source data and have those changes propagated through each of the other instances of the image within the design canvas. An example of a source-linked image layer is the Smart Object feature found in PHOTOSHOP® and FIREWORKS®.

The source-linked image layer feature has been added to previous WDEs, such as GOLIVE®, but the WDEs still operate directly on the web image files. Therefore, destructive manipulations, such as cropping, destroy the linking between the web image data and the original source data in these WDEs.

FIG. 1is a block diagram illustrating WDE100configured according to one embodiment of the present teachings. With respect to implementing the described embodiment, WDE100includes design view component101image preview component102, and conversion component103. WDE100includes numerous other well known components that are not shown which are typical for features of WDEs. Design view component101provides the code that presents the visual design canvas to a web designer. The web designer may then graphically manipulate various objects, images, and the like, of the web page under design. Image preview component102provides specific image-related information and features associated with the web images displayed in the design canvas operated by design view component101. Image preview component102uses original source data105for its presentations and manipulation of the associated image.

Unlike previous WDEs, however, WDE100includes image modification tools within image preview component102, instead of placing these features solely within design view component101. For example, image preview component102includes cropping feature106, scaling feature107, and filter feature108. When the designer views an image object from the design canvas of design view component101from within image preview component102, the designer views original source105that may have been modified to some degree by any of features106-108. Moreover, the designer may manipulate the image further through modification actions using features106-108. When these manipulation actions are detected, however, they will take the form of image manipulation instructions to original source105. Thus, the image data of original source data105remains unchanged, with only the presentation of that image data modified by the image manipulation instructions providing the visual changes.

In order to make these image manipulations non-destructive, the resulting web image presentation, web image110, that will be displayed by design view component101is generated by conversion component103, which takes original source data105, uses the instructions from image manipulations108taken from the designer's selections of various of features106-108, and then uses format change109to provide web image110that will be displayed in the design canvas in the appropriate web-compatible format. The designer may also edit web image110further from within the design canvas through image modification111. Those modifications occur on top of the underlying presentation of web image110, such that the modifications provide instructions for changing the appearance of web image110. Image modification111represents any and all image manipulation features typically available in WDEs. If the designer desires to change the resulting image presentation, instead of deleting web image110and starting again from original source data105, the designer selects to open web image110with image preview component102. Conversion component103essentially passes image manipulations108back to image preview component102. Image preview component102uses image manipulations, which may have been modified through image modifications111, to present the image using original source data105.

It should be noted that image preview component102may be implemented through various means, including the sharing of libraries, code, or other components with graphics development environments. For example, a library included in a graphics development environment that includes features that operate on original source data may be included in a WDE. Thus, as actions are taken on the source data within image preview component102, the features from the graphics development environment library may be used, while when providing web image110to design view component101, conversion component103operates to facilitate the exchange of the data between the graphics development environment library and the WDE library.

FIGS. 2A-Hare screen shots illustrating WDE20configured according to one embodiment of the present teachings. WDE20presents web image object203on design canvas200, as illustrated inFIG. 2A. Web image object203is configured in a web-compatible format. However, badge204displayed on web image object203signifies that web image object203is a source-linked object. As the designer decides to modify the display of web image object203, the designer selects to open image preview dialog201. Image preview dialog201displays source image file202, which represents the source of web image object203. Image preview dialog201presents a variety of options and selections that the designer may make to modify or manipulate the resulting presentation of source image file202in web image object203. For example, the designer may scale source image file202by entering scale parameters in scale interface205, or the designer may provide a crop rect for exporting only a portion of source image file202by entering crop parameters in export interface206or crop button214.

The designer selects to crop source image file202and export only a portion of the image for web image object203. Crop rect207is displayed on image preview dialog201, as shown onFIG. 2B, allowing the designer to position crop rect207to highlight only that area of source image file202that he or she desires to export. Responsive to the crop selection, export interface207is checked and the coordinates of the selection defined by crop rect207are displayed, in addition to crop button214shown as selected. When the designer has positioned crop rect207in the desired location he or she selects to export the image to design canvas200, as illustrated inFIG. 2C. Modified web image object208is now displayed on design canvas200. Modified web image object208displays the portion of source image file202(FIG. 2B) that was designated by crop rect207(FIG. 2B). As the designer triggers a placement signal, in image preview dialog201, the modified version of source image file202, WDE20uses the modification instructions from crop rect207to modify the presentation of the image and convert the format of that presentation to a web compatible file format for modified web image object208. Image preview dialog201is then removed from the interface.

Once modified web image object208is in place on design canvas200, the designer may select an editing tool or use any other available properties to adjust the appearance of modified web image object208. As illustrated inFIG. 2D, when the designer's editing the hypertext markup language (HTML) dimensions of modified web image object208is detected, the appearance of modified web image object208is stretched horizontally and compressed vertically. In existing WDEs, once some modification of modified web image object208is made within design canvas200, the modification destroys any relationship to source image file202because those edits are actually made to the web image. In contrast, the edits detected in WDE20only provide additional modification instructions that instruct WDE20how to modify the display of the web image. If, thereafter, the designer using WDE20desires to change the underlying presentation of modified web image object208, he or she may select to reopen the image in image preview dialog201, as illustrated inFIG. 2E.

When image preview dialog201is opened, WDE20compiles the image manipulations of modified web image object208, which are the set of rendering instructions that makes the image defined by source image file202appear on design canvas200as modified web image object208. Because image preview dialog201works with source image file202, image preview dialog201uses the image manipulations to modify the appearance of source image file202within crop rect211. Image preview dialog201displays the new coordinates of crop rect211at export parameter interface210.

Because the constraints of crop rect211are first applied within image preview dialog201and associated with source image file202before being placed in design canvas200as a web image, the original data of source image file202is preserved. As the designer deselects export interface206, as illustrated inFIG. 2F, crop rect211(FIG. 2E) is removed from image preview dialogy201, thus, withdrawing the modification instructions associated with the crop rect, revealing the entire image of source image file202. Export parameter interface210also illustrates this removal by zeroing out the X and Y coordinates. Thus, none of the cropping to the image implemented by crop rect207or crop rect211on source image file202has destroyed any of the image data in source image file202. Source image file202is still modified in its display because of the image manipulations made when the designer changed the HTML dimensions of modified web image object208.

The designer determines that the web page under development would look better if the back end of the automobile pictured in source image file202is presented. The designer re-selects export interface206which places crop rect212onto image preview dialog201, as illustrated inFIG. 2G. The designer manipulates crop rect212to reveal only the portion of source image file202representing the back end of the automobile. Upon selecting to place the image represented by the cropped source image file202, new web image object213is placed in design canvas200. Thus, not only has the designer changed the underlying image, but the modifications made to modified web image object208by the designer operating within design canvas200have been preserved and applied to the new, underlying image.

FIG. 3is a flowchart illustrating example steps executed to implement one embodiment of the present teachings. In step300, an image preview dialog is displayed in a WDE, in which the display is configured to present a source image representative of a web image object on a design canvas of the WDE. One or more image modification tools is provided in the image preview dialog, in step301, wherein the image modification tools provides modification instructions for modifying display of the source image. In response to receiving a placement signal in step302, a modified web image object is created in a web format from the source image, the web image object is replaced with the modified web image object on the design canvas rendered according to the modification instructions, and the image preview dialog is removed from display. One or more editing tools are provided for the design canvas, in step303, wherein the editing tools provide additional modification instructions for modifying display of the modified web image object on the design canvas. In response to receiving an image edit signal in step304, redisplay the image preview dialog and present the source image on the image preview dialog rendered according to the modification instructions and the additional modification instructions.

Embodiments, or portions thereof, may be embodied in program or code segments operable upon a processor-based system (e.g., computer system) for performing functions and operations as described herein. The program or code segments making up the various embodiments may be stored in a computer-readable medium, which may comprise any suitable medium for temporarily or permanently storing such code. Examples of the computer-readable medium include such tangible computer-readable media as an electronic memory circuit, a semiconductor memory device, random access memory (RAM), read only memory (ROM), erasable ROM (EROM), flash memory, a magnetic storage device (e.g., floppy diskette), optical storage device (e.g., compact disk (CD), digital versatile disk (DVD), etc.), a hard disk, and the like.

Embodiments, or portions thereof may be embodied in a computer data signal, which may be in any suitable form for communication over a transmission medium such that it is readable for execution by a functional device (e.g., processor) for performing the operations described herein. The computer data signal may include any signal that can propagate over a transmission medium such as electronic network channels, optical fibers, air, electromagnetic media, radio frequency (RF) links, and the like, and thus the data signal may be in the form of an electrical signal, optical signal, radio frequency or other wireless communication signal, etc. The code segments may, in certain embodiments, be downloaded via computer networks such as the Internet, an intranet, a local area network (LAN), a metropolitan area network (MAN), a wide area network (WAN), the public switched telephone network (PSTN), a satellite communication system, a cable transmission system, and/or the like.

FIG. 4illustrates an exemplary computer system400which may be employed to implement the web development environment according to certain embodiments. Central processing unit (CPU)401is coupled to system bus402. CPU401may be any general-purpose CPU. The present disclosure is not restricted by the architecture of CPU401(or other components of exemplary system400) as long as CPU401(and other components of system400) supports the inventive operations as described herein. CPU401may execute the various logical instructions described herein. For example, CPU401may execute machine-level instructions according to the exemplary operational flow described above in conjunction withFIG. 3.

Computer system400also includes random access memory (RAM)403, which may be SRAM, DRAM, SDRAM, or the like. Computer system400includes read-only memory (ROM)404which may be PROM, EPROM, EEPROM, or the like. RAM403and ROM404hold user and system data and programs, as is well known in the art.

Computer system400also includes input/output (I/O) adapter405, communications adapter411, user interface adapter408, and display adapter409. I/O adapter405, user interface adapter408, and/or communications adapter411may, in certain embodiments, enable a user to interact with computer system400in order to input information, such as interacting with the user interface of the web development environments, as described above.

I/O adapter405connects to storage device(s)406, such as one or more of hard drive, compact disc (CD) drive, floppy disk drive, tape drive, etc., to computer system400. Communications adapter411is adapted to couple computer system400to network412, which may enable information to be input to and/or output from system400via such network412(e.g., the Internet or other wide-area network, a local-area network, a public or private switched telephony network, a wireless network, any combination of the foregoing). User interface adapter408couples user input devices, such as keyboard413, pointing device407, and microphone414and/or output devices, such as speaker(s)415to computer system400. Display adapter409is driven by CPU401to control the display on display device410to, for example, display the web development environment, web and source images, as discussed herein.

It shall be appreciated that the present disclosure is not limited to the architecture of system400. For example, any suitable processor-based device may be utilized for implementing the web development environments disclosed herein, including without limitation personal computers, laptop computers, computer workstations, multi-processor servers, and even mobile telephones. Moreover, certain embodiments may be implemented on application specific integrated circuits (ASICs) or very large scale integrated (VLSI) circuits. In fact, persons of ordinary skill in the art may utilize any number of suitable structures capable of executing logical operations according to the embodiments.