WO2025096523A1

WO2025096523A1 - Copy protection for online images

Info

Publication number: WO2025096523A1
Application number: PCT/US2024/053538
Authority: WO
Inventors: Mingkui Wei; Yao Liu; Zhuo LU; Jinjie XUONG
Original assignee: University of South Florida; George Mason University; University of South Florida St Petersburg
Current assignee: University of South Florida; George Mason University; University of South Florida St Petersburg
Priority date: 2023-10-31
Filing date: 2024-10-30
Publication date: 2025-05-08
Anticipated expiration: 2026-04-30

Abstract

A webpage for displaying a target image on a computer display is generated by dividing the target image into a plurality of regions, each region containing a sub-image, generating an image stack including a plurality of sub-image layers, each sub-image layer containing one or more sub-images, storing each sub-image layer of the image stack in a sub-image file, and embedding hyperlinks to the sub-image files in a webpage. A region of a sub-image layer overlaying a sub-image in a different sub-image layer is transparent. The webpage may be a program of instructions that, when executed by a web browser, downloads the sub-images based on hyperlinks and renders the target image on a display screen as a stack of sub-image layers in accordance with a stacking order in the program of instructions. This makes obtaining a copy of the target image much more difficult.

Description

COPY PROTECTION FOR ONLINE IMAGES

RELATED APPLICATIONS

[0001] This application claims the benefit of provisional application serial numbers US 63/594,657 filed 10/31/2023 and titled “Protecting online images from being copied,” US 63/597,734 filed 11/10/2023 and titled “Protecting online images from being copied,” US 63/574,383 filed 04/04/2024 and titled “Using overlayed partial images to protect online images from being copied,” and US 63/678,038 filed 07/31/2024 and titled “Using overlayed image and video to protect an online image from download and screenshot,” the entire contents of which are hereby incorporated by reference.

BACKGROUND

[0002] An online image displayed on a computer screen by a web browser is subject to being copied easily by anyone who is viewing this image. To date, countermeasures to protect an online image from being copied include integrating a watermark into the image and disabling any response to a computer mouse “right-click” on the displayed webpage by the viewer. However, a watermark disturbs the content of the image. In addition, a watermark can be removed with advanced image processing techniques. Even with the “right-click” response disabled, a user can still view the webpage’s HyperText Markup Language (HTML) source code, find the image’s URL and download it directly.

[0003] A copy of an image on a computer screen may also be obtained by taking a “screenshot” of the image, which refers to the action of using a program to make a replica of the image that is displayed on the computer screen. The screenshot action is also commonly known as “print screen,” “screen snapshot,” “screen capture,” etc. Currently, there are no techniques available to prevent copying in this manner.

BRIEF DESCRIPTION OF THE DRAWINGS

[0004] The accompanying drawings provide visual representations which will be used to describe various representative embodiments more fully and can be used by those skilled in the art to understand better the representative embodiments disclosed and their inherent advantages. In these drawings, like reference numerals identify corresponding or analogous elements. [0005] FIGs 1A and IB show overlapping images with transparent and opaque backgrounds.

[0006] FIG. 2 is a block diagram of a network for generating and accessing webpages and associated media content, in accordance with various representative embodiments.

[0007] FIG. 3 shows an example of an image to be displayed in a webpage, in accordance with various representative embodiments.

[0008] FIG. 4 shows an image stack, in accordance with various representative embodiments.

[0009] FIG. 5 is a flow chart of a method of generating a webpage for displaying a target image, in accordance with various representative embodiments.

[0010] FIG. 6 shows a further example of sub-image layers, in accordance with various representative embodiments.

[0011] FIG. 7 shows the result of combining sub-image layers on a client-side display screen, in accordance with various representative embodiments.

[0012] FIG. 8 shows the image saved by “right-clicking” on the displayed image, in accordance with various representative embodiments.

[0013] FIG. 9 shows an example of a target image divided into four regions, in accordance with various representative embodiments.

[0014] FIG. 10 shows four sub-image layers of an image stack, in accordance with various representative embodiments.

[0015] FIG. 11 is a diagrammatic representation of a stack of sub-image layers, in accordance with various representative embodiments.

[0016] FIG. 12 shows a target image divided into sub-images, in accordance with various representative embodiments.

[0017] FIG. 13-15 show example sub-image layers, in accordance with various representative embodiments.

[0018] FIG. 16-17 show partially overlapping sub-images after pre-processing, in accordance with various representative embodiments.

[0019] FIG. 18 shows sub-images layers of a target image, in accordance with various representative embodiments.

[0020] FIG. 19 shows sub-images layers of a target layer displayed on a client-side display screen, in accordance with various representative embodiments.

[0021] FIG. 20 is a flow chart of a method of protecting an online image, in accordance with various representative embodiments. DETAILED DESCRIPTION

[0022] The various apparatus and devices described herein provide mechanisms for protecting online images from being copied by a viewer.

