Photoshop UXP Imaging API beta触ってみた その2
前回Photoshop UXP Imaging API beta触ってみたの続きです。前回基本の機能をざっくり試してみましたが今回少し突っ込んだ話になります。ゼロからピクセルを生成する話とピクセル処理に関する話です。
ゼロからイメージを生成する
イメージの生成ですが前回の選択範囲の生成と似ています。選択範囲の場合グレーの情報のみしかありませんでしたがイメージは例えばRGBの場合3色あります。ピクセルの数は幅+高さ+チャンネルの数になります。imaging APIはArrayBuffer形式にピクセル総数のlengthだけnumber値を渡さなければなりません。なのでArrayBufferオブジェクトに上記のピクセル数を渡します。
例えばこれに真っ黒な色で全ての色を塗りたい場合はこのArrayの値全てに0を渡すことになります。
しかしRGBの値も全てこのArray内に混じっています。このRGBの値はR,G,Bという順番で並んでいるのでfor文でチャンネルの数だけindexの値を
増やしていけばわかりやすい形でRGBの値を扱いやすくなるでしょう。実際公式のサンプルコードもこの形で扱っています。
この後にこの生成した値をそのままcreateImageDataFromBufferメソッドにArray.bufferオブジェクトを渡せばそのまま生成できます。
xとyの軸が分かりづらい
最終的にArray.Buffer形式に変換しなければならないのですがArray式で横並びのデータなのでxとy軸が分かりづらいです。しかしこのnumber値はx0,y0からx1,x2,x3…と並んでxの値が幅を超えた時点でyの軸が次に軸に移動してxはまた0から x:0 y:1, x1 y:1, x2 y:1と続きます。
つまりxとyの入れ子の繰り返し文にすれば分かりやすくなります。これも公式のサンプルから参照しました。
これで何かイメーシを生成します、例えば画面の対角線上に線を引く場合はxとyの値が等しい時にピクセルを塗っていけば斜め線になります。
現状線を引く、円を描くといった基本のピクセル操作のAPIが存在しません。勿論自力で実装することも可能ですがこれらもそのうち実装されるのでしょうか。
最初にフラットに塗って後から新たに個別にピクセルを塗る
真っ黒なキャンバスにイメージを描く場合に例えばノイズを加える時に黒で最初にずべてのピクセルを塗って
後からランダムパターンで塗るということも可能です。
これで事前に円を描くピクセル情報が格納されたオブジェクトの配列情報なんかを後からこのように渡せば黒い画像に円を描いたりできます。
ただ正直この辺のことは詳しくないのでもしかしたらもっと早く画像処理できるやり方があるのかもしれません。流石にピクセル操作ともなると高度な
コードの知識が求められるので難しいです。
読み込んだ、生成したピクセルイメージをパネル上に書き出す
encodeImageDataメソッドでbase64に変換するとパネル上に（img要素として）画像を書き出せます。
一応これを使えばキャンバスのような使い方もパネル上にピクセルイメージを書き出せるといえば書き出せます。
HTMLパネル上でゲームとか作るわけでもない限りはこれでは大体事足りるとは思いますが、とはいえキャンバスもあったほうが。