JP5149430B2 - 画像処理方法、ファイル変換方法、及び、ファイル変換プログラム - Google Patents

Description

この発明は、ウエブアプリケーションの基盤となっているホームページ記述言語ＨＴＭＬの最新バージョンＨＴＭＬ５による画像操作手法に関し、具体的には、ＨＴＭＬのうちcanvas要素を使用可能なものに対応したブラウザーに指定画像を指定特性で色変換して表示させる処理を行わせるＨＴＭＬファイルに関する。なお、この明細書では、ブラウザーという語を、プログラムを指す語としてだけでなく、ブラウザーが稼働するコンピューターを指す語としても使用する。

ＨＴＭＬファイルはブラウザーにより解釈され、ＨＴＭＬファイル制作者の意図したホームページが表示される。つまり、ＨＴＭＬファイルはＨＴＭＬ言語により記述され、ブラウザーに特定のホームページの表示処理を実行させるコンピュータープログラムの一種であるといえる。したがって、この発明を適用して記述されたＨＴＭＬファイルはプログラムであり、この発明はプログラムに関する発明である。

さらに、Ａdobe Flash（登録商標）などによって普及しているＳＷＦファイルを本発明に係るＨＴＭＬファイルに自動変換するファイル変換方法およびファイル変換プログラムが、本発明の射程に含まれている。

出願人はＭｏｂａｇｅ（商標登録出願中）と名付けたソーシャルメディアを運営し、怪盗ロワイヤル（登録商標）などの多くの種類のゲームコンテンツを携帯電話機向けに提供している。こうしたゲームコンテンツの多くはＨＴＭＬファイルやＳＷＦファイルにより構成されており、ゲーム中のアニメーション表現はＳＷＦファイルにより創りだされている。よく知られているように、ＳＷＦファイルを制作者の意図どおりに情報端末のブラウザーで再生するには、情報端末のブラウザーにＳＷＦファイルを実行するプログラム（Flash Player（登録商標）が有名である）が組み込まれている必要がある。

大流行のスマートフォンやタブレット端末などと呼ばれる最新型の情報端末、その他一部の情報端末では、ブラウザーがFlash Playerに対応していない機種がある。こうしたFlash Playerに対応していないブラウザーでは、ゲームコンテンツ中のＳＷＦファイルによるアニメーション表現を正しく再生することができない。一方、Flash Player非対応の最新型の情報端末では、ブラウザーがＨＴＭＬ５に対応しているものが多い。

ゲームコンテンツ中のＳＷＦファイルによるアニメーション表現の典型的な手法の１つを説明する。ゲームキャラクタのフルカラーの画像データがある。この画像データを原画像データとし、これを登場させる場面のゲーム状況に応じて、原画像データの色をさまざまに変化させるという手法である。つまり、１つの原画像データの色を適宜に変換しながらさまざまなゲーム場面に登場（表示）させるのである。

ＳＷＦ形式では、上記の手法を簡便に使用できるように、原画像データに対する色変換特性を２種類のパラメータ「MultTerm」および「AddTerm」で表現することとしている。

「MultTerm」は、原画像データの全ピクセルのＲＧＢ輝度値を指定比率で低下させるパラメータであり、Ｒ輝度値・Ｇ輝度値・Ｂ輝度値の減衰率をそれぞれRedMultTerm・GreenMultTerm・BlueMultTermにより個別に指定することができる。

「AddTerm」は、原画像データの全ピクセルのＲＧＢ輝度値に対して指定値だけ加算または減算するパラメータであり、Ｒ輝度値・Ｇ輝度値・Ｂ輝度値に対する加減算値をそれぞれRedAddTerm・GreenAddTerm・BlueAddTermにより個別に指定することができる。

ＳＷＦファイルにおいて原画像データを指定する記述と色変換パラメータ「MultTerm」および「AddTerm」の値を記述しておくと、ＳＷＦファイルを実行するプログラムがこれを解釈し、原画像データを指定特性で色変換した画像データを高速で生成して表示する。

＝＝＝発明が解決しようとする課題＝＝＝
この発明を創作するそもそもの契機は、上述したＳＷＦファイルとFlash Playerの組み合わせにおける原画像を色変換して高速表示する機能を、Flash Playerに非対応でありＨＴＭＬ５に対応したブラウザーとＨＴＭＬファイルの組み合わせにおいて実現しようということである。

