JavaScriptを使用して、マウスオーバーで画像のグレースケールバージョンを表示する
-
10-07-2019 - |
質問
マウスオーバー
で画像のグレースケールバージョンを表示する方法が必要です。これはブラウザのCanvas機能を使用して実装されているのを見てきましたが、canvasがすべてのブラウザに実装されるまでしばらく時間がかかるため、このメソッドは使用したくありません。
誰かがそのようなことをしましたか?
解決
Canvasを使用せず、ブラウザ固有の機能を利用したくない場合は、サーバー上でグレースケール画像を生成する必要があります。事前またはオンデマンドで。方法 SOの他の場所で回答されています
他のヒント
reko_tがコメントしているように、何らかの理由でサーバー上に画像のグレースケールバージョンを作成することはできないと仮定します。IEでは、独自の filter
CSS属性を使用して greyScaleを使用したBasicImage 。これを行うのにJSは必要ありません。CSSで宣言できます:
a {
display: block;
width: 80px;
height: 15px;
background-image: url(http://www.boogdesign.com/images/buttons/microformat_hcard.png);
}
a:hover {
filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);
}
Firefoxでは、 SVGマスクを適用するか、キャンバスを使用してみてください。要素。
ただし、最も単純な解決策は、画像のグレースケールバージョンを手動で作成するか、 GD 。
ネット上で発見:
HTML 5ではCanvasオブジェクトが導入され、 描画と操作に使用できます 画像
スクリプト:
function grayscale(image, bPlaceImage)
{
var myCanvas=document.createElement("canvas");
var myCanvasContext=myCanvas.getContext("2d");
var imgWidth=image.width;
var imgHeight=image.height;
// You'll get some string error if you fail to specify the dimensions
myCanvas.width= imgWidth;
myCanvas.height=imgHeight;
// alert(imgWidth);
myCanvasContext.drawImage(image,0,0);
// This function cannot be called if the image is not rom the same domain.
// You'll get security error if you do.
var imageData=myCanvasContext.getImageData(0,0, imgWidth, imgHeight);
// This loop gets every pixels on the image and
for (j=0; j<imageData.height; i++)
{
for (i=0; i<imageData.width; j++)
{
var index=(i*4)*imageData.width+(j*4);
var red=imageData.data[index];
var green=imageData.data[index+1];
var blue=imageData.data[index+2];
var alpha=imageData.data[index+3];
var average=(red+green+blue)/3;
imageData.data[index]=average;
imageData.data[index+1]=average;
imageData.data[index+2]=average;
imageData.data[index+3]=alpha;
}
}
if (bPlaceImage)
{
var myDiv=document.createElement("div");
myDiv.appendChild(myCanvas);
image.parentNode.appendChild(myCanvas);
}
return myCanvas.toDataURL();
}
使用法:
<img id="myImage" src="image.gif"
onload="javascript:grayscale(this, true);"></img>
次を使用してテストに合格:
- FireFox 3.5.4
- Chrome 3.0
- Safari 4.0
テストの失敗:
- Internet Explorer 6
- Internet Explorer 7
リソース: http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html
所属していません StackOverflow