/
2651.nako3
146 lines (125 loc) · 6.48 KB
/
2651.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
### [作品情報]
### 掲載URL=https://n3s.nadesi.com/id.php?2651
### タイトル=画像をアップロードして、黒色抽出。
### 作者=shikiishi(user_id=0)
### ライセンス=MIT
### 説明=画像の指定された範囲の黒い部分を抽出します。 〈使い方〉 １、画像ファイルをアップロードしてください。 ２、小さい方の画像をドラッグアンドドロップして、範囲を設定します。(できるだけ小さな範囲のほうが時間が短く編集できます) ３、「描画」ボタンをクリックしてください。(表示されます)
### 対象バージョン=3.4.22
### URL=https://sites.google.com/view/sennzai/%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88/%E7%9C%A0%E3%87%BA-%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88
### 種類=wnako
### タグ=画像,画像処理,ファイルアップロード
### 更新日時=2024-01-07 18:50:12
###
!「https://n3s.nadesi.com/plain/nadesiko3-FileReader.js」を取込む。
WINDOWへドロップ禁止。
#-----------------------------------------------------------------------
操作キャンバスx＝500
操作キャンバスy＝0
画像データマップ横＝0
画像データマップ縦＝0
キャンバス比横＝0
キャンバス比縦＝0
処理範囲=[]
＃ 画像
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*キャンバス比縦,横列,縦列]
＃ここから独自プログラム
#全描画クリア
提示をクリックした時には
150で処理範囲を画像モノクロ。
ここまで
ここまで