4

私は写真編集ウェブアプリを作成していて、ピクセルを編集してクールな画像フィルターを作成することができました

var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
 //Note: data[i], data[i+1], data[i+2] represent RGB respectively
data[i] = data[i];
data[i+1] = data[i+1];
data[i+1] = data[i+1];
data[i+2] = data[i+2];

}

しかし、私はアルゴリズムを見つけることも、ビンテージ効果を生み出すアルゴリズムを思いつくこともできませんでした。これは、ピクセル操作のイマームで可能ですか？もしそうなら、私がアルゴリズムを見つけることができる場所を知っていますか？

効果の例はhttps://softwareengineering.stackexchange.com/questions/153052/is-there-a-javascript-library-for-creating-vintage-photosにあります

しかし、これまでと同じようにピクセルを編集したいと思います。

4

4 に答える 4

18

エラーを理解する

「ビンテージ」写真をエミュレートするアルゴリズムを思い付くのは困難です（「ビンテージ」が「古い虐待されたネガ/写真」として定義されている場合:-)）。結果は多層であり、さまざまな物理的および化学的要因によって引き起こされます。

これらの要素を理解すると、「ヴィンテージ」の外観をエミュレートするために必要なレイヤーを構築するのに役立ちます。

光漏れ

古いカメラでは、裏蓋が開いて光がネガに漏れる場合があります。ふたを横から開くと、典型的な漏れが端や周りに、または縞模様として現れました。光の露出は通常の意図された露出と比較して比較的長いため、ストライプはしばしば白く見え、赤いぼやけたハロー（ポジティブ）がありました。

正確な露出過度のストライプが表示される場所はランダムであり、カメラと周囲の光の状態によって異なります。

さらに、光がフィルムに漏れると、霧のような画像になることがよくあります。これは、光がすでにフィルムを露光しており、灰色になるためです。これは、上に意図した露出と混合されたものです。

フィルムグレイン

アナログフィルムには銀の粒子が含まれています。ISOが高いほど、粒子のサイズは大きくなります。実際、ISOと粒子サイズ（マスクでフィルタリング）は直接関係しています。民生用フィルムの一般的なISO値は、200〜400ISOです。さらに、実験室での開発で使用される3つのステップの化学的品質も、粒子に関してだけでなく、コントラストやカラーバランスに関しても品質に影響を与えました。

また、過去の典型的なサイズは135フィルムだけではありませんでした。あなたはより小さなフィルムサイズを持っていました、そしてこれのために開発されたポジは同じISO値（粒子サイズ）でより粒子が粗く見えました。

化学薬品

化学物質は、開発、品質（不飽和）、温度、および時間において重要です。実験室が化学薬品の補充を忘れた場合、結果はコントラストと色相が悪くなります（商業実験室では時間と温度が自動的に処理されますが、化学薬品は手動で交換する必要があります）。

時々、人々は温度と化学物質を操作して、ブリーチ、ソラリゼーション、トーンの調整（彩度、カラーバランス、色相）などの特定の効果を意図的に作成しました。

曝露

本当に古いカメラ/フィルムの場合、露出の不均一が顕著な要因でした。フィルムにさまざまな露出の「グラデーション」を設定すると、フィルムの上部が明るく、下部が暗くなります。その逆も可能です。

最近のカメラでは、ほとんどの設定が手動で行われ、フィルムの露出オーバーまたは露出アンダーが簡単でした。ポジティブの開発では、ラボのオペレーターが間違った調整を行った場合、または化学物質が機能しなくなった場合にも同じことが起こる可能性があります。

光学

光学系は、中心が明るく、角が暗いケラレで特に役割を果たします。貧弱な光学系とハウジングはビネットを生成する傾向がありました（個人的に私はビネットのファンであり、しばしばそれを自分の写真に追加します）。

ビネット効果

