ログインしていません。ログインなしで保存できる投稿数には制限があります。

プログラム編集

画像差分用のパーツ合成ツール

ゲームによくある表情差分画像から、顔パーツを合成するためのツールです

エディタ

プログラム

！インデント構文
！「https://n3s.nadesi.com/plain/nadesiko3-FileReader.js」を取込む
//20260715:頂点追加ショートカットキーの挙動修正
//20260706:頂点のドラッグ移動、透過レイヤーの追加
//20260610:ベータ更新
//20260609:ベータ更新
//20260608:初版
//※ なでしこv3.7.20より前では動きません

/*
・仕様メモ
　画像複数枚ドロップでロード
　クリックで頂点の追加
　頂点をドラッグで移動
　頂点を追加する辺を変更可能
　
　半透明で重ねてレイヤー
　
*/

頂点リストは空配列
頂点操作対象は-1
元画像リストは空配列

選択中フラグはオフ
再描画フラグはオフ

//--------------------------------解説ここから
『### 表情差分から新しい差分を作成するツール

ゲームの表情差分を2枚を部分合成し、新しい差分を作成するツールです  
（例）両目を開けた画像と両目を閉じた画像の2枚から、片目を閉じた画像を作成する、など
<hr />
<details open>
<summary>チュートリアル</summary>

チュートリアル用に画像を3枚ロードしてあります

画像に頂点をいくつか追加しましょう  
マウスボタンで頂点を追加できるので、3か所ほどぽちぽちしてください  
頂点1つ目では、画像が半透明になります  
頂点2つ目では、矩形の範囲が別の絵になります  
頂点3つ目では三角形が描かれ、その内側が別の絵になります  
それ以降は多角形の内側が別の絵になります

画像の左にあるセレクトボックス(1,2,3)でどの絵を重ねるかを指定します

確定ボタンを押すまではプレビュー状態です  
確定ボタンを押すと指定した範囲を上書きします

お手持ちの画像で同様の操作をするには、最初に画像を複数ファイルドロップします  
ゲームの表情差分など、座標が完全に一致する画像を想定しています

</details>
』をマークダウンHTML変換。それのラベル作成
//--------------
「HR」のDOM部品作成
『<details open>
<summary>機能詳細</summary>

- マウスドラッグ - ドラッグ中はプレビューで、マウスボタンを離したとき決定となります
 - 画像のダウンロードとファイル名 - 完成した画像をダウンロードします。画像形式はpngです
 - 透過画像表示のチェックボックス - 重ねる絵を透かして表示します
 - アルファ値 - 画像を半透明で重ねます
 - 追加位置の変更ボタン - 頂点を追加する辺（太い辺）を変更します
 - 確定・元に戻す・やり直しボタン - 編集を確定し、画像を上書きします。元に戻す・やり直しができます。
 - 頂点編集 - 頂点座標を直接入力します。画像の端に頂点を打つときに便利です

ドロップした画像がサーバーにアップロードされることはありません。ブラウザの機能で処理されます。
 
</details>
』をマークダウンHTML変換。それのラベル作成
//--------------
「HR」のDOM部品作成
「<details>
<summary>ショートカットキー</summary>
キーボードから頂点追加などができます<br>
a : 頂点追加<br>
s : 確定<br>
d : 頂点取消<br>
q : 頂点の始点を変更<br>
z:←元に戻す<br>
r:やり直し→<br>
w : 透過レイヤーの表示非表示の切り替え<br>
</details>」のラベル作成
「HR」のDOM部品作成
//--------------------------------解説ここまで

//--------------汎用-----------------
//捨てて空にする
●配列全部取り出し(arから|arを)
　arの0から(arの要素数)を配列取出

//--------------部品-----------------
ダウンロードボタン＝「画像をダウンロード」のボタン作成
「ファイル名：」のラベル作成
ファイル名エディタ=「canvas.png」のエディタ作成
その＄文字幅は60
改行作成

