JP5199512B2 - Program and image processing method - Google Patents

Description

  The present invention relates to an image manipulation technique based on the latest version HTML5 of a homepage description language HTML that is the basis of a web application. Specifically, a designated image is designated in a browser corresponding to an HTML that can use a canvas element. The present invention relates to an HTML file that performs a process of color-converting and displaying with characteristics. In this specification, the word browser is used not only as a word indicating a program but also as a word indicating a computer on which the browser is operated.

  The HTML file is interpreted by the browser, and the home page intended by the HTML file creator is displayed. That is, the HTML file is described in the HTML language, and can be said to be a kind of computer program that causes a browser to execute a specific homepage display process. Therefore, the HTML file described by applying the present invention is a program, and the present invention relates to a program.

  Furthermore, the scope of the present invention includes a file conversion method and a file conversion program for automatically converting a SWF file popularized by Adobe Flash (registered trademark) into an HTML file according to the present invention.

  The applicant operates a social media named “Mobage” (pending trademark registration), and provides many kinds of game contents such as Kaito Royale (registered trademark) for mobile phones. Many of these game contents are composed of HTML files and SWF files, and animation expressions in the game are created by SWF files. As is well known, a SWF file is played on the browser of the information terminal in order to play it on the browser of the information terminal as intended by the creator (Flash Player (registered trademark) is famous). Must be built in.

  Some of the latest information terminals, such as the popular smartphones and tablet terminals, and some other information terminals, browsers do not support Flash Player. Such browsers that do not support Flash Player cannot correctly reproduce the animation expression by the SWF file in the game content. On the other hand, many of the latest information terminals that do not support Flash Player have browsers that support HTML5.

  One typical technique for expressing an animation using a SWF file in game content will be described. There is full color image data of the game character. This image data is used as original image data, and the color of the original image data is changed variously according to the game situation of the scene where it appears. That is, it appears (displays) in various game scenes while appropriately converting the color of one original image data.

  In the SWF format, the color conversion characteristics for the original image data are expressed by two types of parameters “MultTerm” and “AddTerm” so that the above method can be used easily.

  “MultTerm” is a parameter that reduces the RGB luminance value of all pixels of the original image data by the specified ratio, and specifies the attenuation rate of R luminance value, G luminance value, and B luminance value individually by RedMultTerm, GreenMultTerm, and BlueMultTerm, respectively. can do.

  “AddTerm” is a parameter for adding or subtracting a specified value to or from the RGB luminance value of all pixels of the original image data. Can be specified individually.

  If the description specifying the original image data and the values of the color conversion parameters “MultTerm” and “AddTerm” are described in the SWF file, the program that executes the SWF file interprets this, and the original image data is colored with the specified characteristics. The converted image data is generated and displayed at high speed.

=== Problems to be solved by the invention ===
The original opportunity to create this invention is the combination of the above-mentioned SWF file and Flash Player, which is a combination of a browser and HTML file that is not compatible with Flash Player and that supports high-speed display of the original image by color conversion. It is to achieve in.

  The above-described color conversion process is to multiply the RGB luminance values of all the pixels of the original image data by a certain value and add or subtract another certain value to the multiplication result. Therefore, using the function of the program described in JavaScript in the HTML file, using the HTML5 API, the RGB luminance values of each pixel of the original image data are sequentially obtained one pixel at a time, and the above calculation is performed. An attempt was made to cause the browser to execute a process for updating each pixel of the original image data.

  This attempt was completely unsuccessful. Since the number of pixels of the image data to be processed is extremely large, it is necessary to use the pixel operation function defined by the HTML5 API to instruct the browser to perform pixel operation from the HTML file and update the data of all pixels of the image data It takes a considerable amount of time, and the time from when the browser reads the HTML file until the image after color conversion is displayed is unacceptably long.