多くの古い自動カメラでは、「無限」に固定されたレンズは、焦点が合っていないように見えます。レンズが許す限りシャープなものです（この時点でプラスチックレンズは多かれ少なかれ普通になり、より低くなりました）ガラスベースのレンズよりも品質）。

写真用紙

もう1つの要因は、写真用紙自体の品質と、ポジの現像に使用される化学プロセスです。

紙の構成方法、粒子サイズ、使用する化学薬品に応じて、ラスターのような粗い粒子の画像から非常に鮮明な光沢のある画像まで、さまざまな結果が得られます。ポジ（紙）とネガ（またはディアスフィルム）の両方で高いISO値を使用すると、低解像度のデジタル画像をはるかに大きなサイズに拡大した場合と同じように、結果がぼやけて粗くなることがよくあります。

アナログ対デジタル

アナログフィルムとデジタルの違いを理解することも重要です。

本質的に、ピクセルが厳密に順序付けられているデジタル画像とは対照的に、銀の粒子は不均一に分布しています。

露出オーバーおよび露出アンダーのフィルムには詳細が含まれている可能性がありますが、デジタルではこれらは削除されます。これは、フィルムのダイナミックレンジとデジタル用のADコンバーターに関連しています。

色表現

色は、フィルム/紙の乳剤や化学プロセスによっても異なります。エンドカラーに影響を与える可能性のあるブリーチなどの特殊なプロセスもあります。

デジタルドメインでは、同等のものはLUT（ルックアップテーブル）であり、1Dまたは3D LUTを使用してより広いソース範囲を使用して、特定の外観（「フィルム」、「シネマティック」、ブリーチプロセスのエミュレートなど）を与えるように色を変更できます。前方へ）。

その他

そしてもちろん、他の要因もありますが、これらは通常「ビンテージ」スタイルの一部と見なされるため、これらに焦点を当てます（ビンテージは古いスタイルを指すため、IMOという正しい用語ではありません-一般的なエラーはそれほど多くありませんアナログカメラ:-)ですが、ここで使用します）。

すべてを一緒に入れて

では、この知識をどのように使用できるでしょうか。さまざまなステップをエラーのレイヤーに分けることができます。

たとえば、光漏れの場合、なぜそれらが現れるのか、どこに現れるのかがわかります。オーバーレイを使用して同じ効果を作成できるため、これにはアルゴリズム自体は必要ない場合があります。光漏れは技術的には多重露光の一部であるため、「空白の」光漏れを画像に混ぜることができます。

たとえば、この方法で光にさらされる2つの空のフレームがある場合、次のような画像を使用してメイン画像にミックスできます。

光漏れの例

これらを自分で作成するには、古いカメラを見つけて、裏蓋を開き、閉じて、次のフレームにスプールし、繰り返してから、現像（またはスキャン）します。これにより、最も自然に見える結果が得られます。

フィルムグレインは、ガウス分布などのブラーやノイズを導入することで生成できます。ただし、これは実際には穀物のようには見えませんが、簡単な方法です。

または、ここでも、画像にミックスした実際の粒子の粗いフレームを使用できます。最良の結果を得るには、「粒子クラスター」を混合します（現在の粒子の色を使用してその粒子の領域をマッピングし、同じ領域の画像の色を平均的な色に混合して、粒子領域を塗りつぶします）。ただし、これはもう少し複雑で、計算量が多くなります。

次の例には、ほこりや髪の毛も含まれています。これらは、アナログフィルムを扱う場合にもよく見られます。ただし、これらはグレインとは関係ありませんが、プロセスのこのレイヤーでそれらを組み合わせることができます。

フィルムグレイン

化学プロセスは、彩度の低下によってエミュレートし、色相バイアスを提供する（または単にカラーバランスを調整する）ことができます。

カラーバランスの場合、加法色の色理論を理解することは利点です（CMYKカラー、つまりマゼンタとグリーン、イエローとブルー、レッドとシアンなど）。

