作品 ID: 3106

画像ピクセルシャッフル

公開

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

ソース

プログラム

ファイル欄は「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。
  もし、ファイルならば
    ファイルの画像シャッフル。
  ここまで。
ここまで。

作品について

作品情報

作品を編集

みけCAT 作

ライセンス: CC0（著作権破棄）
形式: wnako
タグ: -
利用バージョン: 3.7.9
アクセス数(累計): 36
アクセス数(今月): 0
バグ報告: 0件
更新日時: 2025/12/01 05:29 編集: 2025/12/01 05:34

作品公開情報

交流

コメントを取得中...