Javascriptのみを使用してカラー画像を白黒に変換するにはどうすればよいですか?
また、Internet Explorer には「フィルター」メカニズムがあると聞いていますが、他のブラウザーはそれをサポートしていないと聞いているため、ほとんどのブラウザーで相互互換性を持たせてください。
Aaron8it
質問する
51412 次
10 に答える
16
私の最初の懐疑論にもかかわらず、一部のブラウザーで新しい Canvas 機能を使用すると、そのような魔法が実際に可能であるように見えます。
このページでは、Canvas をサポートするブラウザーを使用してそれを行う方法を示します。
http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html
IE の場合、フィルターを使用する必要があります。ここにグレースケールを実行する例があります。
于 2009-02-18T17:54:01.330 に答える
8
私が行う方法は、サーバー側のPHPスクリプトを指すようにimgのsrcを設定することです。
例えば。、
<img src="http://mysite/grayscale.php?url='...'
そのスクリプトは画像をフェッチし、GDコードを実行して、JPGを返します。このようなもの
于 2009-02-18T18:11:00.370 に答える
8
この jquery プラグインはクロス ブラウザーで動作するようです。私はそれを徹底的にテストしていません。
于 2012-02-14T17:01:36.983 に答える
7
HTML5 Canvas と JavaScript の使用
ctx.drawImage(img, 0, 0, w, h);
var imgPixels = ctx.getImageData(0, 0, w, h);
for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
于 2016-02-03T14:53:32.307 に答える
1
私はこの（http://spyrestudios.com/html5-canvas-image-effects-black-white/）ソリューションがIEの外でかなりうまく機能することを発見しました。他の人が指摘したように、フィルターを使用する必要があります為に。
于 2011-09-07T20:49:07.113 に答える
0
Canvasは確かにこの問題に対する最良のクライアント側ソリューションであり、IEの場合、canvasコマンドを独自のMicrosoftXMLベースのベクトル言語であるVMLに変換するgoogleexCanvasプロジェクトを実際に使用できることを指摘したいと思います。
于 2009-03-10T19:17:08.080 に答える