=== Summary of Invention ===
In HTML5, a canvas element specification that allows a browser to draw and paint a bitmap image has been established. By writing a program that uses the canvas element in an HTML file, the specified image data is read into the bitmap canvas, it is used as the base image, a figure is drawn on it, and the new image is composed in the specified mode. It can be generated and displayed on a bitmap canvas.

  In the HTML file according to the present invention, first, designated image data (original image data) is read into a bitmap canvas. Then, instead of performing the pixel operation as described above on the original image data, the original image data is used as a background, and an appropriate composition mode is set, and the entire area of the original image data is uniformly painted with an appropriate color. A programming method was created by converting the color of the original image data and displaying it by performing the above process several times. By describing the HTML file in accordance with this programming method, the processing time required for the browser to read the HTML file and display the color-converted image becomes extremely short.

=== The core of the invention ===
The core of the present invention is an HTML file specified by the following items (1) to (9).
(1) It is an HTML file that causes a browser that supports the canvas element that can use the canvas element to perform processing for color-converting and displaying a specified image with specified characteristics. (2) The HTML file is described in the description 1 to description. (3) Description 1 generates three identical original image data that have been bitmap-expanded. (4) Description 2 uniformly converts high-luminance R primary color data into original image data in the darker synthesis mode. R original image data / G original image data obtained by uniformly overwriting the original image data with the high luminance G primary color data, overwriting the high luminance B primary color data with the original image data uniformly, and separating the original image data into the three primary colors. Generation of B original image data (5) Description 3 describes the luminance value / transparency for R attenuation processing corresponding to the ratio of attenuating each luminance value of RGB of the original image data, and G Including luminance value / transparency for attenuation processing and luminance value / transparency for B attenuation processing (6) Description 3 describes that the black data of the luminance value / transparency for R attenuation processing is converted to the R original in the standard drawing mode. The darkened R image data is generated by uniformly overwriting the image data, and the darkened G image data is generated by uniformly overwriting the G original image data with the black value of the brightness value and transparency for G attenuation processing. , Generation of darkened B image data by uniformly overwriting B original image data with black data of luminance value / transparency for B attenuation processing (7) Description 4 describes RGB luminance values of the original image data R addition / subtraction processing brightness value / transparency R primary color data, G addition / subtraction processing brightness value / transparency G primary color data, and B addition / subtraction processing brightness value / transparency B primary color day (8) In description 4, the lighter composition mode is used for addition and the darker composition mode is used for subtraction, so that the R primary color data for luminance value / transparency for R addition / subtraction processing is uniformly converted into darkened R image data. The darkening shift R image data is generated by overwriting, and the darkening G image data is generated by uniformly overwriting the darkening G image data with the G primary color data of the luminance value / transparency for G addition / subtraction processing, The dark shift B image data is generated by uniformly overwriting the dark B image data with the B primary color data of the brightness value and transparency for the B addition / subtraction process. (9) Description 5 includes the dark shift R image data and The darkening shift G image data and the darkening shift B image data are combined and displayed and output as image data after color conversion.

Description example of the program that forms the core of the HTML file of the present invention (in the embodiment, JavaScript is used, but the programming language is not particularly limited) (first half) Description example of the program that forms the core of the HTML file of the present invention (JavaScript is used in the embodiment, but the programming language is not particularly limited) (second half)

=== From SWF file to HTML file of the present invention ===
In the following, an example in which an existing SWF file is converted into an HTML file of the present invention by the file conversion method (file conversion program) of the present invention will be described. In addition, in the conversion source SWF file, document information including an original image to be subjected to color conversion processing and other text information is defined. In the following description, only the original image to be subjected to color conversion processing is specified. Attention is focused on the program logic for color-converting and displaying the original image in the converted HTML file.

=== Original image, MultTerm, and AddTerm ===
An image file name “test.png” for specifying an original image which is a color conversion target extracted from the SWF file by the file conversion program is described in line number 64 of the HTML file embodiment shown in FIGS. 1A and 1B. . Further, a multiplication parameter “MultTerm” and an addition / subtraction parameter “AddTerm” that define the characteristics of the color conversion process are extracted from the SWF file and described in line numbers 5 and 6 of the HTML file embodiment.