上述した色変換の処理は、煎じ詰めると、原画像データの全ピクセルのＲＧＢ各輝度値に一定値を乗じるとともに、乗算結果に別の一定値を加算または減算することである。そこで、ＨＴＭＬファイル中に JavaScript で記述したプログラムの機能により、ＨＴＭＬ５のＡＰＩを使い、原画像データの各ピクセルのＲＧＢ各輝度値を１ピクセルずつ逐次に取得して前記の計算を行い、計算結果で原画像データの各ピクセルを更新する処理をブラウザーに実行させる方式が試みられた。

この試みは完全に失敗であった。処理対象の画像データのピクセル数はきわめて多いので、ＨＴＭＬ５のＡＰＩで規定されたピクセル操作機能を使い、ＨＴＭＬファイルからブラウザーにピクセル操作を指示して画像データの全ピクセルのデータを更新するのにはかなりの時間がかかり、ブラウザーがＨＴＭＬファイルを読み込んでから色変換後の画像が表示されるまでの時間が許容できない長さになる。

＝＝＝発明の概要＝＝＝
ＨＴＭＬ５では、ブラウザーによりビットマップ形式の画像を描いたり色を塗ったりすることを可能にするcanvas要素の仕様が策定された。ＨＴＭＬファイルにおいてcanvas要素を使った プログラムを記述することにより、指定した画像データをビットマップキャンバスに読み込み、それを下地画像とし、その上に図形を描いて指定のモードで合成し、あらたな画像をビットマップキャンバスに生成して表示することができる。

この発明に係るＨＴＭＬファイルにおいては、まず、指定した画像データ（原画像データ）をビットマップキャンバスに読み込む。そして、この原画像データに対して上述したようなピクセル操作を行うのではなく、原画像データを下地とし、適切な合成モードに設定した上で原画像データの全域を適切な色で均一に塗りつぶす、という処理を何回か行うことで原画像データの色を変換して表示するプログラミング方式を創作した。このプログラミング方式に従ってＨＴＭＬファイルを記述することで、ブラウザーがＨＴＭＬファイルを読み込んで色変換後の画像を表示するのに要する処理時間がきわめて短くなる。

＝＝＝発明の核心＝＝＝
この発明の核心とするところは、つぎの事項（１）〜（９）により特定されるＨＴＭＬファイルである。
（１）ＨＴＭＬのうちcanvas要素を使用可能なものに対応したブラウザーに指定画像を指定特性で色変換して表示させる処理を行わせるＨＴＭＬファイルであること
（２）ＨＴＭＬファイルは、記述１〜記述５を含むこと
（３）記述１は、ビットマップ展開された３個の同じ原画像データを生成させること
（４）記述２は、darker合成モードにより、高輝度Ｒ原色データを原画像データに均一に上書きさせ、高輝度Ｇ原色データを原画像データに均一に上書きさせ、高輝度Ｂ原色データを原画像データに均一に上書きさせ、原画像データを三原色分解したＲ原画像データ・Ｇ原画像データ・Ｂ原画像データを生成させること
（５）記述３は、原画像データのＲＧＢの各輝度値を減衰させる割合いに対応した、Ｒ減衰処理用の輝度値・透明度と、Ｇ減衰処理用の輝度値・透明度と、Ｂ減衰処理用の輝度値・透明度を含むこと
（６）記述３は、標準描画モード等により、Ｒ減衰処理用の輝度値・透明度の黒データをＲ原画像データに均一に上書きさせることにより暗化Ｒ画像データを生成させ、Ｇ減衰処理用の輝度値・透明度の黒データをＧ原画像データに均一に上書きさせることにより暗化Ｇ画像データを生成させ、Ｂ減衰処理用の輝度値・透明度の黒データをＢ原画像データに均一に上書きさせることにより暗化Ｂ画像データを生成させること
（７）記述４は、原画像データのＲＧＢの各輝度値に加算または減算する値に対応した、Ｒ加減算処理用の輝度値・透明度のＲ原色データと、Ｇ加減算処理用の輝度値・透明度のＧ原色データと、Ｂ加減算処理用の輝度値・透明度のＢ原色データを含むこと
（８）記述４は、加算の場合はlighter 合成モードにより、減算の場合はdarker合成モードにより、Ｒ加減算処理用の輝度値・透明度のＲ原色データを暗化Ｒ画像データに均一に上書きさせることにより暗化シフトＲ画像データを生成させ、Ｇ加減算処理用の輝度値・透明度のＧ原色データを暗化Ｇ画像データに均一に上書きさせることにより暗化シフトＧ画像データを生成させ、Ｂ加減算処理用の輝度値・透明度のＢ原色データを暗化Ｂ画像データに均一に上書きさせることにより暗化シフトＢ画像データを生成させること
（９）記述５は、暗化シフトＲ画像データと暗化シフトＧ画像データと暗化シフトＢ画像データを合成させて色変換後の画像データとして表示出力させること

