アニメ塗り(ベタ塗り)　開発中

まだ開発中です。　使えません。

エディタ

プログラム

!「https://n3s.nadesi.com/plain/nadesiko3-FileReader.js」を取込む。
WINDOWへドロップ禁止。
#-----------------------------------------------------------------------
操作キャンバスx＝500
操作キャンバスy＝0

画像データマップ横＝0
画像データマップ縦＝0

キャンバス比横＝0
キャンバス比縦＝0

処理範囲=[]

A=0
変化A=[]
色データ＝[]

＃ 画像
DOM親要素に「<IMG id="result"></IMG>」をHTML設定。改行作成。＃←参照https://nadesi.com/v3/doc/index.php?plugin_browser%2FDOM%E8%A6%81%E7%B4%A0ID%E5%8F%96%E5%BE%97&show
「☆画像ファイルを選択してください。または、キャンバスにドロップしてください。」のラベル作成。改行作成。
ファイル選択作成して画像ファイル選択に代入。
　画像ファイル選択の「accept」に『image/*』をDOM属性設定。　//固有ファイル型指定子*/
//　画像ファイル選択の「multiple」に、はいをDOM属性設定。　 //複数選択出来るようにする
　画像ファイル選択の「change」に、「選択画像取得」をDOMイベント追加。
改行作成。改行作成。

「#nako3_canvas」にファイルドロップした時には、
　　画像ファイル選択["files"]＝対象。
　　選択画像取得。
ここまで。

●選択画像取得
　選択ファイルリスト＝画像ファイル選択["files"]。
　ファイル＝選択ファイルリスト[0]

「名前：{ファイル["name"]}」を表示　//ファイル名（パス無し）
　「サイズ：｛ファイル["size"]｝」を表示　//ファイルサイズ（バイト）
　「拡張子：｛ファイル["type"]｝」を表示　//ファイルタイプ（image/jpegとか）
　＃ファイル["height"]を表示
　＃ファイル["width"]を表示
　ファイルの画像ファイル開いた時には
　　　　img＝対象。
　　#「#result」の「src」にimg["src"]をDOM属性設定。
	#←ここを消すと大きな画像なくなりキャンバス表示のみとなる！！（https://nadesi.com/v3/doc/index.php?plugin_browser%2FDOM%E5%B1%9E%E6%80%A7%E8%A8%AD%E5%AE%9A&show　参照）
　　　　操作キャンバスy＝img["height"]/(img["width"]/操作キャンバスx)

「高さ：{img["height"]｝」を表示　　＃←追加した。
　　　　「幅：｛img["width"]｝」を表示
　　　　＃img["src"]を表示　　　＃←これをやると意味不明のデータ取得
　　　　img["height"]を画像データマップ縦に代入
　　　　img["width"]を画像データマップ横に代入
　　　　
　　　　[0,0,操作キャンバスx,操作キャンバスy]にimgを画像描画。
　　　　
　　　　
　　　　[画像データマップ横,画像データマップ縦]のキャンバス作成
　　　　[0,0]にimgを画像描画
　　　　
　　　　画像データマップ横/操作キャンバスxをキャンバス比横に代入
　　　　画像データマップ縦/操作キャンバスyをキャンバス比縦に代入
　　　　
　ここまで。
ここまで。

/*==============================================================

ここから
画像CSV化―編集プログラム
--------------------------------------------------------------
===============================================================*/
改行作成。
改行作成。

●(xywhの|xywhを)色データ取得
　描画中コンテキストの「getImageData」をxywhでJSメソッド実行して、それ["data"]で戻る。
ここまで。
　　　　
●(xywhを色データで|xywhに)画像処理反映
『(function (xywh,color,ctx){
const [x,y,w,h]=xywh;
const img = ctx.getImageData(x,y,w,h);
let data = img.data;
for (let i=0; i<data.length;i++){data[i]=color[i]}
ctx.putImageData(img,x,y);
})』を[xywh,色データ,描画中コンテキスト]でJS関数実行。
ここまで。

//閾値は(0-255)。二値化。
●(標準値でxywhを)画像モノクロ
　もし、標準値＜０ならば、標準値＝０。
　もし、標準値＞２５５ならば、標準値＝２５５。
    　色データ＝xywhの色データ取得。＃変更「色データとは変数」＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃
　
　画素数とは変数＝(色データの要素数)/4
　カウンタを0から画素数-1まで繰り返す
　    Cとは変数＝カウンタ*4。

色平均とは変数＝(色データ[C] + 色データ[C+1] + 色データ[C+2])/3。
　　　もし、標準値＜色平均ならば、
　　　　3回。色データ[C+回数-1]＝255。ここまで。
　　　違えば、
　　　　3回。色データ[C+回数-1]＝0。ここまで。
　　　ここまで。
　　　
　ここまで。
　xywhを色データで画像処理反映。
ここまで。

a=0, b=0, 縦列=0, 横列=0
データ＝[]

F=[0,750,375]の値指定バー作成。
「描画」のボタン作成して提示に代入

描画中キャンバスをマウス押した時には、
　　マウスXをaに代入
　　マウスYをbに代入
　　ここまで
　　描画中キャンバスをマウス離した時には、
　　　　マウスX-aを仮横列に代入
　　　　マウスY-bを仮縦列に代入
　　　　
　　　　仮横列*キャンバス比横を横列に代入
　　　　仮縦列*キャンバス比縦を縦列に代入
　　　　
　　　　処理範囲=[a*キャンバス比横,b*キャンバス比縦,横列,縦列]

＃ここから独自プログラム

#全描画クリア

提示をクリックした時には
　　   /* A=0
　　    Fのテキスト取得してAに代入
　　    Aを表示
   　　Aで処理範囲を画像モノクロ*/
   　　
   　　１５０で処理範囲を画像モノクロ
　　ここまで
ここまで

「ボタン」のボタン作成してボタンに代入

ボタンをクリックされた時には、
画素数とは変数＝(色データの要素数)/4
　カウンタを0から画素数-1まで繰り返す
　    番号とは変数＝カウンタ*4。
　    白黒いまとは変数＝色データ[番号]
　    白黒過去とは変数＝色データ[番号-4]
　    もし、（白黒過去＝０）かつ（白黒いま＞０）ならば
　        変化Aに(カウンタ)を配列プッシュ　　＃変化Aには、座標がわかるものを入れる。
　        ここまで
　    ここまで
　        カウントを0から(変化Aの要素数-1)まで繰り返す
　            変化座標Xとは変数＝(a*キャンバス比横+変化A[カウント]%横列)
　            変化座標Yとは変数＝(b*キャンバス比縦+変化A[カウント]/横列)
　            赤色に塗色設定
　            赤色に線色設定
　            [変化座標X,変化座標Y]に0.5の円描画
　            ここまで
　        ここまで

実行結果

保存

プログラムを保存

表示ページ

直前に実行または一時保存した内容を復元

実行環境

なでしこバージョン

素材

画像・音声・データ

ログインすると素材をアップロードできます。

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