In HTML, the maximum luminance value of RGB is set to 255. Based on this assumption, the description of line number 5 {R: 50, G: 75, B: 200} adds the following multiplication process to each pixel brightness value of the bitmap image with the file name “test.png”: Show.
(1) Multiply the R luminance value by (50/255).
(2) Multiply the G luminance value by (75/255).
(3) Multiply the B luminance value by (200/255).

The description {R: 127, G: 56, B: -100} in line number 6 indicates that the following addition / subtraction processing is performed on each pixel luminance value after the multiplication.
(4) 127 is added to the multiplication result of the R luminance value.
(5) 56 is added to the multiplication result of the G luminance value.
(6) Subtract 100 from the multiplication result of the B luminance value.
The above is a part of the description of the HTML file created based on the information extracted from the original SWF file.

=== Three primary color separation of original image ===
In the embodiment of the HTML file, the color conversion process is prepared by line numbers 9 to 30, and the process of line numbers 33 to 36 is performed three times with different colors, so that the original image with the file name “test.png” has three primary colors. The original R data, the G original image data, and the B original image data are generated on the prepared canvas.

  The original image data is developed on the canvas by the process of line number 33. The drawing composition mode is set to the “darker” composition mode in the process of line number 34. In this state, the R original image data is generated by uniformly overwriting the original image data with the high luminance R primary color data of the RGB luminance values (255, 0, 0), and the RGB luminance values (0, 255, 0) are obtained. G primary image data is generated by uniformly overwriting the high luminance G primary color data on the original image data, and the high luminance B primary color data of RGB luminance values (0, 0, 255) is uniformly overwritten on the original image data. Thus, B original image data is generated. These processes are performed at line numbers 35 and 36.

=== Multiplication processing ===
Line numbers 39 to 42 are descriptions of multiplication processing. First, a process of multiplying the R luminance value by (50/255) will be described. The drawing composition mode is set to the standard mode. In this mode, the R original image data on the canvas is uniformly overwritten with black data of RGB luminance values (0, 0, 0) and transparency (alpha value) of 1- (50/255). Darkened R image data in which the luminance values of all the pixels of the original image data are attenuated at a constant ratio is generated.

  Similarly, in the standard mode, black data of RGB luminance values (0, 0, 0) and transparency (alpha value) of 1- (75/255) are uniformly overwritten on the G original image data on the canvas. Thus, darkened G image data in which the luminance values of all the pixels of the G original image data are attenuated at a constant ratio is generated.

  Similarly, in the standard mode, black data of RGB luminance values (0, 0, 0) and transparency (alpha value) of 1- (200/255) are uniformly overwritten on the B original image data on the canvas. Thus, darkened B image data in which the luminance values of all the pixels of the B original image data are attenuated at a constant ratio is generated.

=== Addition / subtraction processing ===
Line numbers 45 to 55 are descriptions of addition / subtraction processing. The values of “AddTerm” for R and G are positive values. In this case, the drawing composition mode is set to the “lighter” composition mode so as to perform addition processing. First, a process of adding 127 to the R luminance value will be described. Here, the dark R image is obtained by uniformly overwriting the dark R image data on the canvas with R primary color data having an RGB luminance value (255, 0, 0) and transparency (alpha value) (127/255). Darkening shift R image data in which the luminance values of all the pixels of the data are increased by a certain value is generated.

  Similarly, in the “lighter” composition mode, the G primary color data with RGB luminance values (0, 255, 0) and transparency (alpha value) (56/255) are uniformly overwritten on the darkened G image data on the canvas. Thus, darkened shift G image data in which the luminance values of all the pixels of the darkened G image data are increased by a certain value is generated.

  The value of “AddTerm” in B is a negative value (−100). In this case, the drawing composition mode is set to the “darker” composition mode so as to perform subtraction processing. Then, the dark B image data is uniformly overwritten on the dark B image data on the canvas with black data of RGB luminance values (0, 0, 0) and transparency (alpha value) (100/255). Darkening-shifted B image data in which the luminance values of all the pixels are reduced by a certain value is generated.

