web-dev-qa-db-ja.com

Javascriptを使用してカラー画像を白黒に変換するにはどうすればよいですか？

Javascriptのみを使用してカラー画像を白黒に変換するにはどうすればよいですか？

また、Internet Explorerには「フィルター」メカニズムがあると聞いていますが、他のブラウザーではサポートされていないため、ほとんどのブラウザーで相互互換性があります。

javascriptimage-processingcanvas
16
Aaron8it

私の最初の懐疑論にもかかわらず、いくつかのブラウザで新しいCanvas機能を使用すれば、そのような魔法は確かに可能であるように思われます。

このページは、Canvasをサポートするブラウザを使用してそれを行う方法を示しています。

http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html

IEフィルターを使用する必要がある場合、ここにグレースケールを実行する例があります。

http://www.javascriptkit.com/filters/basicimage.shtml

16
andynormancx

私が行う方法は、サーバーサイドPHPスクリプト）を指すようにimgのsrcを設定することです。

例えば。、

<img src="http://mysite/grayscale.php?url='...'

そのスクリプトは画像をフェッチし、いくつかのGdコードを実行し、JPGを返します。何か このように

8
Scott Evernden

このjqueryプラグインはクロスブラウザで動作するようです。しかし、私はそれを徹底的にテストしていません。

https://github.com/GianlucaGuarini/jQuery.BlackAndWhite

8
K B

HTML5Canvasと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);
4
varun

最近のブラウザは、CSSでこれを実行できるようになりました–anyHTML要素（画像だけでなく）。 IEの古いfilter CSSと組み合わせると、かなり良い互換性を得ることができます。

image.grayscale {
  /* IE */
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

  /* Chrome, Safari */
  -webkit-filter: grayscale(1);

  /* Firefox */
  filter: grayscale(1);
}

OPは「JavaScriptのみ」を指定していますが、IEのfilterがより広くサポートされていれば受け入れられると述べていますが、現在は（事実上）サポートされているので、これが2015年の最善の解決策だと思います。 JavaScriptを持っている：

element.style.filter = 'grayscale(1)';

出典：

3
Don McCurdy

このコードは、ネストされたループや追加のライブラリを必要とせずに完璧に実行されると思います

var image = document.getElementById("image");

var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");

canvas.width= image.width;
canvas.height= image.height;

ctx.drawImage(image,0,0);

var imageData=ctx.getImageData(0,0, image.width, image.height);

for (var i=0;i<imageData.data.length;i+=4) {
    var avg = (imageData.data[i]+imageData.data[i+1]+imageData.data[i+2])/3;

    imageData.data[i] = avg;
    imageData.data[i+1] = avg;
    imageData.data[i+2] = avg;

}

ctx.putImageData(imageData, 0, 0, 0, 0, imageData.width, imageData.height);
document.getElementById("grayscale").appendChild(canvas);
1
Karim Omaya

私はこの（ http://spyrestudios.com/html5-canvas-image-effects-black-white/ ）ソリューションがIEの外でかなりうまく機能することを発見しました。これは、他の人が指摘しているように、にフィルタを使用する必要があります。

1
chaselee

Canvasは確かにこの問題に対する最良のクライアント側ソリューションであり、IEの場合、canvasコマンドを独自のMicrosoftXMLベースのベクトル言語であるVMLに変換するgoogleexCanvasプロジェクトを実際に使用できることを指摘したいと思います。

http://excanvas.sourceforge.net/

0
Gavin

一部の画像フィルターはCSSで使用でき、すべての主要なブラウザーでサポートされていますが、HTML5CanvasとJavascriptを使用してさらに多くのオプションを使用できます。

ただし、Canvasベースの画像フィルタリングを使用する場合は、フィルターアルゴリズムを自分で実装する必要はありません。画像処理またはCanvas操作ライブラリを使用するだけです。

例：

以下の例では、MarvinJを使用しました。

画像の読み込み：

image = new MarvinImage();
image.load("https://i.imgur.com/B33rKWi.png", imageLoaded);

グレースケール：

Marvin.grayScale(image.clone(), image);

enter image description here

白黒：

Marvin.blackAndWhite(image.clone(), image, 5);

enter image description here

白黒2：

Marvin.blackAndWhite(image.clone(), image, 40);

enter image description here

ハーフトーン：

Marvin.halftoneErrorDiffusion(image.clone(), image);

enter image description here

実行可能な例：

var canvas = document.getElementById("canvas");
image = new MarvinImage();
image.load("https://i.imgur.com/B33rKWi.png", imageLoaded);

function imageLoaded(){
        // GrayScale
        //Marvin.grayScale(image.clone(), image);
        //image.draw(canvas);
        
        // Black and White
        Marvin.blackAndWhite(image.clone(), image, 5);
        image.draw(canvas);
        
        // Black and White 2
        //Marvin.blackAndWhite(image.clone(), image, 40);
        //image.draw(canvas);
        
        // Error Diffusion
        //Marvin.halftoneErrorDiffusion(image.clone(), image);
        //image.draw(canvas);
}
<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script>
<canvas id="canvas" width="400" height="400"></canvas>
0
Gabriel Ambrósio Archanjo