/
2707.nako3
185 lines (161 loc) · 8.01 KB
/
2707.nako3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
### [作品情報]
### 掲載URL=https://n3s.nadesi.com/id.php?2707
### タイトル=画像 小窓操作
### 作者=shikiishi(user_id=0)
### ライセンス=MIT
### 説明=小さな窓をドラッグアンドドロップすると、範囲内の絵の黒い部分が抽出される。
### 対象バージョン=3.4.24
### URL=
### 種類=wnako
### タグ=
### 更新日時=2023-12-10 19:52:47
###
!「https://n3s.nadesi.com/plain/nadesiko3-FileReader.js」を取込む。
WINDOWへドロップ禁止。
#-----------------------------------------------------------------------
操作キャンバスx＝500
操作キャンバスy＝0
画像データマップ横＝0
画像データマップ縦＝0
キャンバス比横＝0
キャンバス比縦＝0
フラグX＝１
＃ 画像
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"]｝（bit）」を表示 //ファイルサイズ（バイト）
「種類：｛ファイル["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"]で戻る
ここまで
a=0, b=0, 縦列=0, 横列=0
データ＝[]
F=[0,750,375]の値指定バー作成。
描画中キャンバスをマウス押した時には、
マウスXをaに代入
マウスYをbに代入
ここまで
描画中キャンバスをマウス離した時には、
マウスX-aを仮横列に代入
マウスY-bを仮縦列に代入
仮横列*キャンバス比横を横列に代入
仮縦列*キャンバス比縦を縦列に代入＃ ←ここで 小窓 と 大きい窓 の位置合わせ。
実況ラベル１に「 少しまってね。」をテキスト設定
0.1秒待つ。
＃ここから独自プログラム
Iを0から縦列まで繰り返す
Nを0から横列まで繰り返す
[マウスX*キャンバス比横-N,マウスY*キャンバス比縦-I,1,1]の色データ取得 ＃←色データを大きい窓から拾ってく。
それを「,」で区切る
Wに代入
Wの３を配列切り取り
それをKに代入
K/250をｐに代入
#「rgba({W},{p})」に線色設定
#「rgba({W},{p})」に塗色設定
#[-N*３+800,-I*３+800]に２の円描画
「{I*1}@{N}」をINに代入
INをｃに代入
IN＋0.5をｄに代入
データ@ｃ＝W
データ@ｄ＝ｐ
ここまで
ここまで
# データを表示
実況ラベル１に「 完了！！！」をテキスト設定
2秒待つ
実況ラベル１に「 」をテキスト設定
＃独自プログラム（終わり）
ここまで。
「描画」のボタン作成して提示に代入
実況ラベル２＝ラベル作成して「 ＊＊＊」をテキスト設定
提示をクリックした時には、
o=0
Fのテキスト取得してoに代入
２回繰り返す
実況ラベル２に「 ちょっと 待ってて、」をテキスト設定
1秒待つ
実況ラベル２に「 ちょっと 待ってて、、」をテキスト設定
1秒待つ
実況ラベル２に「 ちょっと 待ってて、、、」をテキスト設定
1秒待つ
ここまで
0.1秒待つ。＃＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜
全描画クリア
＃[1000,1000]のキャンバス作成＃して描画中キャンバスに代入
Iを0から縦列まで繰り返す
Nを0から横列まで繰り返す
「{I*1}@{N}」をINに代入
INをGに代入
IN＋0.5をHに代入
データ@HをJに代入
ぷちデータ＝[]
データ@Gをぷちデータに代入
ぷちデータ@0+ぷちデータ@1+ぷちデータ@2をMに代入
データJ＝[]
もしM＜oならば ＃← oは、値指定バーの値。ここで黒か白か判断してる
Jに１を代入
データIに[0,0,0]を代入
違えばJに０を代入、データJにデータ@Gを代入
「rgba({データI},{J})」に線色設定
「rgba({データI},{J})」に塗色設定
[-N*1+横列,-I*1+縦列]に0.5の円描画
＃データ@Gを表示
ここまで
ここまで
実況ラベル２に「 完了！！！」をテキスト設定
フラグXに０を代入
0.7秒待つ。
実況ラベル２に「 完了！！！ 指定範囲のデータを 取得(操作)できました。」をテキスト設定
2.7秒待つ。
実況ラベル２に「 」をテキスト設定
ここまで