HTML5プラクティス - グレースケールへの画像設定

コメント：過去には、Webにグレースケールの画像を表示したい場合は、画像ソフトウェアを手動で使用してそれらを変換することしかできませんでした。しかし今、このプロセスは、画像編集ソフトウェアを使用する必要なく、HTML5キャンバスの助けを借りて実現できます

目的

このデモでは、HTML5とjQueryを使用して画像にマウスを移動するときに、グレースケール画像と元の画像を切り替える方法を示します。 HTML5が表示される前に、この関数を実装するには、2つの写真を準備する必要があります。1つのグレースケール写真と1つのオリジナル画像が必要です。しかし、Grayscale画像は元の画像で直接生成されるため、HTML5でより速く、より簡単に達成できます。ファイルまたは画像表示機能を作成するときに、このJSコードが役立つことを願っています。

複製図

jQueryコード

次のjQueryコードでは、ターゲット画像を探し、グレースケールバージョンを生成します。マウスを写真に移動すると、グレースケールの写真が主要な色に変わります。

<スクリプトsrc = "jquery.min.js" type = "text/javascript"> </script>

<script type = "text/javascript">

//実行する前にすべての写真がロードされるのを待つためにウィンドウロードイベントを設定します

$（window）.load（function（）{

//色の元の画像が表示されないように徐々に入力し、ウィンドウロードイベントを実行してください

$（ "。item img"）。fadein（500）;

//写真をコピーします

$（ '。アイテムimg'）。各（function（）{

var el = $（this）;

el.css（{"position"： "absolute"}）。

var el = $（this）;

el.Parent（）。css（{"width"：this.width、 "height"：this.height}）;

el.dequeue（）;

}）;

this.src = grayscale（this.src）;

}）;

//写真を徐々に入力します

$（ '。アイテムimg'）。マウスオーバー（function（）{

$（this）.parent（）。find（ 'img：first'）。stop（）。animate（{opacity：1}、1000）;

}）

$（'。IMG_GRAYSCALE '）。マウスアウト（function（）{

$（this）.stop（）。animate（{Opacity：0}、1000）;

}）;

}）;

//キャンバスで灰色の写真を作ります

function grayscale（src）{

var canvas = document.createelement（ 'canvas'）;

var ctx = canvas.getContext（ '2d'）;

var imgobj = new Image（）;

imgobj.src = src;

canvas.width = imgobj.width;

canvas.height = imgobj.height;

ctx.drawimage（imgobj、0、0）;

var imgpixels = ctx.getimagedata（0、0、canvas.width、canvas.height）;

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、imgpixels.width、imgpixels.height）;

canvas.todataurl（）を返します。

}

</script>

使い方

以下の手順に従ってください。

引用jquery.js

上記のコードをコピーします

ターゲット画像を設定します（例：.post-img、img、.gallery imgなど）

アニメーションの速度を設定することもできます（つまり、1000 = 1秒）

互換性

Chrome、Safari、Firefoxなど、HTML5やキャンバスをサポートするすべてのブラウザを試しました。 HTML5をサポートしていないブラウザの場合、元の画像のみを使用し、グレースケール画像を生成しません。

注：ローカルHTMLファイルがFirefoxとChromeで実行できない場合は、HTMLファイルをサーバーに展開する必要があります。

自己実践

チュートリアルに従って自分でテストしましたが、注意すべきことがいくつかありました。 Firefoxでページを開きました。プログラムは正しく実行できませんが、関連するコードをサーバーに展開した後に実行できます。

それはローカル画像であることを保証する必要があります。そうしないと、セキュリティエラーを報告する必要があります。

これは：

Canvasは、HTML5標準のキャンバス要素であり、2Dおよび3D画像を描画するために使用できます。

ただし、デバッグ中にセキュリティエラーの問題に遭遇するのは簡単です。

現在、デバッグ中に遭遇したセキュリティエラーは、主にTodataurl（）とSRCに表示されます。

セキュリティエラーは、このコードにセマンティックの問題がないことを示していますが、セキュリティ上の理由により正常に実行できません。

スローセキュリティエラーの状況：

キャンバスでクロスドメイン画像を使用します

ローカルサーバーレス環境でのデバッグ

現在のドメインと画像との関係を取得できません

Stackoverflowで見つかったソリューションのいくつかは、通常、ドメイン間の問題を解決できるようにします。

しかし、実際には、ローカルデバッグ中にサーバーソフトウェアを使用しない場合、この問題も引き起こします。

たとえば、Todataurl関数はローカルデバッグ中に使用され、ローカル画像ファイルはキャンバスで使用されます。 ChromeとFirefoxでは、セキュリティエラーが引き起こされます。

一般的な解決策は、サーバー環境をローカルにセットアップするか、デバッグのためにコンテンツをサーバーに送信することです。