画像結合ツール

2枚以上の画像を結合して1枚の画像ファイルにすることができます。出力解像度の指定や文字の挿入なども可能です。ブラウザ上で全処理を行っているので、画像データがサーバーに送られることはなく個人情報も守られます。使い方を見る

10月17日 更新しました
更新内容とフィードバックへの返答

  • 入力
  • レイヤ
  • 出力
入力
ドラッグドロップで画像を追加
ドラッグ移動で画像の並び替え
レイヤ
出力
パターン
  • 解像度
    • オリジナル
    • 長辺
    • よこ
    • たて
  • クロップ
    • オリジナル
    • x1 : y1
    • x4 : y3
    • x3 : y4
    • x16 : y9
    • x9 : y16
    • 1枚目を基準
    • 2枚目を基準
    • 3枚目を基準
    • 4枚目を基準
  • フレーム
    • 単色 on
    • フェード
    • 角丸
  • 境界
  • 明るさ
  • コントラスト
  • 形式
    • JPEG
    • PNG
プレビュー
  • 保存ファイル名を入力
    • Fit
    • 100%
    • 66%
    • 33%
    • 10%
ページ設定
  • プレビューエリアの高さ
  • 結合枚数制限 (メモリ注意)
フィードバック

よろしければ使った感想やコメントをお願いします。改善の参考にさせて頂きます。
不便な点は具体的にどこがどう不便でどう改善してほしいかを教えて下さい。情報が何もないと改善しようがありません。
バグ報告の際は、使用環境(ブラウザ名・バージョン)、どういう操作を行ったときにどういう結果が生じたかを添えて下さい。情報が不足していると、こちらでバグの再現ができず修正が行えません。
頂いたフィードバックについて返答できるものは、このページ内やTwitterで行います。

読み込み中...

  • 文字
  • 位置
フォント
B I

 
 
X
Y
10月17日 更新しました
更新内容
  • 結合パターンを増やしました。
  • 画像を読み込んだ時に回転情報がある場合はそれを反映するようにしました(IEは除く/JPEG形式のみ対応)。
  • 入力画像を回転できるようにしました。
頂いたフィードバックへの返答
Q.ファイル名を指定せずに保存できる設定も残してほしい
A.将来的なレイアウトの都合上、現在のところはファイル名入力パネルを一度開いて保存という形にしております。
Q.5枚の画像を追加したのにプレビューには最初の2枚しか表示されない
A.初期設定では2枚の結合になります。出力タブの[パターン]から任意のレイアウトを選択して下さい。
Q.今も2段階ふめば出来るが、3x3の9枚、4x4の16枚も選択出来るようにしてほしい
A.9枚までの結合パターンを追加しました。
Q.画像の横サイズを好きな数値に変更できないのか?
A.出力タブの[解像度]から任意の長さを選択することができます。
Q.解像度や境界線の項目でテンキーが使えない
A.現在、テンキーは対応しておりません。一般キーの数値キーを使用下さい。今後、テンキーについては考えます。
Q.結合した画像は元に戻せますか?
A.入力した画像情報を使って新しい画像を作成するので入力画像には影響がありません。結合画像から元画像と同じものを復元できるかということでしたら、PNG形式の画像の場合は結合画像から該当部分を切り取ることで可能です。
過去の更新内容
10月10日 更新内容
  • フレーム(単色)を画像上に描画するか、領域を確保して描画するかを選択できるようにしました。
  • 境界線を画像上でなく、領域を確保して描画するように変更しました。
  • プレビューエリアの結合画像を自由に移動できるようにし、位置リセットボタンを追加しました。ただし、タッチ操作の場合は縦移動の動作が不安定です。今後修正します。
  • プレビューエリアの背景色を任意に選べるようにしました。
  • 保存前に、ファイル名を指定できるようにしました。
  • フレーム(フェード)が機能しないバグを修正しました。
  • プレビューの表示倍率が100%でないときにレイヤ編集パネル位置がずれるバグを修正しました。

使い方

結合する画像を入力する

