استخدام جافا سكريبت لإظهار نسخة ذات تدرج رمادي من الصورة عند تمرير الماوس عليها

Question

أحتاج إلى طريقة لعرض نسخة ذات تدرج رمادي من الصورة mouseover.لقد رأيت هذا يتم تنفيذه باستخدام وظيفة Canvas في المتصفح ولكن لا أريد استخدام هذه الطريقة حيث سيستغرق الأمر بعض الوقت قبل تنفيذ Canvas على جميع المتصفحات.

وقد فعل أي شخص مثل هذا الشيء؟

Answer 1

إذا كنت لا تستخدم قماش ولا أميل إلى استخدام متصفح محددة الملامح، وأنت تسير في حاجة إلى توليد الصور الرمادية الخاصة بك على الخادم. إما مسبقا أو بناء على الطلب. كيفية القيام أجاب ذلك كان href="https://stackoverflow.com/search؟q=grayscale">

Answer 2

وعلى افتراض، كما علق reko_t، لا يمكنك فقط إنشاء إصدارات مقياس الرمادية من الصور على الخادم لسبب ما، فمن الممكن في IE باستخدام الملكية السمة filter CSS، <وأ href = "HTTP: // MSDN .microsoft.com / EN-US / مكتبة / ms532889٪ 28VS.85٪ 29.aspx "يختلط =" نوفولو noreferrer "> 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);
}

في فايرفوكس، هل يمكن أن تطبيق قناع SVG أو هل يمكن أن حاول استخدام قماش العنصر.

ولكن، قد يكون أبسط الحلول إما يدويا إنشاء إصدارات مقياس الرمادية من الصور الخاصة بك، أو القيام بذلك من جانب الخادم مع شيء من هذا القبيل <لأ href = "http://www.libgd.org/Main_Page" يختلط = "نوفولو noreferrer "> GD .

Answer 3

وجدت على الشبكة:

يقدم HTML 5 كائن قماش يمكن استخدامه لرسم ومعالجة الصور

النص:

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> 

تم تمرير الاختبارات باستخدام:

• فايرفوكس 3.5.4
• كروم 3.0
• سفاري 4.0

فشل الاختبارات باستخدام:

• انترنت اكسبلورر 6
• إنترنت إكسبلورر 7

موارد:http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html