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

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 for (w = 0; w 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. Adob​​e 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 return '8'
} else if ( g > 30 && g 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 '.';それらを実装する方法。
ここをクリックしてコードをダウンロードしてください