[0023] While this present disclosure is susceptible of embodiment in many different forms, there is shown in the drawings and will herein be described in detail specific embodiments, with the understanding that the embodiments shown and described herein should be considered as providing examples of the principles of the present disclosure and are not intended to limit the present disclosure to the specific embodiments shown and described. In the description below, like reference numerals are used to describe the same, similar or corresponding parts in the several views of the drawings. For simplicity and clarity of illustration, reference numerals may be repeated among the figures to indicate corresponding or analogous elements.

[0024] A webpage is a structured document accessible by a computer application called a web browser. A webpage is identified by a Uniform Resource Locator (URL). When a user inputs a URL into a web browser, the associated webpage is retrieved from a web server and the web browser transforms it into a visual representation displayed on the user’s computer screen. A webpage may contain URL links to other pages for additional content, such as images to be displayed, that are stored on the same web server or other webs servers.

[0025] A webpage is a text document containing computer instructions, such as HyperText Markup Language (HTML), for displaying information and providing user controls. A webpage may also contain instructions, such as Cascading Style Sheets (CSS), that specify how the content of the webpage is to be displayed. A webpage may also include one or more JavaScript or Web Assembly programs that may be executed by the web browser to enable a range of behaviors.

[0026] A webpage may contain links to images, either static images or videos, to be displayed to the user. The owner of these images may desire to protect the images from being copied by a user. For example, the images may have a commercial value or may be copyright protected. A web site may provide multiple linked webpages together with a database of content.

[0027] A web browser may have a “point-and-click” interface controlled by a computer mouse, touch-screen, or joystick for example. For example, a web browser may be programmed to respond to a “right-click” on an object by displaying a menu to enable selection of other action. For an image, the menu may include an option to save the image to selected storage location.

[0028] Embodiments of the disclosure split a target image into a stack of image, each containing a sub-image, to protect an online image from being easily copied. Some images in the stack may be partially transparent. For display, a stack of images referenced in a webpage are rendered by a web browser in accordance with instructions in the webpage to display the target image. This makes it more difficult for a user to copy the target image. The disclosed mechanisms have application in a website that does not want its images to be easily copied and reposted without proper permission. For example, an e-commerce website has many product photos, which, if not protected, can be easily copied by its competitors selling the same product and reposted on their own website.

[0029] Previously, the most common ways to protect an image include integrating one or more watermarks into the image, or simply disabling right-click on a webpage. The former approach disturbs the image itself, and the latter approach can easily be bypassed by reading the HTML code of the webpage. Other approaches, including legal warnings, have limited effect. The mechanisms disclosed herein provide a new way to protect images in downloaded webpages. The mechanisms make copying the complete image much harder than previously. [0030] Various embodiments of the disclosure provide a method of generating a webpage for displaying a target image on a computer display. The method includes generating an image stack, including a plurality of sub-image layers, and dividing the target image into multiple regions, each region containing a sub-image. For each region of the target image a sub-image layer of the image stack is selected, and the sub-image of the region is stored in a corresponding region of the sub-image layer. Pixels in corresponding regions of sub-image layers higher in the image stack than the selected sub-image layer are set to be transparent. For each sub-image layer of the image stack, the sub-image layer is stored in a sub-image file and network locators, such as hyperlinks, of the sub-image files are embedded in a webpage. The webpage includes a stacking context for each sub-image file of the image stack. Storing a sub-image layer in a sub-image file may include compressing the sub-image layer. The stacking context may include a Hyper-Text Markup Language (HTML) z-index or a Cascading Style Sheet (CSS) z-index.

[0031] In one embodiment, setting a pixel to be transparent includes setting an alphachannel level of the pixel. [0032] In one embodiment, one or more sub-image layers of the image stack are converted to video frames and stored in a video file. The video may be protected using a digital rights management (DRM) mechanism.

[0033] In one embodiment, the sub-image layers have different sizes.

[0034] In one embodiment, the sub-image layers are offset from one another.

[0035] In a further embodiment, the webpage specifies that one sub-image layer of the stack can be enlarged or otherwise transformed, while another sub-image layer cannot.

[0036] In one embodiment, the webpage specifies that one or more sub-image layers are to be displayed as blinking images, appearing at different times.

[0037] In one embodiment, one or more target images are generated from a document, such as a text document or a document containing both text and images.

[0038] In embodiment, a reversible transformation is performed on one or more subimage layers of the image stack prior to storing the sub-image layers, and the inverse transformation of the reversible transformation is specified in the webpage.

[0039] A sub-image layer of the image stack may be the same size as or larger than the sub-image contained in the sub-image layer.