透過画像表示UI＝「透過画像表示　」のチェックボックス作成
それに「重ねる画像をうっすら表示します」をヒント設定
●透過画像表示フラグ取得
　透過画像表示UIの＄選択状態を戻す
●透過画像表示フラグ反転
　透過画像表示UIの＄選択状態＝！（透過画像表示UIの＄選択状態）
　再描画フラグはオン
透過画像表示UIの変更時には
　再描画フラグはオン

サイズラベル=「」のラベル作成

//コンテナ
『<div id="canvas-container" style="position:relative; margin-left:60px;">
    <canvas id="baseCanvas" style="border: 1px dotted silver;"></canvas>
    <canvas id="work1Canvas" style="position:absolute; left:0; top:0;border: 1px dotted silver;"></canvas>
    <canvas id="work2Canvas" style="position:absolute; left:0; top:0;border: 1px dotted silver;"></canvas>
    <canvas id="uiCanvas" style="position:absolute; left:0; top:0;border: 1px dotted silver;"></canvas>
    <select id="uiSelect" style="position:absolute; left:-60px; top:3px;"></select>
</div>』のラベル作成 //(AI生成)
成果物レイヤー＝「baseCanvas」をDOM要素ID取得
透過レイヤー＝「work1Canvas」をDOM要素ID取得
作業レイヤー＝「work2Canvas」をDOM要素ID取得
頂点レイヤー＝「uiCanvas」をDOM要素ID取得
画像選択リスト＝「uiSelect」をDOM要素ID取得
画像選択リストに「画像番号」をヒント設定

●レイヤーサイズ変更(imgで)
　変数　w = img＄幅属性
　変数　h = img＄高属性
　[成果物レイヤー,透過レイヤー,作業レイヤー,頂点レイヤー]を反復
　　　対象の＄幅は"{w}px"
　　　対象の＄幅属性はw
　　　対象の＄高は"{h}px"
　　　対象の＄高属性はh
　再描画フラグはオン
　サイズラベルに「画像サイズ：[{w},{h}]」をテキスト設定

ダウンロードボタンのクリック時には
　　画像奉納

画像選択リストの変更時には
　　再描画フラグはオン

//元画像リストと連動
●画像選択リスト更新
　もし元画像リストの要素数が1以上ならば
　　　1から（元画像リストの要素数）の配列連番作成
　　　画像選択リストにそれをセレクトボックスアイテム設定
　　　画像選択リストの＄sizeは元画像リストの要素数
　　　画像選択リストの＄selectedIndexは0
　　　
　　　再描画フラグはオン
　違えば
　　　画像選択リストに[]をセレクトボックスアイテム設定

「アルファ値：」のラベル作成。[0,255,255]の値指定バー作成。アルファ指定バーはそれ
アルファ指定バーの変更時には
　　再描画フラグはオン
アルファ指定バーの「input」がDOMイベント発火時には
　　再描画フラグはオン
「　｜　」のラベル作成。

●アルファ値取得
　アルファ指定バーからテキスト取得。それを整数変換。それ/255を戻す

「頂点：」のラベル作成
「追加位置の変更」のボタン作成
それに「次に頂点を追加する辺を変更します」をヒント設定
そのクリック時には
　　頂点シフト

「頂点クリア」のボタン作成
その＄幅は6em
それに「頂点をすべて削除します」をヒント設定
そのクリック時には
　　頂点クリア

「頂点取消」のボタン作成
その＄幅は6em
それに「頂点を一つ削除します」をヒント設定
そのクリック時には
　　頂点取消

//------------アンドゥ・リドゥ------------
//考え方はAIに聞いた
アンドゥ用スタックは空配列
リドゥ用スタックは空配列
「　｜　」のラベル作成
「←元に戻す」のボタン作成
そのクリック時には
　　アンドゥ実行
「やり直し→」のボタン作成
そのクリック時には
　　リドゥ実行

