画像へ矩形・矢印・文字を注釈
PNG・JPEG・静止WebPへ矩形、矢印、短い文字を描き、PNGに保存します。画像上の2点で矩形を追加でき、他の注釈は明示したJSONで指定します。
説明箇所を線・矢印・文字で示す画像を作る
画面説明や作業手順の強調に、画像へ複数の注釈を描き込みます。図形や文字はCanvasの画素に描き、利用先へPNGとして渡せます。注釈は情報を隠す処理ではないため、秘匿したい領域には画像黒塗りを使います。
画像黒塗りは指定画素の不透明な置換、こちらは説明用の線・矢印・文字です。OGP画像作成のように背景と全体レイアウトを構成するツールとは異なります。
ツール本体
入力・操作・結果
上から入力し、必要な操作を行って、表示された結果と次の操作を確認してください。
画像を選択してください。
入力確認用の画像はダウンロード対象にしません。送信・自動保存は行わず、画像と結果のローカルURLは再選択・クリア・ページ終了で解放します。
入力データは原則ブラウザ内で処理し、URLやアクセス解析へ保存しません。ページを更新すると入力は失われます。機密情報は入力しないでください。
使い方
- 画像を選び、入力確認用プレビューで向きと寸法を確認します。
- 2点クリックで矩形を追加するか、type=rect/arrow/textのJSONで注釈を指定します。
- 処理済みPNGの線、矢印の先端、文字を確認して保存します。
例: {"type":"text","x":20,"y":30,"text":"確認箇所","fontSize":20,"color":"#ff0000"}は指定位置へ文字を描きます。
座標は向き補正後の左上からのpixel。rectはx/y/width/height、arrowはx/y/x2/y2、textはx/y/text/fontSizeで指定します。文字はローカルのsans-serifを使います。
このツールを使う場面
- 確認できること
- 矩形・矢印・短い文字を描き込んだPNGを作成
- 使う前に見るポイント
- 画像を選び、入力確認用プレビューで向きと寸法を確認します。
- 結果を見たあとにやること
- 座標は向き補正後の左上からのpixel。rectはx/y/width/height、arrowはx/y/x2/y2、textはx/y/text/fontSizeで指定します。文字はローカルのsans-serifを使います。
つまずきやすいポイント
入力と計算条件
文字の折り返し、任意フォント、曲線、レイヤー編集、秘密情報の除去はありません。HTMLとして文字を実行せず、文字列の画素として描きます。
境界値・事前チェック項目
対応する範囲
元画像1件10MiB・800万pixel・各辺8192px、注釈1〜20件、文字1行100文字、fontSize6〜100、線幅1〜50、PNG10MiBまで。色は#RRGGBBだけです。
よくあるミスと回避策
結果を使う前に
ガイド枠は選択位置の確認で、保存する画像は処理済みPNGです。文字が横幅や高さへ収まらない場合は位置・サイズを調整してください。
FAQ
文字にHTMLを書けますか？
文字列として描きます。HTMLのタグやスクリプトとして実行しません。
秘密情報を隠す用途に使えますか？
注釈は説明用で、元の領域を安全に除去する機能ではありません。必要なら画像黒塗りで対象画素を置き換えてください。
矢印や文字もマウスで作れますか？
初期対応の2点操作は矩形追加です。矢印・文字は説明にあるJSON項目で座標と内容を明示してください。
基本FAQ
入力データは外部へ送信されますか？
原則として送信されません。入力内容はブラウザ内で処理し、URLやアクセス解析へ保存しません。例外がある場合は各ツールページ内に明記しています。
入力内容は自動保存されますか？
原則として自動保存しません。ページを更新すると入力は失われます。コピーやダウンロードで保存する場合は、ご利用端末内に保存されます。
関連ツール
同じ作業の前後で使うことがあるツールです。