[0040] Various embodiments of the disclosure provide a method of generating a webpage for displaying a target image on computer display. The method includes generating an image stack, including a first sub-image layer and a second sub-image layer, determining a first region of the target image based on a text mask, and determining a second region of the target image based on a complement of the text mask. For the first sub-image layer, pixelvalues of the first region of the target image are stored in a corresponding region of the first sub-image layer and the first sub-image layer is stored in a first sub-image file. For the second sub-image layer, pixel-values of the second region of the target image are stored in a corresponding region of the second sub-image layer, pixels of the first region of the target image in a corresponding region of the second sub-image layer are set to be transparent and the second sub-image layer is stored in second sub-image file. Network locators of the first and second sub-image files, such as hyperlinks, are embedded in a webpage. The webpage also includes a stacking context for the first sub-image file and the second sub-image file. [0041] When a request for the webpage is received at a web server from a user device, the text mask is based, at least in part, on information associated with the request. The webpage generated using the mask is sent to the user device. The information associated with the request may be an Internet Protocol (IP) address of the user device, for example. [0042] Thus, in embodiments of the disclosure, a webpage for displaying a target image on a computer display is generated by dividing the target image into a plurality of regions, each region containing a sub-image, generating an image stack including a plurality of subimage layers, each sub-image layer containing one or more sub-images, storing each subimage layer of the image stack in a sub-image file, and embedding hyperlinks to the subimage files in a webpage. A region of a sub-image layer overlaying a sub-image in a different sub-image layer is transparent.

[0043] The webpage is a program of instructions that may be executed by a web browser application on a computer. The webpage may be stored on a non-transitory, computer- readable medium. The webpage may be generated by a program of computer-readable instructions. The instructions may be stored on a non-transitory, computer-readable medium. [0044] FIG. 1A shows two images with transparent backgrounds. As shown, when these two images are overlay ed, while both images occupy a rectangular space, the transparent part of front image 100 does not block back image 102 from being displayed.

[0045] FIG. IB shows two images with opaque (non-transparent) backgrounds. In this case, front image 104 partially blocks back image 106.

[0046] Herein, an “image” refers a digital image composed of a set of picture elements or pixels. Each pixel specifies one or more quantized values that represent the brightness of a given color at any specific point in the image. Images may be stored in computer readable files in various formats. The image may be stored in a compressed form or an uncompressed form.

[0047] Some image formats, such as Portable Network Graphics (PNG) and Graphics Interchange Format (GIF), support image transparency, wherein the image, or any part of the image, can be set to be transparent. Other formats, such as JPG, do not support such a property. In particular, the PNG format supports an “alpha-channel” in addition to red, green and blue (RGB) channels. The alpha value of a pixel determines the level of opacity, with the value zero representing complete transparency. GIF allows a selected background color to be made transparent.

[0048] When displaying a webpage containing an image, a transparent image may be rendered over the image to prevent copying of the image by “right-clicking” on the image to activate a menu with a “save” option. However, a link to the image, such as a URL of the image source file, can easily be found in the text version of the webpage, enabling the image to be downloaded directly. [0049] In various embodiments of the present disclosure, an image is divided into two or more sub-images and displayed by overlaying the sub-images. In this way, the webpage does not contain any links to the complete image.

[0050] FIG. 2 is a block diagram of a network 200 for generating and accessing webpages and associated media content, in accordance with various representative embodiments. To retrieve a webpage from web server 202, a user enters a domain name (URL) into browser application 204 on user device 206. A corresponding Internet Protocol (IP) address of web server 202 is retrieved from Domain Name Server (DNS) 208 via network 210. A request for the webpage is sent from user device 206 to web server 202 and the requested webpage is returned to the user device. Browser 204 parses the webpage, which is a text document containing links to other media content such as images, and renders a graphical version of the webpage on display 212.

[0051] In accordance with embodiments of the present disclosure, image protection engine 214 processes image 216 to generate webpage 218 and stack 220 of sub-image files containing sub-images of image 216. Webpage 218 contains links to the image files together with instructions on how to display them. Web server 202 may provide information 222, such as a user network address, to the image protection engine to enable the sub-image files to be altered in response to user request. When the webpage is requested, along with the linked sub-image files, the web server will also send instructions, using CSS styling sheets or JavaScript for example, instructing the browser how to correctly display the image. Operation of image protection engine 214 is discussed in more detail below.

[0052] In one embodiment, a link to sub-image layer stored in a file sub image layer l .png is a hyperlink. A hyperlink is a text instruction of the form <img src="sub_image_layer_l.png” >. More generally, a hyperlink to an image is of the form <img src=”URL”>, where “URL” is the Universal Resource Locator of the image file. The hyperlink instructs a browser to download the image file from a network location identified by the URL. A URL may be an absolute web address or an address relative to the address of the webpage.

[0053] While hyperlinks are used for Internet addresses, other networks may use other references. Herein, the term hyperlink is used to refer to any mechanism that enables the specified image file to be retrieved.

[0054] FIG. 3 shows an example of an image 300 to be displayed in a webpage, which may be referred to as the target image, in accordance with embodiments of the present disclosure. Target image 300 is divided into two regions with each region containing a sub- image of the target image. In this example, a first region is outside of broken line 302 and a second region is inside of broken line 302. The target image may be a color image or a monochrome image such as grayscale image.

[0055] Herein, a “sub-image” of a target image refers to a subset of the set of pixels that make up the target image. Locations of pixels in a sub-image define a “region” of the target image. The region may be a connected region or a number of disconnected sub-regions.