//確定するたびに呼ぶ
●復元ポイントセーブ
　　成果物レイヤーへ描画開始
　　変数　w = 描画中キャンバスの＄幅属性
　　変数　h = 描画中キャンバスの＄高属性
　　描画中コンテキストの「getImageData」を[0, 0, w, h]でJSメソッド実行
　　それをアンドゥ用スタックへ配列追加
　　リドゥ用スタックは空配列
　　//古いものを捨てる
　　もしアンドゥ用スタックの要素数が50以上ならば
　　　　アンドゥ用スタックの0を配列削除
　　　　
//現在のデータをリドゥのスタックへ。アンドゥからポップして画像へ
●アンドゥ実行
　　成果物レイヤーへ描画開始
　　もしアンドゥ用スタックの要素数が1以上ならば
　　　　変数　w = 描画中キャンバスの＄幅属性
　　　　変数　h = 描画中キャンバスの＄高属性
　　　　描画中コンテキストの「getImageData」を[0, 0, w, h]でJSメソッド実行
　　　　それをリドゥ用スタックへ配列追加
　　　　
　　　　変数　imageData＝アンドゥ用スタックから配列ポップ
　　　　描画中コンテキストの「putImageData」を[imageData, 0, 0]でJSメソッド実行
　　　　
//現在のデータをアンドゥのスタックへ。リドゥからポップして画像へ
●リドゥ実行
　　成果物レイヤーへ描画開始
　　もしリドゥ用スタックの要素数が1以上ならば
　　　　変数　w = 描画中キャンバスの＄幅属性
　　　　変数　h = 描画中キャンバスの＄高属性
　　　　描画中コンテキストの「getImageData」を[0, 0, w, h]でJSメソッド実行
　　　　それをアンドゥ用スタックへ配列追加
　　　　
　　　　変数　imageData＝リドゥ用スタックから配列ポップ
　　　　描画中コンテキストの「putImageData」を[imageData, 0, 0]でJSメソッド実行
　　　　
//------------頂点確定・追加削除------------

「　」のラベル作成
「確定」のボタン作成
その＄幅は6em

そのクリック時には
　頂点確定
改行作成
//------------
「　　」のラベル作成
「頂点編集：」のラベル作成
頂点編集エリア＝「」のテキストエリア作成
その＄行数は6
「適用」のボタン作成
それに「編集した頂点を反映します」をヒント設定
そのクリック時には
　　変数　btn=対象
　　頂点賜る
　　もしそれが真ならば
　　　　再描画フラグはオン
　　違えば
　　　　btnの＄背景色は赤色
　　　　0.5秒後には
　　　　　　btnの＄背景色は「」

●頂点クリア
　頂点リストを配列全部取り出し
　選択中フラグはオフ
　再描画フラグはオン

//-----------
●距離(xy1とxy2の)
　x1=xy1[0]。y1=xy1[1]。x2=xy2[0]。y2=xy2[1]。
　(x2-x1)と(y2-y1)の斜辺で戻る。

//マウスと近い頂点があれば操作対象にする（マウス押したときのイベント）
●頂点操作対象選出
　　p=-1
　　xy1=[マウスX,マウスY]
　　頂点リストを反復
　　　　もし(xy1と対象の距離)<=3ならば
　　　　　　p=対象キー
　　頂点操作対象=p

●頂点追加
　もし頂点操作対象<0ならば
　　　頂点リストに[マウスX,マウスY]を配列追加
　違えば
　　　頂点リスト[頂点操作対象][0] = マウスX
　　　頂点リスト[頂点操作対象][1] = マウスY
　　　頂点操作対象=-1
　
　選択中フラグはオフ
　再描画フラグはオン

●頂点取消
　頂点リストから配列ポップ
　選択中フラグはオフ
　再描画フラグはオン

//頂点の先頭をうしろにズラす
●頂点シフト
　もし頂点リストの要素数が0以下ならば戻る
　頂点リストの0を配列削除
　頂点リストへそれを配列追加
　再描画フラグはオン

●頂点確定
　レイヤー統合
　頂点クリア

//------------頂点の編集------------
//ユーザー様へ頂点データをさしあげる
●頂点献上
　変数　txt=""
　頂点リストを反復
　　　txt=txtに「[{対象[0]を1で小数点四捨五入}, {対象[1]を1で小数点四捨五入}]」を一行追加
　txtを頂点編集エリアにテキスト設定