この発明のＨＴＭＬファイルの核心部分をなすプログラムの記述例（実施例ではJavaScriptを用いているが、実際にはプログラム言語は問わない）（前半） この発明のＨＴＭＬファイルの核心部分をなすプログラムの記述例（実施例ではJavaScriptを用いているが、実際にはプログラム言語は問わない）（後半）

＝＝＝ＳＷＦファイルから本発明のＨＴＭＬファイルへ＝＝＝
以下では、本発明のファイル変換方法（ファイル変換プログラム）により既存のＳＷＦファイルを本発明のＨＴＭＬファイルに変換した実施例として説明する。また、変換元のＳＷＦファイルは色変換処理の対象となる原画像やその他のテキスト情報などを含んだ文書情報が規定されているところ、以下においては、色変換処理の対象となる原画像にのみ着目し、変換後のＨＴＭＬファイルにおいて原画像を色変換処理して表示出力するためのプログラム論理を摘出して説明する。

＝＝＝原画像とMultTermとAddTerm ＝＝＝
ファイル変換プログラムにより、ＳＷＦファイルから抽出した色変換対象である原画像を特定する画像ファイル名「test.png」を図１Ａ・図１Ｂに示したＨＴＭＬファイル実施例の行番号６４に記述している。また、この原画像を色変換処理の特性を規定する乗算パラメータ「MultTerm」と加減算パラメータ「AddTerm」を上記ＳＷＦファイルから抽出し、ＨＴＭＬファイル実施例の行番号５と６に記述している。

ＨＴＭＬでは、ＲＧＢの最大輝度値を２５５としている。これを前提とし、行番号５の記述 {R: 50, G: 75, B: 200} は、ファイル名「test.png」のビットマップ画像の各ピクセル輝度値に以下の乗算処理を加えることを示している。
（１）Ｒ輝度値に（５０／２５５）を乗じる。
（２）Ｇ輝度値に（７５／２５５）を乗じる。
（３）Ｂ輝度値に（２００／２５５）を乗じる。

行番号６の記述 {R: 127, G: 56, B: -100}は、上記の乗算後の各ピクセル輝度値に以下の加減算処理を行うことを示している。
（４）Ｒ輝度値の乗算結果に１２７を加算する。
（５）Ｇ輝度値の乗算結果に５６を加算する。
（６）Ｂ輝度値の乗算結果に１００を減算する。
以上が元となるＳＷＦファイルから抽出した情報に基づいて作成されたＨＴＭＬファイルの記述の一部である。

＝＝＝原画像の三原色分解＝＝＝
ＨＴＭＬファイル実施例では、行番号９〜３０により色変換処理の準備をし、行番号３３〜３６の処理を色を変えて３回行うことで、ファイル名「test.png」の原画像を三原色分解し、Ｒ原画像データとＧ原画像データとＢ原画像データを用意したキャンバス上に生成する。

行番号３３の処理で原画像データをキャンバス上に展開する。行番号３４の処理で描画合成モードを「darker」合成モードに設定する。この状態で、ＲＧＢ輝度値（２５５、０、０）の高輝度Ｒ原色データを原画像データに均一に上書きすることでＲ原画像データが生成され、ＲＧＢ輝度値（０、２５５、０）の高輝度Ｇ原色データを原画像データに均一に上書きすることでＧ原画像データが生成され、ＲＧＢ輝度値（０、０、２５５）の高輝度Ｂ原色データを原画像データに均一に上書きすることでＢ原画像データが生成される。これらの処理を行番号３５と３６で行う。

＝＝＝乗算処理＝＝＝
行番号３９〜４２は乗算処理の記述である。まずＲ輝度値に（５０／２５５）を乗じる処理について説明する。描画合成モードは標準モードに設定する。このモードで、ＲＧＢ輝度値（０、０、０）の黒色で透明度（アルファ値）が１−（５０／２５５）の黒データをキャンバス上のＲ原画像データに均一に上書きすることで、Ｒ原画像データの全ピクセルの輝度値を一定比率で減衰させた暗化Ｒ画像データが生成される。