最初に、結合する画像ファイルを読み込みます。読み込む方法は2種類あります。

  • 方法1. [画像追加]ボタンをボタンをクリックします。ファイル選択ダイアログが開くので読み込みたい画像ファイルを選択します。(PC/スマホ 両対応)
  • 方法2. ファイルエクスプローラなどから画像を選択し、ページ内にドラッグドロップします。(PCのみ対応)

読み込んだファイルは下のリストに表示されます。画像ファイルは一度に複数を選択して読み込むことができます。使用デバイス、ブラウザによっては対応していないものもあります。対応ファイル形式はJPEG/PNG/GIFの3つです。

画像の並び替え

読み込んだ画像は任意の順番に並び変えることができます。並び変える方法は2種類あります。

  • 方法1. 画像をドラッグ(タッチ)して、移動したい場所までドラッグ移動(スワイプ)します。
  • 方法2. 画像にマウスオーバー(タップ)すると操作ボタンが現れます。矢印ボタンを押すと指定方向の画像と順番が入れ替わります。

画像の並び順は結合時に配置される位置に影響します。

画像の削除

読み込んだ画像を削除するには[全削除]ボタン、[使用削除]ボタンをクリックします。[使用削除]ボタンは結合に使用した画像のみを削除するボタンです。画像にマウスオーバー(タップ)したときに現れる×ボタンを押すことで個別に削除することもできます。

レイヤを追加する

結合画像の上に、文字を描画することができます。この操作は必須ではありません。

文字を追加する

[文字追加]ボタンをクリックします。文字描画用パネルが開かれるので、自由に設定を行い[OK]ボタンを押して完了させます。

作成したレイヤはレイヤリストにサムネイルとして、プレビューに実物大で表示されます。レイヤリストのレイヤは、結合画像の入力と同じように、並び替えや削除を行うことができます。並び順は、レイヤ同士が重なった際の表示優先順位になります。左側のレイヤが優先して上に表示されます。

作成したレイヤを再編集する

レイヤリストのレイヤにマウスオーバー(タップ)すると操作メニューが現れます。メニューの歯車ボタンをクリックすると編集パネルが開くので作成済みのレイヤを再編集することができます。また、プレビューに表示されているレイヤをダブルクリック(ダブルタップ)することでも編集パネルが表示されます。

パネルの説明

文字レイヤパネルの説明
環境によってパネルの形状が異なります。

1.プレビューエリア
実際の表示を確認することができます。
2.設定種別選択タブ
設定種別を切り替えるためのタブです。文字についてと位置についての設定があります。
3.表示文字
作成する文字を入力します。
4.フォント名
フォント名をいくつかの候補から選択、もしくは直接入力で指定します。フォントがインストールされていない場合はデフォルトのフォントが適用されます。
5-6.太字/斜体
選択すると文字が太字(5)、文字が斜体(6)になります。
7.フォントカラー
文字の塗りの色を指定します。ボタンをクリックすると、新たに色選択パネルが開かれます。フォントカラーは単色だけでなくグラデーションカラーを使用することができます。
8.フォントサイズ
文字のサイズを指定します。
9.ライン高
1行の高さを%で指定します。フォントによって高さが枠からはみ出る場合があればここで調節して下さい。複数行の場合は行間のスペース指定になります。
10.揃え
複数行に、文字の揃え位置を指定します。
11-12.文字の縁取り
文字の縁取りの幅を指定します(11)。縁取りを使わない場合は0を指定します。縁取りの色を指定します(12)。
13-16.文字のシャドウ
影を左右方向にずらす距離(13)、上下方向にずらす距離(14)を指定します。マイナスの値も指定できます。影をぼかす距離を指定します(15)。影の色を指定します(16)。
17-18. レイヤ配置位置
左の9マスのセルはレイヤを配置する基準位置を指定するためのものです。結合後の画像サイズに合わせて位置が自動設定されます。例えば、常に画像の右下にIDやURLをウォーターマークとして入れたいときは、右下を指定しておけば毎回レイヤの位置を調節する必要がなくなります。右のX,Yの数値入力欄は基準位置からのオフセット値(ずらす距離)を指定します。数値はマイナスの値も指定可能です。
画像結合の出力設定を行う