[0056] FIG. 4 shows image stack 400 including first sub-image layer 402, which includes the sub-image 404 in the first region of the target image, and second sub-image layer 406 that includes the sub-image 408 in the second region of the target image. In this example, second sub-image layer 406 is higher in the image stack and will be painted last when the webpage is rendered. The sub-image layers can be of any size and do not need to be the same size as the original image. The target image may be divided into any number of regions. A sub-image layer may contain any number of sub-images (as illustrated in FIG. 6, discussed below for example). A sub-image layer is itself an image that includes one or more of the sub-images. A sub-image layer may also contain additional pixels that are transparent and additional pixels that are opaque but hidden by pixels in higher layers of the stack.

[0057] In FIG. 4, pixels in region 410 of second layer 406 are set to be transparent so that the sub-image 404 in the first layer are visible when the sub-image layers are stacked. The pixel values in region 410 may be set to any value that is different from the corresponding values of the target image. For example, the RGB value of a pixel could be set to (0, 0, 0), (255, 255, 255) or a random value in a sub-image layer. This prevents reconstruction of the target image by resetting the pixels to be opaque. Hyperlinks to the subimage files are embedded in the webpage, together with a stacking context for each image file of the image stack. Additional layout information may also be included - such as image scaling, orientation and offset information. A stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage. HTML elements occupy this space in priority order based on element attributes.

[0058] Pixels in region 412 are obscured when the stack of sub-image layers is displayed, and may be set to any values. In the example shown, a text message is displayed. The message would be visible to a user who inspects the text of the webpage to find the Hyper-Text link to the image file for sub-image layer 402 and then downloaded the image file. [0059] Thus, when sub-image layer 406 is displayed overlaying sub-image layer 402, the target image (shown in FIG. 3) is visible on the user’s display.

[0060] FIG. 5 is a flow chart of a method of generating a webpage for displaying a target image, in accordance with various representative embodiments. At block 502 an image stack is generated including two or more sub-image layers. At block 504, the target image is divided into two or more regions, each region containing a sub-image. For each region of the target image, the sub-image is retrieved at block 506, a sub-image layer of the image stack is selected at block 508, and the sub-image of the region is stored in a corresponding region of the sub-image layer at block 510. At block 512, pixels in corresponding regions of sub-image layers higher in the image stack than the selected sub-image layer are set to be transparent.

As depicted by the positive branch from decision block 514, flow returns to block 506 if there are more regions to be processed. Otherwise, as depicted by the negative branch from decision block 514, the sub-image layers of the image stack are each stored in a corresponding sub-image file at block 516. At block 518, hyperlinks to the sub-image files are embedded in a webpage, together with a stacking context, for each sub-image file of the image stack, and any other layout information.

[0061] FIG. 6 shows a further example of sub-image layers, in accordance with various representative embodiments. Sub-image layer 602 contains target image pixels in a first set of regions arranged in a “checker-board” pattern, while sub-image layer 604 contains target image pixels in a second, complementary, set of regions of the target image. Sub-image layer 604 overlays sub-image layer 602 and so is in a higher layer of the stack. Accordingly, the white rectangles in sub-image layer 604 are set to be transparent.

[0062] FIG. 7 shows the result of combining sub-image layer 604 and sub-image layer 602 on a client-side user display screen. The sub-images in layer 602 are visible through the transparent rectangles in sub-image layer 604, so the complete target image is visible.

[0063] FIG. 8 shows the image saved by “right-clicking” on the displayed image. Only the top sub-image layer is saved, and the target image is protected.

[0064] FIG. 9 shows an example of a target image divided into four regions, 902, 904, 906 and 908, in accordance with various representative embodiments.

[0065] FIG. 10 shows four sub-image layers of an image stack, in accordance with various representative embodiments. The layers are ordered 1002, 1004, 1006 and 1008, with layer 1002 being the lowest layer in the stack and 1008 being the highest layer. In this example, the sub-image layers have different sizes. Layer 1002 contains sub-image 902, layer 1004 contains sub-image 904, layer 1006 contains sub-image 906, and layer 1008 contains sub-image 908. No region of layers 1004, 1006 or 1008 overlays the sub-image 902, so no transparent pixels are needed. Similarly, no region of layers 1006 or 1008 overlays the subimage 904, and no region of layer 1008 overlays the sub-image 906. Consequently, no transparent pixels are needed in any of the layers. The regions of the sub-image layers outside of the sub-image are obscured by higher layers, so can be set to any pixel values. In the example shown, the sub-image layers are obtained by simply cropping the target image to different sizes.

[0066] In the example shown in FIGs 9 and 10, no transparency is used. This allows the sub-image layers to be stored in image files in a format that does not support transparency if desired.

