SquareImage

ぼかしフレーム

写真全体を固定の縦横比に収め、余った部分を同じ画像を拡大してぼかしたコピーで埋めます。何も切り取られず、ファイルはブラウザから出ません。

要点

SquareImage.dev の Blurred Frame は、写真全体を固定の縦横比に収め、余った部分を同じ写真を拡大してぼかしたコピーで埋めるため、何も切り取られません。結果は 4 つの操作で決まります。縦横比（1:1・2:3・16:9 または任意指定）、メイン画像の拡大率、背景の拡大率、ぼかしの強さです。PNG・JPEG・WebP で、元画像の幅、1080px、2048px、または任意の幅に書き出せます。一度に 1 枚ずつ処理します。無料でアカウント登録は不要、画像はアップロードではなく端末上の Canvas で合成されます。

By · Verified

ぼかしフレームはどう作る？

  1. 写真を読み込む。クリック、ドラッグ、または貼り付けます。
  2. 縦横比を選ぶ。1:1・2:3・16:9、または任意の比率を入力します。
  3. スライダーを調整する。画像サイズ、背景サイズ、ぼかしを設定します。
  4. PNG・JPEG・WebP から選んでダウンロードします。

4 つの操作は何をする？

  • 縦横比：書き出される領域の形を決めます。
  • メイン画像の拡大率：枠の中で鮮明な写真が占める大きさです。
  • 背景の拡大率：ぼかしたコピーをどれだけ拡大するかです。
  • ぼかし：前景と背景をどれだけ見分けやすくするかです。

どの形式とサイズで書き出せる？

PNG・JPEG・WebP で、元画像の幅、1080px、2048px、または任意の幅に書き出せます。

PNG は非可逆圧縮を避けられ、JPEG や WebP は通常、写真のファイルサイズを小さくできます。

写真はサーバーにアップロードされますか？

いいえ。画像はブラウザのファイル API で読み込まれ、ローカルの Canvas 上で合成されます。当サイトのサーバーには送信されません。

制限は 2 つ。一度に 1 枚ずつの処理で、非常に大きな書き出しはモバイルブラウザのメモリを超えることがあります。

よくある質問

写真の一部が切れますか？

いいえ。写真全体がそのまま残り、空いた部分だけがぼかしコピーで埋まります。

任意の縦横比を指定できますか？

はい。1:1・2:3・16:9 のほか、4:5 など任意の比率を入力できます。

保存形式は？

PNG・JPEG・WebP で、元画像の幅、1080px、2048px、または任意の幅に保存できます。

このサイトのツールはすべて、写真を HTML canvas に描画し、その結果を読み出します。処理はそれだけです。だからアップロードは発生しません。ブラウザ自身のドキュメントは描画処理をこう説明しています:

“drawImage() will always use the source element's intrinsic size in CSS pixels when drawing, cropping, and/or scaling.”
— MDN Web Docs, CanvasRenderingContext2D: drawImage() method

出典

リンク確認日: 2026-09-03

このサイトの他の画像ツール