canvas - ピクセルごとに画像を変更してデータベースに保存

Question

私は小さな Web ゲームを作成しており、ピクセルごとに画像を操作して mysql db に保存する方法を探しています。正確には、次のことができる必要があります。

• 画面上の mysql db から画像 (250 x 250px) を読み込みます (画像は表示されません。たとえば、各ピクセルのアルファは 0 です)。
• いくつかのピクセルをランダムに選択し、アルファを 1 に設定します。
• mysql db の古いイメージの上に新しいイメージを保存します。
• 多数のピクセルが表示された新しい画像をロードします。
• ランダムにいくつかのピクセルを選択し、アルファを 1 に設定します。等..

私はなんとかこのことを機能させましたが、非常に非効率的な方法でした。私のmysqlデータベースには何千ものレコードがあり、各レコードには正しい位置、色、および可視性で保存されたピクセルがあります。イメージが画面にレンダリングされるとき、各レコードを読み取る必要があります。

私はhtml5キャンバスを見てきましたが、まだ正しい方法を理解できていません. 実際、現時点では何が最善の方法なのかわかりません。誰かがここで助けてくれることを願っています。

Answer 1

これを行うにはいくつかの方法があります。

はい、キャンバスはあなたが望むものです。canvas を使用して画像データを操作できます ( MDN の Canvas を使用したピクセル操作を参照してください)。

サーバーに保存して復元するために、何千ものレコードを使用するべきではありません。画像を説明する単一の base64 文字列のようなものを使用する必要があります。キャンバス API には、 と呼ばれるこれを取得するためのメソッドがありますtoDataURL()。