画像と写真 · ブラウザ画像と描画エディタ
ブラウザー画像エディターでのトリミングの仕組み: キャンバスとピクセル
· 仕組み
画像編集 キャンバス ブラウザ処理
トリミングは簡単に見えますが、ブラウザーのエディターはファイルをデコードし、ピクセルの四角形をキャンバスにコピーし、新しいファイルをエンコードする必要があります。この投稿では、各ステップを段階的に説明し、何が変更され、何が変わらないのかを説明します。
トリミングされた写真が、トリミングされた古いファイルではなく、新しいファイルである理由 — トリミングでは、単に JPEG または PNG からバイトを削除することはできないため、エディターがデコードして再エンコードします。
JPEG には圧縮された画像データが格納されますが、表示される行ごとに個別に削除可能な 1 つのバイト スパンはありません。端のバイトを切り取ると、写真がトリミングされず、ファイルが破損します。したがって、ブラウザエディタは画像をデコードし、四角形を選択して、新しいエンコードされたファイルを作成します。オリジナルはディスク上に残ります。可逆編集が必要な場合は、ソースと選択範囲の座標を保持してください。エクスポートされたトリミングには欠落したピクセルが含まれません。
画像をビットマップにデコードする — 何かを選択する前に、ブラウザが圧縮バイトを RGBA ピクセルの幅×高さのグリッドに変換する方法
ブラウザは、圧縮された JPEG、PNG、または WebP を幅×高さのサンプルを含むビットマップに変換します。 4000 × 3000 の画像は、トリミング前の 1,200 万ピクセルを表し、ピクセルあたり数バイトにより、メモリ内のフットプリントがディスク上のファイルよりもはるかに大きくなる可能性があります。 ToolAcre は、非常に大きなワークスペースを割り当てる前に、イメージとキャンバスの制限をチェックします。画面に表示される内容は、ビューポートに合わせて拡大される場合があります。ピクセルがコピーされる前に、切り抜き長方形を画像座標にマップし直す必要があります。
四角形の選択: ソースと宛先の座標 —drawImage が選択した領域をターゲット サイズのキャンバスにコピーする方法と、ピクセル全体への丸めの意味
長方形は、原点 (x,y) に幅と高さを加えたもので、ソース ピクセル単位で測定されます。 ToolAcre は、その四角形をドキュメントの境界に制限し、複合プレビューのスクリーンショットだけでなく、表示されているすべてのレイヤーをトリミングします。レイヤーごとにターゲット キャンバスを作成し、ソース キャンバス、ソース四角形、宛先原点、宛先サイズの 9 つの引数を指定してdrawImage を呼び出します。ソースとデスティネーションの寸法が等しい場合、ピクセルはサイズ変更ステップなしで選択されます。小数部分のポインター位置は、表現可能なキャンバス ピクセルに丸められるか固定されます。
結果をファイルにエンコードして戻す - エクスポート手順で形式と品質が決定される理由、およびエンコードが正しくない可能性があるにもかかわらず、クロップ自体が正確である理由
エクスポートはクロップとは別の操作です。編集されたキャンバスは、オプションとブラウザのサポートに応じて、PNG、JPEG、または WebP としてエンコードできます。 PNG は、ロスレス エンコーダに供給されたピクセルを保存できます。 JPEG では、長方形が正確に選択されている場合でも一部のディテールが失われます。また、アルファなしの形式を使用する場合、透明度には意図的な背景が必要です。新しいファイルでは、ソースのメタデータや色の情報が省略されることもあるため、元のファイルのバイト単位のサブセットとして記述しないでください。
実用的な例: 4000×3000 の写真を 1600×900 のバナーにトリミング — デコード、コピー、エクスポートを通じてピクセル数を追跡
4000 × 3000 の写真を使用するブロガーの場合、中央の 1600 × 900 のバナーは x=1200 および y=1050 から始まります。 drawImage は列 1200 ～ 2799 と行 1050 ～ 1949 を 1600×900 出力にコピーします。つまり、1,200 万ピクセルではなく 1.44 万ピクセルになります。代わりに編集者に写真全体を 1600 × 900 に縮小するように依頼した場合は、このトリミングを行うのではなく、アスペクト比を変更してリサンプルすることになります。メモリが制限されている携帯電話では、エディターが非常に大きな入力を最初に減らす可能性があるため、これらの座標を繰り返す前に、表示される寸法を確認してください。
輸出された作物が元の画像から回復できないもの
これはロスレス JPEG ブロック クロッピングではありません。アプリケーションはピクセルを描画し、新しいコンテナをエクスポートします。また、エクスポートされた 1600×900 ファイルは、元のファイルを閉じた後に破棄された余白を回復することはできません。レイヤー編集ドキュメントはまた異なります。トリミングはドキュメント レイヤーに作用し、エクスポートではドキュメント レイヤーをダウンロードした画像に合成します。機密性の高い素材の場合は、単に不透明なオーバーレイを描画するよりも余白を切り取った方が安全ですが、エクスポートされたピクセルを検査して、オリジナルを非公開に保ちます。
要点: 正確なピクセル、新しいコンテナ — ブラウザーのトリミングが正確である理由と、ファイルをアップロードせずにブラウザー画像と描画エディターがそれを実行する方法
ブラウザーのクロップは、どのデコードされたピクセルを保持するかを正確に決定し、選択されたエンコーダーはダウンロードされたファイルを制御します。ブラウザ画像および描画エディタは、画像のロード、長方形の選択、トリミングの適用、エクスポートの両方の手順をデバイス上で実行します。ネットワークはどちらのステップでも写真バイトを必要としませんが、サイト アセットと開示された AdSense/分析リクエストを DevTools でのファイル アップロードと混同しないでください。