画像 / 写真加工
ビフォーアフタースライダー
編集可能なラベルとライブスライダーで、ビフォーアフター比較を作成できます。2枚の画像を埋め込んだポータブルなHTMLファイル、アニメーションGIF、対応環境ではWebMをダウンロードできます。
ビフォーアフタースライダー: ビフォー画像の比率を使用し、アフター画像は中央をトリミングして同じサイズに合わせます。HTMLのダウンロードファイルには、2枚のPNG画像がdata URIとして埋め込まれ、キーボードで操作できる独自のrangeスライダーも含まれます。GIFワイプは480 × 480ピクセル以内に収まり、WebMワイプはブラウザ録画に対応している環境で約2秒間録画されます。 サーバーへのファイルアップロードは一切なく、100%ブラウザ内でローカル実行します。
- カテゴリ
- 画像ツール
- 実行回数
- ブラウザ内で
- コスト
- 無料 · 登録不要
- 提供状況
- すぐに使えます
完全にブラウザ内で実行します
リアルタイム比較
比較する2枚の写真を選択してください。
このブラウザではWebMの記録を利用できません。代わりにGIFワイプをダウンロードしてください。
持ち運べる比較
2枚の画像は同じ比率に正規化され、PNGデータURIとしてHTMLに埋め込まれます。ネイティブのrange入力で表示する加工後画像の領域を制御でき、キーボードの矢印キーにも対応します。ファイルにはインラインJavaScriptが含まれるため、制限の厳しいホスティングポリシーによってブロックされる場合があります。
アニメーション書き出し
録画前にWebMが利用可能か確認します。WebMまたはcanvasによるキャプチャを利用できない場合はGIFにフォールバックします。MediaRecorderの対応確認：https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/isTypeSupported_static
使い方
- ビフォー画像とアフター画像を選択します。
- ラベルを追加し、比較スライダーを動かします。
- インタラクティブなスライダーにはHTMLを、アニメーションワイプにはGIFまたは対応環境のWebMをダウンロードします。
プライバシーと制限事項
入力内容と画像はブラウザ内にとどまります。アップロードされることはありません。
関連ツール
よくある質問
HTMLはオフラインで動作しますか？
はい。2枚の画像とスライダーのコードが1つのファイルに含まれているため、外部へのリクエストはありません。
WebMが無効になっているのはなぜですか？
ブラウザがWebM録画とキャンバスキャプチャに対応している必要があります。対応していない場合は、GIFワイプを使用してください。
画像比較スライダーとの違いは何ですか？
このページでは、動作するHTMLスライダーとアニメーションワイプを書き出せます。画像比較スライダーでは、左右に並べたレイアウトを含む静止画のPNGを書き出します。
無料ツール · ブラウザ内で · アカウント不要