[0067] The order and relative positions of the sub-images are recorded in the webpage. When the user’s browser follows the links in a requested webpage, the webserver will send the separate sub-image files along with their position information. The positional information may be carried in multiple ways, such as using a CSS styling sheet or using JavaScript. The web browser that received the webpage will display those sub-images according to the positional information such that the original target image is displayed. When such a composite set of sub-images is displayed instead of the original single image is displayed in a webpage, a human user or an application that wants to copy this image will only get a set of sub-images, and substantial efforts must be made to restore the original image.

[0068] FIG. 11 is a diagrammatic representation of a stack of sub-image layers, in accordance with various representative embodiments. The order of stack is designated by the z-coordinate of the layer. The lowest layer is designated level zO, the highest layer is designated level z3. When displayed, the higher levels overlay the lower levels. The bottom- left-hand comer (BLHC) of sub-image layer 902 has position coordinates (0,y2,0). The BLHC of sub-image layer 904 has position coordinates (0,0, zl). The BLHC of sub-image layer 906 has position coordinates (xl,0,z2). The BLHC of sub-image layer 908 has position coordinates (0,yl,z3). These coordinates may be specified in the webpage.

[0069] FIG. 12 shows another way in which a target image can be divided into subimages, in accordance with various representative embodiments. In this example, the target image is divided into three irregularly shaped regions 1202, 1204 and 1206 that are contained in three sub-image layers 1212, 1214 and 1216, respectively. Regions of sub-image layers outside of the sub-images may be set to be transparent so that the layers can be overlaid to recompose the complete target image. [0070] FIG. 13 shows example sub-image layers, in accordance with various representative embodiments. The two image layers 1302 and 1304 of an image stack can be overlaid to display the target image. Separately, however, each sub-image layer displays a warning message. When one of the sub-images is copied by a user, as shown in image 1306, the user will see this warning message for unauthorized use of the image and be deterred from reposting the image.

[0071] FIG. 14 shows further examples of sub-image layers, in accordance with various representative embodiments. The two sub-image layers 1402 and 1404 of an image stack can be overlaid to display the target image. Separately, however, each sub-image layer displays a warning message. In this example, the sub-images are generated dynamically based on user information. When one of the sub-images is copied by a user, as shown in image 1406, the user will see this warning message for unauthorized use of the image and be deterred from reposting the image. The user information may be derived from the request for the webpage, for example. In this example shown, the user’s IP address is overlaid/placed on the image to warn the user of the consequence of unauthorized use of the copyrighted image.

[0072] In another embodiment, to further increase the difficultness to restore the original image from the set of sub-images, the sub-images are pre-processed with a reversible method at the web server. The processing is reversed by a client-side script, such as JavaScript, at the client side. The reversible method may be a transformation such as scaling, rotation or a combination thereof.

[0073] FIG. 15 shows two partially overlapping sub-image layers, 1502 and 1504, of a target image, in accordance with various representative embodiments.

[0074] FIG. 16 shows the two partially overlapping sub-images after pre-processing, in accordance with various representative embodiments. First sub-image 1502 is unaltered, while second sub-image 1504 is rotated 180° into image 1604. The second sub-image is rotated -180° at the client side before being displayed. Other angles of rotation may be used. [0075] FIG. 17 shows the two partially overlapping sub-images after pre-processing, in accordance with various representative embodiments. First sub-image 1502 is unaltered, while second sub-image 1504 is contracted by 25% - i.e., scaled by a factor ³/4 - to provide image 1704. The second sub-image is expanded by a factor 4/3 at the client side before being displayed. Other scale factors may be used.

[0076] FIG. 18 shows two sub-images layers, 1802 and 1804, of a target image, in accordance with various representative embodiments. The white rectangles in upper layer 1804 are transparent. [0077] FIG. 19 shows sub-image layers 1802 and 1804 displayed on a client-side display screen, in accordance with various representative embodiments. Sub-image layers 1802 and 1804 are displayed as images 1902 and 1904, respectively. In this view, a user has attempted to enlarge the target image before copying using a screenshot. However, only the upper displayed sub-image layer 1904 is enlarged. As a result, the composition of the image is broken. This approach prevents a user from enlarging the target image before performing a screenshot.

[0078] To prevent an image from being captured in a screenshot, a client-side program, such as a JavaScript program, is used to set those sub-images to “blink,” i.e., to make the images quickly appear and disappear. The blinking frequency of those images should be high enough such that the blinking is not perceivable. These images will blink with a different pattern or frequency, for example, while one sub-image appears, another sub-image disappears. Thus, at any given time when a screenshot is made, part of the original image is not displayed thereby preventing the original image from being screenshot.

[0079] Copyright protected video. Digital Rights Management (DRM) refers to using technologies to control the accessibility of copyrighted material, such as video clips. At the time of writing, three major technologies used for digital DRM, especially for video streaming, are Widevine developed by Google, PlayReady® developed by Microsoft, and FairPlay developed by Apple. These technologies support video encryption, which is to say, a video clip is encrypted and sent to a web browser, and the browser must have the correct key to decrypt the video before it can be played. The key is obtained by negotiation between the browser and a license server, and the license server will provide the key only if the browser passes a certain authentication.