同様に、標準モードにおいて、ＲＧＢ輝度値（０、０、０）の黒色で透明度（アルファ値）が１−（７５／２５５）の黒データをキャンバス上のＧ原画像データに均一に上書きすることで、Ｇ原画像データの全ピクセルの輝度値を一定比率で減衰させた暗化Ｇ画像データが生成される。

同様に、標準モードにおいて、ＲＧＢ輝度値（０、０、０）の黒色で透明度（アルファ値）が１−（２００／２５５）の黒データをキャンバス上のＢ原画像データに均一に上書きすることで、Ｂ原画像データの全ピクセルの輝度値を一定比率で減衰させた暗化Ｂ画像データが生成される。

＝＝＝加減算処理＝＝＝
行番号４５〜５５は加減算処理の記述である。ＲおよびＧの「AddTerm 」の値は正値であり、この場合は加算処理を行うように、描画合成モードを「lighter 」合成モードに設定する。まずＲ輝度値に１２７を加算する処理について説明する。ここでは、ＲＧＢ輝度値（２５５、０、０）で透明度（アルファ値）が（１２７／２５５）のＲ原色データをキャンバス上の暗化Ｒ画像データに均一に上書きすることで、暗化Ｒ画像データの全ピクセルの輝度値を一定値だけ増加させた暗化シフトＲ画像データが生成される。

同様に、「lighter 」合成モードにおいて、ＲＧＢ輝度値（０、２５５、０）で透明度（アルファ値）が（５６／２５５）のＧ原色データをキャンバス上の暗化Ｇ画像データに均一に上書きすることで、暗化Ｇ画像データの全ピクセルの輝度値を一定値だけ増加させた暗化シフトＧ画像データが生成される。

Ｂの「AddTerm 」の値は負値（−１００）であり、この場合は減算処理を行うように、描画合成モードを「darker」合成モードに設定する。そしてＲＧＢ輝度値（０、０、０）の黒色で透明度（アルファ値）が（１００／２５５）の黒データをキャンバス上の暗化Ｂ画像データに均一に上書きすることで、暗化Ｂ画像データの全ピクセルの輝度値を一定値だけ減少させた暗化シフトＢ画像データが生成される。

＝＝＝三原色画像の合成＝＝＝
最後に、行番号５８〜６２の処理により、描画合成モードを「lighter 」合成モードに設定し、上記のように生成された暗化シフトＲ画像データと暗化シフトＧ画像データと暗化シフトＢ画像データとを１つのキャンバス上に塗り重ねることで、ファイル名「test.png」の原画像データを乗算パラメータ「MultTerm」と加減算パラメータ「AddTerm」に基づいて色変換した画像データが完成し、これが表示出力される。

＝＝＝発明の効果＝＝＝
以上のＨＴＭＬファイル実施例の説明から明らかなように、指定画像を指定特性で色変換して表示させる処理について、ＨＴＭＬファイルからブラウザーにピクセル単位のデータ操作を指示するのではなく、キャンバス上に展開したビットマップ画像（原画像データおよびその派生データ）の全域に適切な輝度値・透明度の色データを均一に上書きする処理を指示しているのである。そのため、ＨＴＭＬファイルからブラウザーに対してピクセル単位のデータ操作を指示するものに比べ、処理速度は格段に高速化し、ブラウザーがＨＴＭＬファイルを読み込んで色変換後の画像を表示するのに要する処理時間がきわめて短くなる。

＝＝＝補足事項＝＝＝
「MultTerm」に対応したＲ乗算値とＧ乗算値とＢ乗算値のいずれか、もしくはすべてが等しい値である場合、乗算処理に際して原画像データの三原色分解を必要としない場合があり、また、後続の加減算処理についても三原色分解の一部もしくは全部を必要としない場合があり得る。こうした場合には三原色分解の処理を省略することも可能である。さらに、色変換の特性によっては、原画像の各色の輝度値に乗ずるべき値が０になる場合もあるし１になる場合もあり得る。同様に、各色の乗算結果に加減算するべき値が０になる場合もあるし正の最大輝度値、もしくは負の最大輝度値になる場合もあり得る。

Claims (3)