//ユーザー様から頂点データをいただく
●頂点賜る
　変数　txt=頂点編集エリアからテキスト取得
　変数　len=txtで「]」の出現回数
　変数　list
　
　エラー監視
　　　txtを半角変換
　　　それを「\[\s*\-?[0-9]+\.?[0-9]*,\s*\-?[0-9]+\.?[0-9]*\]」で正規表現抽出　//[ 0.1, 10.5]　マイナスの座標を受けつける
　　　それを「,」で配列結合　//[ 0.1, 10.5],[ 10, 10], [ 10, 0]
　　　list=「[{それ}]」をJSON取得　//両脇に[ ]  [[ 0.1, 10.5],[ 10, 10], [ 10, 0]]
　　　もしlistの要素数がlenと等しいならば
　　　　　頂点リストはlist
　　　　　真を戻す
　　　違えば
　　　　　偽を戻す
　エラーならば
　　　偽を戻す

//ユーザー様へ画像を納品する
●画像奉納
　成果物レイヤーへ描画開始
　ファイル名エディタからテキスト取得
　それへPNGダウンロード

//------------イベント------------
//ファイルドロップしたときに順序をくずさずにロード
WINDOWにファイルドロップした時には
　　変数　files= 対象
　　変数　last = 対象の要素数-1
　　
　　変数リセット
　　
　　fileでfilesを反復
　　　　それは関数　(key,f)
　　　　　　fの画像ファイル開いた時には (img)
　　　　　　　　元画像リスト[key]＝img
　　　　　　　　//["画像ロード完了", key, files[key]["name"],img]をコンソール表示
　　　　　　　　もしkeyがlastならば
　　　　　　　　　　imgでレイヤーサイズ変更
　　　　　　　　　　画像選択リスト更新
　　　　　　　　　　成果物レイヤーへ描画開始
　　　　　　　　　　[0,0]へ対象を画像描画
　　　　それ(対象キー,file)

頂点レイヤーの右クリックした時には
　　対象イベントのDOMイベント処理停止//メニューの抑制

頂点レイヤーのマウス押した時には
　　対象イベントのDOMイベント処理停止
　　選択中フラグはオン
　　再描画フラグはオン
　　頂点操作対象選出

頂点レイヤーのマウス離した時には
　　対象イベントのDOMイベント処理停止
　　頂点追加
　　選択中フラグはオフ
　　再描画フラグはオン

頂点レイヤーのマウス移動した時には
　　もし選択中フラグがオンならば
　　　　再描画フラグはオン

//------------
//ショートカット　ノートのタッチパッドではマウス離すが面倒なため
『a』に{関数}頂点追加をホットキー登録　//add
『d』に{関数}頂点取消をホットキー登録　//del
『s』に{関数}頂点確定をホットキー登録　//save
『z』に{関数}アンドゥ実行をホットキー登録
『r』に{関数}リドゥ実行をホットキー登録
『q』に{関数}頂点シフトをホットキー登録
『w』に{関数}透過画像表示フラグ反転をホットキー登録

//------------
//再描画フラグの監視
0.05秒毎には
　　もし再描画フラグがオンならば
　　　　エラー監視
　　　　　　再描画
　　　　　　頂点献上
　　　　エラーならば
　　　　　　頂点編集エリアにエラーメッセージをテキスト設定
　　　　再描画フラグはオフ
//------------
サンプルロード
●サンプルロード
　「https://n3s.nadesi.com/image.php?f=684.png」を画像読む
　元画像リストにそれを配列追加
　「https://n3s.nadesi.com/image.php?f=683.png」を画像読む
　元画像リストにそれを配列追加
　「https://n3s.nadesi.com/image.php?f=682.png」を画像読み待つ
　元画像リストにそれを配列追加
　画像選択リスト更新
　元画像リスト[2]でレイヤーサイズ変更
　
　成果物レイヤーへ描画開始
　元画像リスト[2]を[0,0]へ画像描画
　再描画フラグはオン

