(57)【特許請求の範囲】
【請求項１】
ＨＴＭＬファイルに記述されたcanvas要素を使用することによって原画像データを色変換して表示させる処理をコンピューターに実行させるためのプログラムであって、
前記コンピューターに、
前記原画像データを三原色分解してＲＧＢの要素画像データをビットマップキャンバス上に生成する三原色分解処理と、
ＲＧＢそれぞれについて前記要素画像データの全ピクセルの輝度値を一定比率で均一に減衰させることにより、ＲＧＢ各要素画像データを暗化要素画像データにそれぞれ変換する暗化画像変換処理と、
ＲＧＢそれぞれについて前記暗化要素画像データの全ピクセルの輝度値を一定値だけ均一に増減させることにより、ＲＧＢ各暗化要素画像データを暗化シフト要素画像データにそれぞれ変換する暗化シフト画像変換処理と、
ＲＧＢ各暗化シフト要素画像データを全て合成させて前記原画像データから色変換された画像データを生成し、生成された当該画像データを表示出力させる処理と、
を実行させるためのプログラム。
【請求項２】
前記暗化画像変換処理において、
ビットマップキャンバス上に生成されたＲＧＢ各要素画像データそれぞれに、ＨＴＭＬファイルの記述により指定されたＲＧＢ各輝度値及び透明度の画像データを均一に上書きすることにより、ＲＧＢ各要素画像データを、要素画像データの全ピクセルの輝度値を一定比率で減衰させた暗化要素画像データにそれぞれ変換する、ことを特徴とする請求項１に記載のプログラム。
【請求項３】
前記暗化シフト画像変換処理において、
ＨＴＭＬファイルの記述により指定されたＲＧＢ各輝度値が正値である場合には、
ビットマップキャンバス上に上書きされたＲＧＢ各暗化要素画像データそれぞれに、ＨＴＭＬファイルの記述により指定されたＲＧＢ各輝度値及び透明度の画像データを均一に上書きすることにより、ＲＧＢ各暗化要素画像データを、前記暗化要素画像データの全ピクセルの輝度値を一定値だけ増加させた暗化シフト要素画像データにそれぞれ変換し、
ＨＴＭＬファイルの記述により指定されたＲＧＢ各輝度値が負値である場合には、
ビットマップキャンバス上に上書きされたＲＧＢ各暗化要素画像データそれぞれに、ＨＴＭＬファイルの記述により指定されたＲＧＢ各輝度値及び透明度の画像データを均一に上書きすることにより、ＲＧＢ各暗化要素画像データを、前記暗化要素画像データの全ピクセルの輝度値を一定値だけ減少させた暗化シフト要素画像データにそれぞれ変換する、ことを特徴とする請求項２に記載のプログラム。
【請求項４】
ＨＴＭＬファイルに記述されたcanvas要素を使用することによって、ＳＷＦファイルの記述により指定された原画像データを色変換して表示させる画像処理方法であって、
コンピューターが、
前記原画像データを三原色分解してＲＧＢの要素画像データをビットマップキャンバス上に生成し、
前記ＳＷＦファイルの記述により指定された色変換パラメータに従って、ＲＧＢそれぞれについて前記要素画像データの全ピクセルの輝度値を一定比率で均一に減衰させることにより、ＲＧＢ各要素画像データを暗化要素画像データにそれぞれ変換し、
前記ＳＷＦファイルの記述により指定された色変換パラメータに従って、ＲＧＢそれぞれについて前記暗化要素画像データの全ピクセルの輝度値を一定値だけ均一に増減させることにより、ＲＧＢ各暗化要素画像データを暗化シフト要素画像データにそれぞれ変換し、
ＲＧＢ各暗化シフト要素画像データを全て合成させて前記原画像データから色変換された画像データを生成し、生成された当該画像データを表示出力させる、
ことを特徴とする画像処理方法。
【発明の詳細な説明】
【技術分野】
【０００１】
この発明は、ウエブアプリケーションの基盤となっているホームページ記述言語ＨＴＭＬの最新バージョンＨＴＭＬ５による画像操作手法に関し、具体的には、ＨＴＭＬのうち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」に対応したＲ乗算値とＧ乗算値とＢ乗算値のいずれか、もしくはすべてが等しい値である場合、乗算処理に際して原画像データの三原色分解を必要としない場合があり、また、後続の加減算処理についても三原色分解の一部もしくは全部を必要としない場合があり得る。こうした場合には三原色分解の処理を省略することも可能である。さらに、色変換の特性によっては、原画像の各色の輝度値に乗ずるべき値が０になる場合もあるし１になる場合もあり得る。同様に、各色の乗算結果に加減算するべき値が０になる場合もあるし正の最大輝度値、もしくは負の最大輝度値になる場合もあり得る。
【図１Ａ】
0005199512.tif 000002
【図１Ｂ】
0005199512.tif 000003