画像ピクセルシャッフル 📖

画像ファイルを選択すると、画像内のピクセルをシャッフルして表示します。

プログラム: (→大)
ファイル欄は「INPUT」のDOM部品作成。 それの「type」に「file」をDOM属性設定。 改行作成。 画像キャンバスは[1,1]のキャンバス作成。 ●(FILEの)画像シャッフルとは 定数の画像URLは「URL.createObjectURL」を[FILE]でJS関数実行。 定数の画像オブジェクトは画像URLを画像読み待つ。 「URL.revokeObjectURL」を[画像URL]でJS関数実行。 定数の画像幅は画像オブジェクト$width。 定数の画像高さは画像オブジェクト$height。 画像キャンバスの「width」に画像幅をDOM属性設定。 画像キャンバスの「height」に画像高さをDOM属性設定。 描画中コンテキスト$globalCompositeOperationは「copy」。 画像オブジェクトを[0,0]に画像描画。 定数の画像データは描画中コンテキストの「getImageData」を[0,0,画像幅,画像高さ]でJSメソッド実行。 定数の画像配列は画像データ$data。 定数のピクセル数は画像配列の要素数を4で割る。 位置を0から(ピクセル数-1)まで繰り返す 定数の候補数はピクセル数から位置を引く。 定数の選択要素は候補数の乱数に位置を足す。 オフセットを0から3まで繰り返す 定数の退避データは画像配列@(位置×4＋オフセット)。 画像配列@(位置×4＋オフセット)は画像配列@(選択要素×4＋オフセット)。 画像配列@(選択要素×4＋オフセット)は退避データ。 ここまで。 ここまで。 描画中コンテキストの「putImageData」を[画像データ,0,0]でJSメソッド実行。 ここまで。 ファイル欄を変更した時には 定数のファイルリストは対象$files。 定数のファイルはファイルリスト@0。 もし、ファイルならば ファイルの画像シャッフル。 ここまで。 ここまで。