[0080] A feature provided by these DRM technologies is prevention of a screenshot capture. In particular, a DRM-protected video clip, even after it has been correctly decrypted and played in the browser, cannot be captured with screenshot applications. When a screenshot application is activated, the video will become blank (all-black or all-white) and thus prevents the application from making a screenshot.

[0081] DRM technologies are used by many video-streaming websites such as HBO® and Disney Plus®, to prevent users from accessing or downloading copyrighted content without proper authentication, or from making screenshots of the copyrighted content. Even though actual video content is displayed at the time when screenshot was made, the content cannot be captured by the screenshot application due to the use of DRM technology. [0082] FIG. 20 is a flow chart of a method 2000 of protecting an online image, in accordance with various representative embodiments. The target image is distributed and displayed as one or more static sub-images overlaying one or more videos. This protects the target image from being downloaded or captured in a screenshot. At block 502 an image stack is generated including a plurality of sub-image layers. At block 504, the target image is divided into a plurality of regions, each region containing a sub-image. For each region of the target image, the sub-image is retrieved at block 506, a sub-image layer of the image stack is selected at block 508, and the sub-image of the region is stored in a corresponding region of the sub-image layer at block 510. At block 512, pixels in corresponding regions of sub-image layers higher in the image stack than the selected sub-image layer are set to be transparent. As depicted by the positive branch from decision block 514, flow returns to block 506 if there are more regions to be processed. Otherwise, as depicted by the negative branch from decision block 514, one or more sub-image layers of the stack are converted to a video format, such as the MPEG-4 format of the International Organization for Standardization/Intemational Electrotechnical Commission (ISO/IEC), in which one or more frames of each video show the sub-images contained in the sub-image layer. The one or more videos are stored at block 2002. Digital Rights Management (DRM) technology is used to protect the video. Other video formats may be used and copy protection methods may be used. At block 2004, the remaining sub-image layers of the image stack are converted to an image format, such as PNG for example, which supports transparency, and each stored in a corresponding sub-image file. Sub-image layers without transparent pixels may be converted to other image formats. At block 2006, hyperlinks to one or more sub-image videos and the sub-image files are embedded in a webpage, together with a stacking context for each subimage file of the image stack and any other layout information. It is noted that the order of operations may be altered without departing from the scope of the present disclosure. For example, a completed sub-image layer may be saved to an image file or a video file before other sub-image layers have been generated.

[0083] Browser technologies, such as JavaScript or Cascading Style Sheets, may be used to display these sub-images, including the images and the video, in an overlayed manner, where the transparent sub-images are placed above each other such that they visually display the complete original image. The control panel of the video clip, such as play/pause, fast b ackwar d/forward can be hidden using HTML techniques. Thus, the video, which contains a static image, appears to be a normal static image. It is noted that it is not necessary to convert all sub-images into a transparency-supporting format. Some sub-images can be in the format such as JPG, as long as all these sub-images can be composed into the original image. This may be the case when there are multiple images in the same webpage to be displayed, such as multiple images to be displayed in a “lightbox” web design (where multiple images’ thumbnails are displayed in the webpage, clicking one such image will cause a larger image popping up, and a user can swipe and view those images one at a time), it becomes inefficient to create one video per image. This is because each time a DRM-protected video is displayed, the web browser will need to communicate with the license server to request a license and decrypt this video. In this case, a single video clip including multiple static images can be created, and HTML programming techniques, such as the “currentTime” property of a <video> tag, can be used to jump to a certain time point of the video clip where the desired picture is displayed.

[0084] The embodiment described above, which creates a single video clip including one or multiple images, can also work with videos that are not DRM-protected video. Rather, the technique can be used anywhere where a set of images is to be displayed. By doing this, a user who is viewing these “images” is unable to right-click and save it. This is because the person is actually viewing a video clip playing a static picture, instead of a static image. [0085] The target image is protected since, when a person views this image and wants to download it, either by right-clicking and saving the picture, or using third-party image downloading tools, the person cannot get the complete image. Particularly, by using rightclick and save, the person can only save the single sub-image that sits on the top-most layer of the stack. By using third-party image downloaders, the person can obtain all sub-images except the ones that are converted into one or more encrypted videos. The user is still unable to obtain all the parts in order to compose the complete target image. In addition, when a person views the image and makes a screenshot, the sub-images that are converted into video clips will become blank and thus prevent the person from making a complete screenshot of the image.

[0086] In this document, relational terms such as first and second, top and bottom, and the like may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. The terms “comprises,” “comprising,” “includes,” “including,” “has,” “having,” or any other variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. An element preceded by “comprises . . .a” does not, without more constraints, preclude the existence of additional identical elements in the process, method, article, or apparatus that comprises the element.