何枚の画像を結合するか、出力する画像の縦横の解像度は何pxにするか、などの結合の条件を指定します。

パターン
結合する画像の枚数やレイアウトを選択します。赤い矢印は、その方向に向かって画像が配置されていくことを意味します。選択項目の最後の2つは任意の枚数の画像を横または縦に連続して結合するときに指定します。
解像度
出力する画像の解像度(縦横の長さ)を指定します。[オリジナル]は各画像を拡大しない範囲で最大の解像度になります。[長辺]/[よこ]/[たて]は該当辺の解像度が指定値になるように縮小または拡大されます。
クロップ
入力画像の横縦比が違う際に、全ての画像の縦横比を揃えるための設定です。切り抜きは画像の中心を基準に行われます。[オリジナル]は切り抜きを行いません。[xN:yN]は指定した横縦比で画像を切り抜きます。[N枚目を基準]は指定枚数目の画像の横縦比で画像を切り抜きます。
フレーム
画像の周りにいくつかの描画を行います。[単色]は指定した幅と色で画像の周りを縁取ります。「ON」が無効の場合はフレーム分の領域を確保して描画し、有効の場合は画像上に重ねて描画します。[フェード]は画像の周りに白い靄を掛けたような効果を与えます。[角丸]は四隅を丸く切り取ります。切り取られた部分の背景色は保存形式により異なります。JPEG形式の場合は白に、PNG形式の場合は透過になります。
境界線
画像と画像の間に、指定した幅と色で境界線を引きます。
明るさ
画像の明るさを増減させます。
コントラスト
画像のコントラストを増減させます。
形式
保存する際のファイル形式をJPEGとPNGから選択します。JPEGは画像の品質を50-100の範囲で指定できます。品質を上げるとファイル容量が増えますが、画質が上がります。下げるとその逆になります。通常は75~90くらいを指定するとバランスがよくなります。PNGはJPEGに比べファイル容量が数倍大きくなりますが、画質が劣化しません。
プレビューの確認と保存

結合する画像が必要枚数入力されたとき、自動で画像の結合が行われ結果をプレビューで確認することができます。

プレビューのスケーリング

結合画像は、虫眼鏡アイコンを操作することで指定倍率で表示されます。[Fit]はプレビューエリア内に収まるように縮小表示されます。[100%]は縮小しない実際のサイズになります。十字矢印アイコンの枠には出力画像の解像度(横と縦の長さ)が表示されます。

レイヤの操作

プレビューエリアのレイヤはマウスドラッグ(スワイプ)で位置を移動することができます。また、ダブルクリック(ダブルタップ)することで編集パネルが開きます。

画像の保存

作成した画像を保存するには[保存]ボタンをクリックします。ファイル名を指定するパネルが開かれるので必要に応じて名前を変更し、[OK]ボタンをクリックします。ブラウザソフトで設定された保存先に画像が保存されます。デフォルトのファイル名はUnixtimeです。保存先を変更する方法については各ブラウザソフトのヘルプを確認下さい。

ページ設定

結合ツールを自分が使いやすようにカスタマイズすることができます。

[メニューをタブ化する]を有効にすると入力、レイヤ、出力のメニューを1つのタブにまとめることができます。

[マウスオーバーでタブを開く]を有効にすると、タブ化されたメニューにマウスを乗せたときに自動でタブが開かれます。[メニューをタブ化する]が有効のときのみ効果があります。

[結合枚数制限]は出力設定のパターンで最後の2つのどちらかを選択したときの結合する画像の枚数制限を指定します。設定上は100枚まで指定可能ですが、容量の大きいファイルを使用する場合はある程度の枚数で、結合処理や保存処理に時間が掛かったりWEBブラウザがフリーズすると思いますのでその点を注意して設定して下さい。

仕様

結合のタイミングについて
結合に必要な枚数の画像が入力されたとき、出力設定が変更されたときに自動で結合処理が行われます。
描画の順番について

以下の順番で処理が行われます。

  • 画像の結合
  • 明るさ、コントラストの補正
  • 境界線の描画
  • フレームの描画
  • レイヤの描画