しばらく前に、 Androidアプリケーションの塗り絵と、アプリケーションからスケッチや写真を公開するためのオンラインギャラリーについて書きました 。 ブラウザベースのオンラインカラーリングのアイデアは非常に論理的ですが、どういうわけか座ってそれを行うインセンティブがありませんでした。 私が一緒に仕事をしていない技術を使わなければならないことは明らかであり、これはあまり刺激的ではなかった。 しかし、どういうわけか時間が現れ、私は試してみることにしました。 将来的には、その過程で、ブラウザーのかなり明白な特性が明らかになったと言います。 WindowsおよびLinux用の実行可能ファイルを生成するオンラインコンパイラ（特にC ++）があることが判明しました。 また、Linux（Ubuntu）を初めてインストールする必要がありました。
そのため、主な目的は、カラーリングアルゴリズム自体を非表示にすることでした。 その結果、JSでのアルゴリズムの実装はなくなります。 別のブラウザテクノロジーを使用するか、ブラウザ上に描画のみを残し、サーバー上の色を「カウント」します。
最初に思い浮かぶのはフラッシュです。 ある程度までは、コードを保護できると同時に、1つのアプリケーションで描画と色付けを組み合わせることができます。 しかし、私はフラッシュをまったく使用しませんでした。 試用版のAdobe Flashをインストールし、同様の例をダウンロードしました...どういうわけかFlashでうまくいきませんでした。 私はこのオプションを延期し、他のことを試さなければなりませんでした。
次のオプションは、ブラウザベースのJavaアプリケーションでした。 しかし、アプリケーションで追加のソフトウェアを実行する必要があるため、彼は落ちました。
そこで、ブラウザ描画とサーバーカウントのオプションにスムーズにアプローチしました。
ブラウザの描画はキャンバスまたはsvgです。 しかし、カラーリングアルゴリズムの観点から見ると、ブラウザーの非常に悪い機能です。 線を描画するとき、無効化されていないアンチエイリアスが使用されます。 最初に、少なくとも一部のすべての透明ピクセルを背景色で置き換えるこのソフトウェアの交換に対抗する試みがありました。 しかし、結局のところ、透明性がすべてではありません。 スムージングは、透明度だけでなく色でも行われます。 つまり、コンポジション内の描画された「不透明な」単色ラインには、最大5ユニットまでの1つ以上のRGBコンポーネントが異なるピクセルがあります。 私の場合、これは深刻な問題です。これは、アルゴリズムが単色の線に対して同じ色のピクセルをすべて取得する必要があるためです。 そして、それは2つの方法で解決されます。 「類似」ピクセルを目的の色のピクセルに人工的に置き換える前処理、またはピクセルごとの描画。 2番目の方法が選択されました-putImageDataを使用して描画します。 確かに、2つのポイントを接続するピクセル「ライン」の検索関数を作成する必要がありました。
さて、最初の近似として描画すると、すべてが明らかです。 イメージをサーバーに転送するには、jqueryを使用します。 サーバーソルバーになりました。
まず、カラーリングアルゴリズムをC ++からPHPに移植しました。 それは非常に高価であることが判明しました-2色の線がある小さなサイズの画像（200x300）でも約40秒間描画されます。 このようなホッケーは必要ありません。 したがって、サーバー上でサービスとして実行されるか、PHPコントローラーによって起動されるC ++アプリケーションの方向で考え始めます。 ここでは、困難はすでに組織化されていました。 まず、サービスを開始するには、ルート権限を持つ専用サーバーを持つことに加えて、サービスを管理できる必要があります。 残念ながら、私には必要なスキルがありません。 ここで私は初めてとても幸運でした。 「通常の」ホスティングサイトの1つで、PHPでexecを実行する機能が利用できました。 Linuxでビルドするのはユーティリティ次第です。 残念ながら、ここでも十分な経験がなかったため、オンラインコンパイラの検索に時間を費やしました。 www.onlinecompiler.netは1つしか見つかりませんでしたが 、マルチファイルプロジェクトをコンパイルすることさえできませんでした 。 しかし、テストには十分でした（空のプログラムを実行して値を返すスクリプトコントローラーをhttpで呼び出すことができました）。
後退するには遅すぎたため、ubuntuをインストールすることにしました。 イメージをダウンロードし、vmwareで起動し、「Linuxでプロジェクトをコンパイルする」というトピックに関する文献を読み始めました:)ここで、幸運なことに、ほぼ半分のキックでプロジェクトを実行可能ファイルにコンパイルできました。
ユーザー名でパズルを積み重ねた場合、テーブル上にいくつかの大きなが別々のピースがすでに組み立てられていて、ついにそれらが互いにつながり始めたときの感覚を覚えているでしょう。 はい、実行可能ファイルを正常にビルドした後、同じことを感じました。
それは小さな問題でした。 index.phpをjsに描画してサーバーにアップロードし、ブラウザーが「ジョブ」を送信してカラーリングを受信するsolver.phpをアップロードし、a.out実行可能ファイルの実行フラグをレイアウトして設定します。
そしてチェーンが生き返った。
その結果、JSではタスクを描画し、AJAXを使用してサーバー側のPHPコントローラーにPNGファイルとして送信できます。 コントローラーはPNGを受け入れ、それを開き、いくつかの前処理を行い、結果を一時的なBMPに保存し、それに./a.outを設定します。 彼はBMPを開き、カラーリングを行い、結果を新しいBMPに保存し、制御をPHPコントローラーに戻します。 コントローラーは結果を開き、それをJPEGに押し込み、すべての中間ファイルを削除し、保留中のhttp要求にJPEGイメージのアドレスを渡します。 画像のアドレスを受け取ったクライアントJSは、タグを作成し、ブラウザーでのすべての作業の結果をユーザーに表示します。
もちろん、このスキームは理想とはほど遠いものです。 また、ファイル操作の適切な部分をC ++側に渡すことさえできません。 良い方法では、アプリケーションはサービスをスピンする必要があります。 さて、または最後の手段として、PHPの拡張機能として使用します。 しかし、これはあなたが完全なゲシュタルトの感覚を感じることを止めません:)
PS：mooを希望する人- アセンブリのテストバージョン 。 負荷を減らすため（これは通常の共有ホスティングです）、「タスク」のサイズは250x350ピクセルに制限され、色数は15です。 少なくとも2本の色の線を描画し、PaintUpを押して色を付けます。 悪用しないでください:)
PPS：着色は削除されるため、メモリに保存したい場合はローカルに保存します。