[0087] Reference throughout this document to “one embodiment,” “certain embodiments,” “an embodiment,” “implementation(s),” “aspect(s),” or similar terms means that a particular feature, structure, or characteristic described in connection with the embodiment is included in at least one embodiment of the present disclosure. Thus, the appearances of such phrases or in various places throughout this specification are not necessarily all referring to the same embodiment. Furthermore, the particular features, structures, or characteristics may be combined in any suitable manner in one or more embodiments without limitation.

[0088] The term “or,” as used herein, is to be interpreted as an inclusive or meaning any one or any combination. Therefore, “A, B or C” means “any of the following: A; B; C; A and B; A and C; B and C; A, B and C.” An exception to this definition will occur only when a combination of elements, functions, steps or acts are in some way inherently mutually exclusive.

[0089] As used herein, the term “configured to,” when applied to an element, means that the element may be designed or constructed to perform a designated function, or that is has the required structure to enable it to be reconfigured or adapted to perform that function. [0090] Numerous details have been set forth to provide an understanding of the embodiments described herein. The embodiments may be practiced without these details. In other instances, well-known methods, procedures, and components have not been described in detail to avoid obscuring the embodiments described. The disclosure is not to be considered as limited to the scope of the embodiments described herein.

[0091] Those skilled in the art will recognize that the present disclosure has been described by means of examples. The present disclosure could be implemented using hardware component equivalents such as special purpose hardware and/or dedicated processors which are equivalents to the present disclosure as described and claimed. Similarly, dedicated processors and/or dedicated hard wired logic may be used to construct alternative equivalent embodiments of the present disclosure.

[0092] Various embodiments described herein are implemented using dedicated hardware, configurable hardware or programmed processors executing programming instructions that are broadly described in flow chart form that can be stored on any suitable electronic storage medium or transmitted over any suitable electronic communication medium. The programming instructions can be stored in any known non-transitory computer-readable medium such as semiconductor, magnetic disk, or optical disc. A combination of these elements may be used. Those skilled in the art will appreciate that the processes and mechanisms described above can be implemented in any number of variations without departing from the present disclosure. For example, the order of certain operations carried out can often be varied, additional operations can be added, or operations can be deleted, without departing from the present disclosure. Such variations are contemplated and considered equivalent.

[0093] The various representative embodiments, which have been described in detail herein, have been presented by way of example and not by way of limitation. It will be understood by those skilled in the art that various changes may be made in the form and details of the described embodiments resulting in equivalent embodiments that remain within the scope of the appended claims.

Claims

WHAT IS CLAIMED.

1. A method of generating a webpage for displaying a target image on a computer display, the method comprising: generating an image stack including a plurality of sub-image layers; dividing the target image into a plurality of regions, each region containing a subimage; for each region of the target image: selecting a sub-image layer of the image stack; storing the sub-image of the region in a corresponding region of the sub-image layer; and setting pixels in corresponding regions of sub-image layers higher in the image stack than the selected sub-image layer to be transparent; for each sub-image layer of the image stack, storing the sub-image layer in a subimage file; and embedding network locators of the sub-image files in a webpage, the webpage including a stacking context for each sub-image file of the image stack.

2. The method of claim 1, where storing the sub-image of the region in a corresponding region of the selected sub-image layer includes setting the pixels in the corresponding region to be opaque.

3. The method of claim 1, where storing a sub-image layer in a sub-image file includes compressing the sub-image layer.

4. The method of claim 1, where a stacking context includes a Hyper-Text Markup Language (HTML) z-index or a Cascading Style Sheet (CSS) z-index.

5. The method of claim 1, where setting a pixel to be transparent includes setting an alphachannel level of the pixel.

6. The method of claim 1, where, for one or more layers of the image stack, the corresponding sub-image file is a video file and storing the sub-image layer in a sub-image file includes: generating a video including the sub-image layer as one or more frames of the video; and storing the video in the video file.

7. The method of claim 6, further comprising protecting the video using digital rights management (DRM).

8. The method of claim 1, where a first sub-image layer of the image stack has a different size to a second sub-image layer of the image stack.

9. The method of claim 8, further comprising specifying, in the webpage, an offset between the first sub-image layer and the second sub-image layer.

10. The method of claim 1, further comprising specifying in the webpage that a first subimage layer of the image stack can be enlarged, and a second sub-image layer of the image stack cannot be enlarged.

11. The method of claim 1, further comprising specifying in the webpage that at least a first and second sub-image layer are to be displayed as blinking images, appearing at different times.

12. The method of claim 1, further comprising generating one or more target images from a document.

13. The method of claim 1, further comprising rotating a first sub-image layer of the image stack relative to a second sub-image layer of the image stack prior to storing the sub-image layers.

14. The method of claim 1, further comprising: performing a reversible transformation of one or more sub-image layers of the image stack prior to storing the sub-image layers; and specifying an inverse transformation of the reversible transformation in the webpage.

15. The method of claim 1, where a sub-image layer of the image stack is the same size as or larger than the sub-image contained in the sub-image layer.

