フォトエディター

この写真編集ツールの機能

ブラウザで写真を編集する方法

1. 1
   写真をドロップする

   任意のJPG、PNG、またはWebPをアップロードエリアにドラッグするか、デバイスから選択するためにクリックします。画像は瞬時にライブプレビューに表示されます。

2. 2
   開始フィルターを選択する

   プリセット行を使用して、ワンクリックで白黒、セピア、ヴィンテージ、暖色、寒色にジャンプします。いつでも「オリジナル」を選択してプリセットをクリアし、最初から始めることができます。

3. 3
   調整を微調整する

   明るさ、コントラスト、彩度、色相、ぼかし、セピア、グレースケール、反転のためのスライダーをドラッグします。プレビューはライブで更新されるので、望む見た目に調整できます。

4. 4
   回転、反転、またはトリミングする

   ツールバーのボタンを使用して90度回転や水平または垂直の反転を行います。トリミングをクリックし、画像上に矩形をドラッグして「トリミングを適用」をクリックして写真に焼き付けます。

5. 5
   出力形式と品質を選択する

   JPEGは写真の安全なデフォルトです。WebPは同じ視覚品質でより小さいファイルを提供します。PNGはロスレスで、品質の損失を許容できない場合に便利です。

6. 6
   結果をダウンロードする

   「編集した写真をダウンロード」をクリックして、調整が反映されたフル解像度の結果を保存します。何もアップロードされず、ファイルは完全にあなたのデバイス上で生成され、ダウンロードされます。

ブラウザの写真編集の仕組み

1. createImageBitmap()を使用してファイルをオフスクリーンのImageBitmapにデコードします。
2. ctx.filterをCSSフィルターストリングに設定して、ビットマップを2Dキャンバスにレンダリングします。
3. 各調整は1つのフィルタ関数にマッピングされます: brightness(), contrast(), saturate(), hue-rotate(), blur(), sepia(), grayscale(), invert()。
4. 変換（回転、反転、トリミング）は、新しいキャンバスに描画してからImageBitmapに戻すことで焼き付けられます。
5. canvas.toBlob('image/jpeg' | 'image/webp' | 'image/png', quality)が結果を再エンコードします。
6. 結果のBlobはオブジェクトURLを介してダウンロードとして公開されます — アップロードステップは含まれません。

参考: MDN — CanvasRenderingContext2D.filter

実例

クイックフォトエディタを使用するタイミング

• フルエディタを起動せずに投稿する前に、暗い電話の写真を明るくする。
• ブログやニュースレター用にカラーショットを白黒またはセピアに変換する。
• アップロードする前に、実際に重要な部分に画像をトリミングする。
• モバイルカメラから横向きで撮影された写真を回転させる。
• リストでより良く見えるように、商品写真の彩度とコントラストを調整する。
• アップロード制限を下回るために、低品質でWebPとして写真を再エンコードする。
• デスクトップツールを学ぶことなく、ヘッダー画像にビンテージまたは暖かいフィルターを適用する。
• サードパーティのクラウドサービスに信頼せずに、プライベート写真を迅速に編集する。

関連ツール

よくある質問