ブラウザで画像を編集する

すべてはデバイス上で行われます

ほとんどのオンライン画像エディターは、画像をサーバーにアップロードし、そこで処理して結果を送り返します。つまり、あなたのイメージのコピーは、その保持ポリシーとセキュリティに従って、他の人のマシンに保存されます。

このエディタはそのようには機能しません。ブラウザにはすでに完全な画像パイプラインが含まれています。JPEG をデコードし、ピクセルを渡し、その上に描画して、新しいファイルをエンコードできます。このツールは、そのパイプライン上のユーザー インターフェイスです。画像はディスクからメモリに読み取られ、メモリ内で編集されて、ディスクに書き戻されます。

実際的な結果として、このツールは一度読み込まれるとオフラインで動作し、デバイスのメモリを超えるアップロード制限がなく、画像を送信しないため画像が漏洩することはありません。私たちのテスト スイートには、ソース ファイルにネットワーク呼び出しが含まれていないことを確認するチェックが含まれているため、クレームが単にアサートされるのではなく強制されます。

開始: 空白のキャンバスまたは既存の画像

空白のキャンバスの幅と高さを選択するか、デバイスから PNG、JPEG、または WebP を開きます。画像を開くと現在のドキュメントが置き換えられるため、保存しておきたいものはすべて最初にエクスポートします。

非常に大きな画像は自動的に縮小され、ツールは縮小したことを通知します。これは任意の制限ではありません。 50 メガピクセルの写真には、キャンバス内の生のピクセルとして約 200 MB が必要で、出力用の 2 番目のコピーはその 2 倍になります。携帯電話では、制限を超えてもキャッチ可能なエラーは発生しません。ブラウザーが空白のキャンバスを返すか、オペレーティング システムがタブを強制終了します。最初に画像を縮小することが、エディターが機能するかクラッシュするかの違いです。

描画とタッチがここで適切に機能する理由

ブラシ、消しゴム、線、四角形、楕円、およびテキスト ツールはすべて、マウス、トラックパッド、指、またはスタイラスを使用して同じように機能します。これは、エディタが個別のマウス ハンドラーとタッチ ハンドラーではなく統合されたポインター イベントをリッスンするためです。

細かい点の 1 つにより、タッチ描画がイライラせずに使いやすくなります。キャンバスは独自のジェスチャを処理することを宣言するため、キャンバス上でドラッグされた指は、ページをスクロールする代わりに描画します。これを省略したエディタは、すべてのストロークがブラウザと制御を争うため、携帯電話ではほとんど使用できません。ページはキャンバスの外側のどこでも通常どおりスクロールします。

また、ポインタ イベントは画面が更新されるよりも頻繁に到着しないため、素早いストロークは広く間隔をあけられた少数の点として報告されます。エディターはそれらの間のギャップを埋めるため、高速な線が点の列ではなく実線で表示されます。

元に戻すとそれにかかるメモリ

すべてのストローク、シェイプ、変形は 1 回の取り消しステップです。ツールバーまたは通常のキーボード ショートカットを使用して、作業を元に戻したりやり直したりできます。

歴史は意図的に制限されています。各ステップでは、変更されたピクセルのコピーが、ステップごとに数十メガバイトの大きな画像上に保持されます。無制限の履歴は電話機のメモリを最も早く枯渇させる方法の 1 つであるため、このエディタではステップ数と合計サイズの両方で履歴に上限を設け、最も古いものから順に破棄します。ステータス行には、現在どれだけ保持されているかが表示されます。

これは意図的な取引です。セッションの途中で死ぬことのない編集者と引き換えに、歴史を浅くします。

意図的に小さく保たれたレイヤー

レイヤーを使用すると、注釈をその下の写真とは別に保持できるため、元のピクセルに触れることなく注釈を調整したり削除したりできます。追加、選択、位置による名前の変更、並べ替え、非表示、不透明度の設定、マージダウン、フラット化を行うことができます。

ここにあるのは小さなラスター レイヤー モデルであり、意図的にそこで停止しています。ブレンド モード、レイヤー マスク、グループ、調整レイヤー、非破壊変換は実装されていません。これらの機能は、スケッチ ツールとプロのコンポジターを区別するものであり、これらの機能が中途半端に機能するバージョンは、正直に機能しないことよりも悪いです。制限事項のページには、不足しているものが正確にリストされています。

各レイヤーはフルサイズのビットマップを保持するため、レイヤーの数に正比例してメモリが消費されます。キャップは12です。

輸出中

PNG はロスレスで透明性を維持するため、図面、ダイアグラム、スクリーンショットに最適です。 JPEG は写真としてははるかに小さいですが、透明度を保存できないため、保存するたびに品質が少し低下します。 WebP は両方のジョブを適切に実行し、JPEG よりも小さいファイルを同等の品質で生成します。

画像に透明な領域があり、JPEG を選択した場合、エディターは保存する前に警告し、ブラウザーに色 (場合によっては黒) を選択させるのではなく、透明部分を白で塗りつぶします。

エクスポートされたファイルはページ内で作成され、ダウンロード フォルダーに直接保存されます。

質問

制限事項

• レイヤーはラスターのみです。ブレンド モード、マスク、グループ、調整レイヤー、非破壊変換はありません。
• 大きな画像はデバイスのキャンバス制限に合わせて縮小されるため、エディターは非常に大きな写真をフル解像度で作業するのには適していません。
• 元に戻す履歴はサイズとステップ数によって制限されるため、長時間のセッションではすべてのステップが保持されません。
• セッション間では何も保存されません。タブを閉じるとドキュメントが破棄されます。
• RAW、HEIC、TIFF、GIF、SVG はサポートされていません。エディターは PNG、JPEG、WebP のみを処理します。
• カラーマネージメントはありません。画像はブラウザのデフォルトの色空間で処理されるため、埋め込まれた ICC プロファイルは保持されない場合があります。