1. つぎの事項（１）〜（９）により特定されるＨＴＭＬファイルがコンピューターによって解釈されることにより、つぎの事項（３）、（４）、（６）、（８）、（９）に記載された画像処理が行われる画像処理方法。
   （１）ＨＴＭＬのうちcanvas要素を使用可能なものに対応したブラウザーに指定画像を指定特性で色変換して表示させる処理を行わせるＨＴＭＬファイルであること
   （２）ＨＴＭＬファイルは、記述１〜記述５を含むこと
   （３）記述１は、ビットマップ展開された３個の同じ原画像データを生成させること
   （４）記述２は、darker合成モードにより、高輝度Ｒ原色データを原画像データに均一に上書きさせ、高輝度Ｇ原色データを原画像データに均一に上書きさせ、高輝度Ｂ原色データを原画像データに均一に上書きさせ、原画像データを三原色分解したＲ原画像データ・Ｇ原画像データ・Ｂ原画像データを生成させること
   （５）記述３は、原画像データのＲＧＢの各輝度値を減衰させる割合いに対応した、Ｒ減衰処理用の輝度値・透明度と、Ｇ減衰処理用の輝度値・透明度と、Ｂ減衰処理用の輝度値・透明度を含むこと
   （６）記述３は、標準描画モードにより、Ｒ減衰処理用の輝度値・透明度の黒データをＲ原画像データに均一に上書きさせることにより暗化Ｒ画像データを生成させ、Ｇ減衰処理用の輝度値・透明度の黒データをＧ原画像データに均一に上書きさせることにより暗化Ｇ画像データを生成させ、Ｂ減衰処理用の輝度値・透明度の黒データをＢ原画像データに均一に上書きさせることにより暗化Ｂ画像データを生成させること
   （７）記述４は、原画像データのＲＧＢの各輝度値に加算または減算する値に対応した、Ｒ加減算処理用の輝度値・透明度のＲ原色データと、Ｇ加減算処理用の輝度値・透明度のＧ原色データと、Ｂ加減算処理用の輝度値・透明度のＢ原色データを含むこと
   （８）記述４は、加算の場合はlighter 合成モードにより、減算の場合はdarker合成モードにより、Ｒ加減算処理用の輝度値・透明度のＲ原色データを暗化Ｒ画像データに均一に上書きさせることにより暗化シフトＲ画像データを生成させ、Ｇ加減算処理用の輝度値・透明度のＧ原色データを暗化Ｇ画像データに均一に上書きさせることにより暗化シフトＧ画像データを生成させ、Ｂ加減算処理用の輝度値・透明度のＢ原色データを暗化Ｂ画像データに均一に上書きさせることにより暗化シフトＢ画像データを生成させること
   （９）記述５は、暗化シフトＲ画像データと暗化シフトＧ画像データと暗化シフトＢ画像データを合成させて色変換後の画像データとして表示出力させること
2. ＳＷＦファイルを請求項１に記載のＨＴＭＬファイルに変換するコンピューター情報処理方法であって、
   ＳＷＦファイル中の画像データを指定する情報を抽出するとともに、当該画像データを修飾している RedMultTerm・GreenMultTerm・BlueMultTerm および RedAddTerm・GreenAddTerm・BlueAddTerm を抽出し、
   抽出した前記情報により指定された画像データを前記記述１における原画像データとし、
   抽出した RedMultTerm・GreenMultTerm・BlueMultTerm に基づいて、前記記述３におけるＲ減衰処理用の輝度値・透明度とＧ減衰処理用の輝度値・透明度とＢ減衰処理用の輝度値・透明度を作成し、
   抽出した RedAddTerm に基づいて、これが正値であればその値に対応した前記記述４におけるＲ加算処理用の輝度値・透明度のＲ原色データを作成し、これが負値であればその値に対応した前記記述４におけるＲ減算用の輝度値・透明度のＲ原色データを作成し、
   抽出したGreenAddTermに基づいて、これが正値であればその値に対応した前記記述４におけるＧ加算処理用の輝度値・透明度のＧ原色データを作成し、これが負値であればその値に対応した前記記述４におけるＧ減算用の輝度値・透明度のＧ原色データを作成し、
   抽出したBlueAddTerm に基づいて、これが正値であればその値に対応した前記記述４におけるＢ加算処理用の輝度値・透明度のＢ原色データを作成し、これが負値であればその値に対応した前記記述４におけるＢ減算用の輝度値・透明度のＢ原色データを作成する
   ファイル変換方法。
3. 請求項２に記載のファイル変換方法をコンピューターに行わせるファイル変換プログラ
   ム。

Images