16. A method of generating a webpage for displaying a target image on computer display, the method comprising: generating an image stack including a first sub-image layer and a second sub-image layer; determining a first region of the target image based on a text mask; determining a second region of the target image based on a complement of the text mask. for the first sub-image layer: storing pixel-values of the first region of the target image in a corresponding region of the first sub-image layer; and storing the first sub-image layer in a first sub-image file for the second sub-image layer: storing pixel-values of the second region of the target image in a corresponding region of the second sub-image layer; setting pixels of the first region of the target image in a corresponding region of the second sub-image layer to be transparent; and storing the second sub-image layer in second sub-image file; embedding network locators of the first and second sub-image files in a webpage, the webpage including a stacking context for the first sub-image file and the second subimage file.

17. The method of claim 16, further comprising: receiving, at a web server, a request for the webpage from user device; generating the text mask based, at least in part, on information associated with the request; and sending the webpage generated using the mask to the user device.

18. The method of claim 17, where the information associated with the request is an Internet Protocol (IP) address of the user device.

19. A method of generating a webpage for displaying a target image on a computer display, the method comprising: dividing the target image into a plurality of regions, each region containing a subimage; generating an image stack including a plurality of sub-image layers, each sub-image layer containing one or more sub-images; storing each sub-image layer of the image stack in a sub-image file; and embedding hyperlinks to the sub-image files in a webpage; where a region of a sub-image layer overlaying a sub-image in a different sub-image layer is transparent.

20. The method of claim 19, where storing a sub-image layer in a sub-image file includes compressing the sub-image layer.

21. The method of claim 19, further comprising providing a stacking context in the webpage.

22. The method of claim 21, where the stacking context includes a Hyper-Text Markup Language (HTML) z-index or a Cascading Style Sheet (CSS) z-index.

23. The method of claim 19, further comprising setting an alpha-channel level of pixels in a region of a sub-image layer overlaying a sub-image in a different sub-image layer.

24. The method of claim 19, where, for one or more layers of the image stack, storing the sub-image layer in a sub-image file includes: generating a video including the sub-image layer as one or more frames of the video; and storing the video in the video file.

25. The method of claim 24, further comprising protecting the video using a digital rights management (DRM) technology.

26. The method of claim 19, where a first sub-image layer of the image stack has a different size to a second sub-image layer of the image stack.

27. The method of claim 26, further comprising specifying, in the webpage, an offset between the first sub-image layer and the second sub-image layer.

28. The method of claim 19, further comprising specifying, in the webpage, that a first subimage layer of the image stack can be enlarged, and a second sub-image layer of the image stack cannot be enlarged.

29. The method of claim 19, further comprising specifying, in the webpage, that at least a first and second sub-image layer are to be displayed as blinking images, appearing at different times.

30. The method of claim 19, further comprising generating one or more target images from a document that includes text.

31. The method of claim 19, further comprising: performing a reversible transformation of one or more sub-image layers of the image stack prior to storing the sub-image layers; and specifying an inverse transformation of the reversible transformation in the webpage.

32. The method of claim 19, where a sub-image layer of the image stack is the same size as or larger than the sub-image contained in the sub-image layer.

33. A non-transitory, computer-readable medium storing a program of instructions that, when executed on a computer, perform a method of preparing a webpage for displaying a target image on a computer display, the method comprising: generating an image stack including a plurality of sub-image layers; dividing the target image into a plurality of regions, each region containing a subimage; for each region of the target image: selecting a sub-image layer of the image stack; storing the sub-image of the region in a corresponding region of the sub-image layer; and setting pixels in corresponding regions of sub-image layers higher in the image stack than the selected sub-image layer to be transparent; for each sub-image layer of the image stack, storing the sub-image layer in a subimage file; and embedding network locators of the sub-image files in a webpage, the webpage including a stacking context for each sub-image file of the image stack.

34. A non-transitory, computer-readable medium storing a program of instructions of a webpage that, when executed by a web browser application on a computer, perform a method comprising: downloading, based on hyperlinks in the program of instructions, a plurality of subimage files, each sub-image file containing a sub-image layer of an image stack and each sub-image layer including one or more sub-images of a target image; and rendering the target image on a display screen, said rendering including rendering each sub-image layer in turn in accordance with a stacking order in the program of instructions; where a region of a sub-image layer overlaying a sub-image in a different sub-image layer is transparent.

35. The non-transitory, computer-readable medium of claim 34, where one or more subimage files of the plurality of sub-image files are video files, and the method includes: displaying videos contained in the one or more video files on the display in accordance with the stacking order in the program of instructions.

36. The non-transitory, computer-readable medium of claim 34, where rendering a sub-image layer is based, at least in part, on alpha-channel level of pixels in the sub-image layer.

37. The non-transitory, computer-readable medium of claim 34, where the program of instruction includes Hyper-Text Markup Language (HTML) instructions, and the stacking order of a sub-image layer is specified by a z-index in the HTML instructions.

38. The non-transitory, computer-readable medium of claim 34, where the program of instruction includes Cascading Style Sheet (CSS) instructions, and the stacking order of a sub-image layer is specified by a z-index in the CSS instructions.