//------------
//合成
●合成画像取得
　もし元画像リストの要素数が1以上ならば
　　　元画像リスト[画像選択リストの＄selectedIndex]を戻す
　違えば
　　　0を戻す
　　　
●再描画
　変数　頂点リスト仮＝頂点リストを配列複製
　変数　追加頂点＝[]
　変数　アルファ値＝アルファ値取得
　変数　合成画像＝合成画像取得
　変数　透過画像表示フラグ＝透過画像表示フラグ取得
　
　//ドラッグ中は1点追加
　もし選択中フラグがオンならば
　　　もし頂点操作対象<0ならば
　　　　　追加頂点は[マウスX,マウスY]
　　　　　頂点リスト仮に追加頂点を配列追加
　　　違えば
　　　　　頂点リスト仮[頂点操作対象][0] = マウスX
　　　　　頂点リスト仮[頂点操作対象][1] = マウスY
　
　//頂点レイヤー　多角形を描く
　頂点レイヤーへ描画開始
　全描画クリア
　1回
　　　キャンバス状態保存
　　　描画中コンテキスト["globalAlpha"] = 0.3
　　　もし回数が2ならば
　　　　　1に線太さ設定
　　　　　"cyan"に線色設定
　　　違えば
　　　　　0.5に線太さ設定
　　　　　赤色に線色設定
　　　空に塗り色設定
　　　
　　　頂点リスト仮の要素数で条件分岐
　　　　　0ならば
　　　　　　　それはそれ
　　　　　1ならば
　　　　　　　それはそれ
　　　　　2ならば
　　　　　　　x = 頂点リスト仮[0,0]
　　　　　　　y = 頂点リスト仮[0,1]
　　　　　　　w = 頂点リスト仮[1,0] - x
　　　　　　　h = 頂点リスト仮[1,1] - y
　　　　　　　[x,y,w,h]の四角描画
　　　　　違えば
　　　　　　　頂点リスト仮の多角形描画
　　　　　　　2に線太さ設定
　　　　　　　頂点リスト仮[0]から頂点リスト仮[頂点リスト仮の要素数-1]へ線描画　//頂点を追加するライン
　　　キャンバス状態復元
　1回
　　　1に線太さ設定
　　　赤色に線色設定
　　　頂点リスト仮を反復
　　　　　対象へ3の円描画
　
　
　//作業レイヤー　重ねる絵を描く
　1回
　　　作業レイヤーへ描画開始
　　　全描画クリア
　　　もし合成画像が0ならば　　//もし合成画像がなければ
　　　　　抜ける
　　　
　　　キャンバス状態保存
　　　描画中コンテキスト["globalAlpha"] = アルファ値
　　　空に線色設定
　　　空に塗り色設定
　　　
　　　
　　　頂点リスト仮の要素数で条件分岐
　　　　　0ならば
　　　　　　　それはそれ
　　　　　1ならば
　　　　　　　透過画像表示フラグはオン
　　　　　2ならば
　　　　　　　x = 頂点リスト仮[0,0]
　　　　　　　y = 頂点リスト仮[0,1]
　　　　　　　w = 頂点リスト仮[1,0] - x
　　　　　　　h = 頂点リスト仮[1,1] - y
　　　　　　　[x,y,w,h]の四角描画
　　　　　　　描画クリップ
　　　　　　　[0,0]へ合成画像を画像描画
　　　　　違えば
　　　　　　　頂点リスト仮の多角形描画
　　　　　　　描画クリップ
　　　　　　　[0,0]へ合成画像を画像描画
　　　キャンバス状態復元
　
　//透過レイヤー
　1回
　　　透過レイヤーへ描画開始
　　　全描画クリア
　　　//うっすら透過
　　　もし透過画像表示フラグがオンならば
　　　　　キャンバス状態保存
　　　　　描画中コンテキスト["globalAlpha"] = 0.25
　　　　　[0,0]へ合成画像を画像描画
　　　　　キャンバス状態復元

●レイヤー統合
　成果物レイヤーへ描画開始
　復元ポイントセーブ//アンドゥ用
　[0,0]へ作業レイヤーを画像描画

●変数リセット
　頂点リストから配列全部取り出し
　元画像リストから配列全部取り出し
　
　選択中フラグはオフ
　再描画フラグはオフ
　
　アンドゥ用スタックから配列全部取り出し
　リドゥ用スタックから配列全部取り出し

実行結果

保存

プログラムを保存

表示ページ

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

実行環境

なでしこバージョン

素材

画像・音声・データ

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

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