しかし、CMYKではなくRGBをHSL / HSV色空間に変換し、色相度を変更して彩度値を調整してから、RGBに戻すこともできます。または、単にRGBでカラーバランスを直接調整してみてください。ネガフィルムで直接。

色調整の下には、コントラスト調整もあります。コントラストを下げることで、より霧が発生します。

組み立て

これらすべてのレイヤーを組み立てるには、オーバーレイを描画するときにアルファレベルを調整するだけで、いくつかのレイヤーを繰り返す必要がなくなります。たとえば、光漏れの場合は、黒を透明に置き換えて、画像の上に混ぜるだけです。ただし、粒子の場合は、粒子または元の画像のいずれかに対してバイアスを調整できる乗算モードを使用する必要があります。

そしてもちろん、色を変更するには、ピクセルを繰り返す必要があります。

妥協して、次のレイヤーを1つのレイヤーに結合することができます。

  • フィルムグレイン
  • ビネット
  • 光漏れ

粒子レイヤーがピクセルとうまく混ざり合うのではなく、灰色のオーバーレイとして表示されることに気付いた場合。これは、画像をより曇らせたい場合に機能しますが、後で明度を上げる必要があります。

順序は重要であり、同様に考慮する必要があります。

  • まず色調整を行います
  • コントラストを下げる
  • ぼかし（「無限の」フォーカスをシミュレートするために、誇張されたエッジブラーを検討してください）
  • レイヤー（または結合されたグレイン、ビネット、光漏れ）を追加します
  • 明度の調整を検討してください

結論

ただし、これまでのところ理論のみです。

もちろん、SOの目的ではないかなり完全なソリューションが実際に得られるため、実際の例は提供しませんでした。

また、アルゴリズムを使用してすべての場所を生成するとすぐに非常に複雑になる可能性があるため、答えを基本に限定しようとしました。アルゴリズムのいくつかが必要になるため、答えるには広すぎます。

いずれにせよ、ここにさまざまなステップであなたを助けることができるいくつかのリソースがあります：

Resources
于 2013-09-18T00:30:00.843 に答える
2

これは、HTML5キャンバスのピクセル操作と、それらの手法を適用していくつかの一般的な画像効果を実現する方法の両方を理解するための非常に優れた記事です。

HTML5キャンバス画像フィルター

于 2013-09-23T23:05:23.453 に答える
1

私はケンほど広範ではありませんが、この質問への答えを探してここに来る人にとって、役立つ可能性があり、より「すぐに使える」ものを見つけました。

CamanJS

CamanJSとは何ですか？

CamanJSは、Javascriptの（ca）nvas（man）ipulationです。これは、使いやすいインターフェースと高度で効率的な画像/キャンバス編集技術の組み合わせです。

CamanJSは、新しいフィルターとプラグインを使用して非常に簡単に拡張でき、さまざまな画像編集機能が搭載されており、成長を続けています。これは完全にライブラリに依存せず、NodeJSとブラウザの両方で機能します。

サンプルページを参照できます。最初のフィルターの1つはヴィンテージと呼ばれます。

お役に立てれば。

于 2013-09-23T17:55:57.033 に答える
0

あなたは「迅速で汚い」解決策のためにでglobalCompositeOperation使うことができます：hue

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var img = new Image;
img.onload = function(){
  ctx.drawImage(img, 0, 0);
  ctx.globalCompositeOperation = "hue";
  ctx.fillStyle = "rgba(0,0,0,0.75)";
  ctx.fillRect(0, 0, 509, 321);
  ctx.globalCompositeOperation = "destination-in";
  ctx.drawImage(img, 0, 0);
};
img.src = "https://www.qoncious.com/sites/default/files/q_a_images/flowers.jpg";
<p>Original</p>
<img src="https://www.qoncious.com/sites/default/files/q_a_images/flowers.jpg" />

<p>Vintage</p>
<canvas id="myCanvas" width="509" height="321" style="border:1px solid #d3d3d3;">
</canvas>

于 2021-08-01T03:15:17.647 に答える