javascript_javascript スキルを使用して写真をキャラクターの絵に変換します-jsチュートリアル-php.cn

javascript_javascript スキルを使用して写真をキャラクターの絵に変換します

WBOY

リリース： 2016-05-16 17:19:10

オリジナル

1207 人が閲覧しました

JavaScript を通じて写真をキャラクターの絵に変換します

1. アップロードされた画像オブジェクトのデータを取得する
JavaScript ではローカルにアップロードされた画像のデータを直接取得できませんが、html5 ではこの問題を解決できます。 HTML5 の FileReader インターフェイスは、画像オブジェクトのデータをメモリに読み取り、インターフェイスの進行状況イベント (Progress Events) を通じてデータにアクセスできます。
ブラウザのサポート:
1. Internet Explorer: 10
3. Chrome: 13
5. Safari: 部分的

コードをコピーしますコードは次のとおりです。var Reader = new FileReader(); // FileReader インターフェイス

reader.readAsDataURL(fileBtn.files[0]); //fileBtn はファイルアップロードコントロールオブジェクトです

reader.onload = function () { //onload イベントで画像データにアクセスします 
 img .src = リーダー.結果; }

2. 画像オブジェクトのピクセルを取得します

画像オブジェクトの getImageData メソッドは、各ピクセルの rgba 値、つまり 1 ビットの配列を返します。 rgba はそれぞれ値に対応し、getImageData.data の値が [1,2,3,4,5,6,7,8] であるとすると、getImageData オブジェクトの範囲には次の値が含まれます。 2 ピクセル最初のピクセルの rgba 値はそれぞれ 1,2,3,4 で、2 番目のピクセルの rgba 値は 4,5,6,7,8 です。したがって、各ピクセルの rgba 値を取得するときは、そのインデックスをピクセルのインデックス値に 4 倍してから、getGray() を通じてグレースケールを計算する必要があります。

コードをコピーコードは次のとおりです。var imgData = c.getImageData(0, 0, img.width, img.height);

var imgDataWidth = imgData.width;

var imgDataHeight =
for (h = 0; h < imgDataHeight; h = 12) {
for (w = 0; w javascript_javascript スキルを使用して写真をキャラクターの絵に変換します

var インデックス = (w imgDataWidth * h) * 4; imgDataArr[インデックス 0];
var g = imgDataArr[インデックス 1];
}
}

3. rgb 値に基づいてグレースケールを計算する<🎜>異なる RGB 空間には異なるグレースケールの計算式があります。いくつかの一般的な RGB 空間でのグレースケールの計算式は次のとおりです。
1. 簡略化された sRGB IEC61966 -2.1 [ガンマ]。 =2.20]
グレー = (R^2.2 * 0.7152 B^2.2 * 0.0722)^(1/2.2)
2. Adobe RGB (1998) [gamma=2.20]

グレー= (R^2.2 * 0.2973 G^2.2 * 0.6274 B^2.2 * 0.0753)^(1/2.2)

3. Apple RGB [ガンマ=1.80]

グレー = (R^1.8 * 0.2446 G^1.8 * 0.6720 B^1.8 * 0.0833)^(1/1.8)
4. カラーマッチ RGB [ガンマ=1.8]
グレー = (R^1.8 * 0.2750 G^1.8 * 0.6581 B^1.8 * 0.0670)^( 1/1.8)
5. 簡略化された KODAK DC シリーズデジタルカメラ [ガンマ=2.2]
グレー = (R^2.2 * 0.2229 G^2.2 * 0.7175 B^2.2 * 0.0595)^(1/ 2.2)

コードをコピー

コードは次のとおりです:

// RGB 値に基づいてグレースケールを計算します function getGray(r, g, b) { return 0.299 * r 0.578 * g 0.114 * b }

4. グレースケールに基づいて対応する文字を生成します。 
 異なるグレースケールを対応する文字に置き換えます。原則として、濃いグレースケールのピクセルは、より複雑な文字を使用する必要があります。これは単なるテスト バージョンです。 
コード スニペット:

コードをコピー

コードは次のとおりです:

// グレースケールに基づいて対応する文字を生成します 
function toText(g) { 
 if (g <= 30) { 
 return '8' 
 } else if ( g > 30 && g <= 60) { 
 if (g > 120 && g  return '*'; } else if (g > 150 && g  return 'o' ; 
 } else if (g > 180 && g  return 
 } else if ( g > 210 && g  return ';'; 
 } else { 
 return '.';それらを実装する方法。 
ここをクリックしてコードをダウンロードしてください