=== Composition of three primary color images ===
Finally, the drawing composition mode is set to the “lighter” composition mode by the processing of the line numbers 58 to 62, and the darkening shift R image data, the darkening shift G image data, and the darkening shift B generated as described above. By painting the image data on a single canvas, the original image data of the file name “test.png” is color-converted based on the multiplication parameter “MultTerm” and the addition / subtraction parameter “AddTerm”. Display output.

=== Effect of Invention ===
As is clear from the above description of the HTML file embodiment, the processing for displaying the specified image by color conversion with the specified characteristics is displayed on the canvas instead of instructing the browser to operate the data in units of pixels from the HTML file. A process for uniformly overwriting color data with appropriate luminance values and transparency over the entire bitmap image (original image data and its derivative data) is instructed. Therefore, the processing speed is significantly faster than that instructing the browser to operate the data in units of pixels from the HTML file, and the processing time required for the browser to read the HTML file and display the image after color conversion. It becomes very short.

=== Additional Notes ===
When any or all of the R multiplication value, the G multiplication value, and the B multiplication value corresponding to “MultTerm” are equal values, the three primary color separation of the original image data may not be required in the multiplication process, and the subsequent As for the addition / subtraction processing, there may be a case where some or all of the three primary color separations are not required. In such a case, the process of separating the three primary colors can be omitted. Furthermore, depending on the characteristics of color conversion, the value to be multiplied by the luminance value of each color of the original image may be 0 or may be 1. Similarly, the value to be added to or subtracted from the multiplication result of each color may be 0, or may be a positive maximum luminance value or a negative maximum luminance value.

Claims (4)

A program for causing a computer to execute processing for color-converting and displaying original image data by using a canvas element described in an HTML file,
On the computer,
Three primary color separation processing for generating RGB elemental image data on a bitmap canvas by separating the original image data into three primary colors;
Darkening image conversion processing for converting each element image data of RGB into darkening element image data by uniformly attenuating the luminance values of all the pixels of the element image data at a constant ratio for each of RGB;
Darkening shift image conversion processing for converting each of the RGB darkening element image data into darkening shift element image data by uniformly increasing / decreasing the luminance values of all pixels of the darkening element image data by a certain value for each of RGB When,
A process of combining all the RGB darkening shift element image data to generate color-converted image data from the original image data, and displaying and outputting the generated image data;
A program for running In the dark image conversion process,
Each RGB element image data generated on the bitmap canvas is uniformly overwritten with RGB brightness values and transparency image data specified by the description of the HTML file, so that each RGB element image data is converted into an element image. 2. The program according to claim 1, wherein the brightness values of all the pixels of the data are respectively converted into darkening element image data attenuated at a constant ratio. In the darkening shift image conversion process,
When the RGB luminance values specified by the description of the HTML file are positive values,
Each of the RGB darkening element image data overwritten on the bitmap canvas is uniformly overwritten with the RGB brightness values and transparency image data specified by the description of the HTML file. Is converted into darkening shift element image data in which the luminance values of all pixels of the darkening element image data are increased by a certain value, respectively.
When each luminance value specified by the description of the HTML file is a negative value,
Each of the RGB darkening element image data overwritten on the bitmap canvas is uniformly overwritten with the RGB brightness values and transparency image data specified by the description of the HTML file. The program according to claim 2, wherein the program is converted into darkening shift element image data in which luminance values of all pixels of the darkening element image data are reduced by a certain value. An image processing method for displaying original image data specified by a description in a SWF file by performing color conversion by using a canvas element described in an HTML file,
Computer
The original image data is separated into three primary colors to generate RGB element image data on a bitmap canvas,
According to the color conversion parameter specified by the description of the SWF file, the luminance values of all the pixels of the element image data are uniformly attenuated at a constant ratio for each of RGB, thereby converting the RGB element image data into dark element image data. Convert each
In accordance with the color conversion parameter specified by the description of the SWF file, each of the RGB darkening element image data is darkened by uniformly increasing / decreasing the luminance values of all the pixels of the darkening element image data by a certain value for each of RGB. Convert to shift element image data,
All the RGB darkening shift element image data are combined to generate image data color-converted from the original image data, and the generated image data is displayed and output.
An image processing method.

Images