ちょっとした画像・テキスト簡単合成ツール

画像に別の画像を合成したり文字やテキストを入れたいときに


ブラウザで作れる画像・テキスト簡単合成ツール(簡単合成サイト)です。

「ちょっと画像を簡単に合成したいけどソフトをもってないんだよな」
「この画像にテキストを入れたいんだけど・・・」
って時に使ってね。

画面中央に合成結果、右側に各種設定が配置されています。

各種設定で画像2枚まで、テキスト2個まで設定できます。

大まかには以下の流れで作成できます。

  1. 右側の設定項目で画像(最大2枚)やテキスト文字(無くてもOK)を選択。
  2. 自前の画像を使う場合はアップロードボタンで画像をアップロード。(アップロードした画像はブラウザ上で使われるだけなので、外に出ることはありません。)
  3. 画像合成が目的のサイトなんだけど「画像一枚にテキスト入れたい」って時は二枚目の画像のサンプルを「画像無し」で可能。
  4. 選択された項目の下に出てくる設定画面でいろいろ設定。(リアルタイムで画面中央に表示)
  5. 例えば高さや色などを変更。(もちろんリアルタイムで画面中央に表示)
  6. 移動させる場合は設定項目上でも可能だし、項目(画像やテキスト)を選んだ状態で中央合成結果上をマウスドラッグでも可能。
  7. テキストなんかは枠とか影とか設定しちゃってもいいんじゃない?(これもリアルタイムで画面中央に表示)
  8. 「これだ!」と思ったら中央下部の【ダウンロード】ボタンで画像を保存!

ページを開いたときにサンプルが表示されるので右側をいじくってみてください。

右側に出てくる各画像をクリックすると、直下にびよーんと各種設定項目が出てきます。

もう一つの画像をクリックすると今まで出ていた各種設定項目はびよーんと隠れてクリックされた方の画像の各種設定項目がびよーんと出てきます。

右側の下部にテキスト入力用のタブが二つありますがわかりにくくてすみません。


合成中の画像の上に合成後の画像の大きさを変更できるバーがありますので、適宜お使いください。

使い方説明は後で書きます。ごめんなさい。


/1200
/1200
16進
  • canvas1

    /600
    /600

    /360

    /1.0

    /600
    /600


  • /600
    /600

    /360

    /1.0

    /600
    /600

  • テキスト
    /500
    /900
    16進
    /1.0
    /10

    /600
    /600

    /600

    /600


    16進
    /1.0
    /20
    /10
    /10

    16進
    /1.0
    /20
  • テキスト
    /500
    /900
    16進
    /1.0
    /10

    /600
    /600

    /600

    /600


    16進
    /1.0
    /20
    /10
    /10

    16進
    /1.0
    /20

備考

使い方

色々といじってなんとなくわかってください。

機能説明

【合成画像幅】
合成後の画像の横幅
【合成画像高さ】
合成後の画像の高さ
【比率固定】
合成後の画像の横幅と高さを同時に動かす為にロック
【表示倍率】
合成後の画像の表示上の倍率
【背景塗り】
合成後の背景塗りの有無
【背景色】
合成後の背景色の色
【右側上下に並んでいる画像】
合成しようとしている画像の絵
【サンプル選択】
ただのサンプル画像集(合成画像が画像二枚を使わないときは「画像無し」を選択)
【画像アップロード】
自前の画像をブラウザ上へアップロード
【幅】
画像の幅
【高さ】
画像の高さ
【比率固定】
画像の幅と高さをロック
【角度】
傾き度合い
【透過度】
スケスケの度合い
【横位置調整】
合成場所の横位置調整(合成画像上をマウスドラッグでも可)
【縦位置調整】
合成場所の縦位置調整(合成画像上をマウスドラッグでも可)
【画像リセット】
初期状態へリセット
【テキスト】
文字を合成するための項目
【文字入力】
合成する文字
【文字の大きさ】
文字の大きさ
【色】
文字の色
【字の太さ】
文字の太さ(書体に依存)
【書体】
文字をどの書体で表示するか(お使いのPCに入っている書体しか動作しません)
【行の高さ】
複数行の場合の行間
【文字揃え】
左に揃えるとか真ん中揃えとか
【透過度】
文字のスケスケ具合
【横位置調整】
合成後の文字の横位置調整
【縦位置調整】
合成後の文字の縦位置調整
【角形状】
角をどうするか(書体に依存)
【影】
影を付けるかどうか
【影の色】
何色の陰にするか
【影の透過度】
影のスケスケ度合い
【影のぼかし】
影のぼかし具合
【影の上下位置】
文字からみた影の上下位置
【影の左右位置】
文字からみた影の左右位置
【枠線】
枠を付けるかどうか
【枠線色】
枠の色
【枠透過度】
枠のスケスケ度
【枠太さ】
枠の太さ

変更履歴

Ver1.4 合成後画像の背景色機能搭載
ダウンロードの種類選択可
Ver1.3 合成後画像の表示倍率搭載
画像のみ傾き角度搭載
Ver1.2 テキストの文字揃え搭載
Ver1.1 バグ修正・機能改善・マウス移動対応
表示項目改善・テキスト欄追加
Ver1.0 公開

コメントを送る

コメントは内容を確認してから掲載します。

みんなのコメント

  • コメントはまだありません。

    コメントはまだありません。