Let the pictures on our homepage get "gray" together with the Sichuan People!

Summarized from the Internet: There are three main processing methods,Ultimate SolutionYes-Third,

First:

The entire web page becomes grayed out. You can use the following CSS to solve the problem in IE:

HTML {filter: progid: DXImageTransform. Microsoft. basicimage (grayscale = 1 );}

The following supports chrome and IE

 
HTML {overflow-Y: Scroll; filter: progid: DXImageTransform. Microsoft. basicimage (grayscale = 1);-WebKit-filter: grayscale (100% );}
 

Second: JS, But I tested that below IE8 is not compatible with the main JS file: <SCRIPT type = "text/JavaScript" src = "grayscale. js"> </SCRIPT> The call is as follows: <SCRIPT type = "text/JavaScript">
Window. onload = gray_change;

Function gray_change (){
Grayscale (document. getelementsbytagname ('html '));
}
</SCRIPT>
<Input type = "button" onclick = "gray_change ()" value = "gray web page"Third:In my opinion, the third solution is the ultimate solution. You do not need to consider the compatibility of browsers.General Global ProcessingProgramIs to centrally perform grayscale processing on a specific image resource file request. Step 1: create a new class that inherits ihttphandler and implements the processrequest () method to process the operation class of grayscale images. The processing result is as follows:

DetailsCode, As follows:

View code

 Public  Class  Changeimage: ihttphandler {  Public   Bool  Isreusable {  Get { Return   False  ;}}  ///   <Summary>          ///  1. Calculation Formula  /// How can we set a reasonable gray value? Of course, use the current RGB as the template, and multiply the RGB value by a reasonable weight.  ///  Gary (I, j) = 0.299 * R (I, j) + 0.587 * g (I, j) + 0.114 * B (I, j );  ///   </Summary>          ///   <Param name = "context"> </param>          Public   Void  Processrequest (httpcontext context ){  String Url = Httpcontext. Current. Request. physicalpath; Bitmap bitmap =New  Bitmap (URL );  //  Defines the specified range of rect for locking bitmap Rectangle rect = New Rectangle ( 0 , 0  , Bitmap. Width, bitmap. Height );  //  Lock area pixels              VaR Bitmapdata = Bitmap. lockbits (rect, imagelockmode. readwrite, bitmap. pixelformat );  // First address of the bitmap              VaR PTR = Bitmapdata. scan0;  //  Stride: Scan rows              Int Len = bitmapdata. stride * Bitmap. height;  VaR Bytes = New   Byte  [Len];  //  Copy the pixel value of the locked area to the byte array Marshal. Copy (PTR, bytes, 0 , Len );  For ( Int I = 0 ; I <bitmap. height; I ++ ){  For ( Int J = 0 ; J <bitmap. Width * 3 ; J = J + 3  ){  VaR Color = bytes [I * bitmapdata. stride + J +2 ] * 0.299 + Bytes [I * bitmapdata. stride + J + 1 ] * 0.597 + Bytes [I * bitmapdata. stride + J] * 0.114  ; Bytes [I * Bitmapdata. stride + J] = Bytes [I * bitmapdata. stride + J + 1  ] = Bytes [I * bitmapdata. stride + J + 2 ] = (Byte  ) Color ;}}  //  Copy back bitmap Marshal. Copy (bytes, 0  , PTR, Len );  //  Unlock  Bitmap. unlockbits (bitmapdata); context. response. contenttype = "  Image/JPEG  " ; Bitmap. Save (context. response. outputstream, system. Drawing. imaging. imageformat. JPEG); bitmap. Dispose (); context. response. End ();}} 

Step 2: Add a

The Code is as follows:

View code

<System. webserver> <validation validateintegratedmodeconfiguration ="False"/> <! -- Verb indicates the Request Method (Post \Get\ *) Path application directory and file type when a user requests a file specified by path in the way specified by verb, the class to which the file is transferred for processing --> "Test"Verb ="*"Path ="Grayimage/*. jpg"Type ="Createimagetogray. ashx. changeimage"/> </Handlers> </system. webserver>
 

 

The entire web page becomes grayed out. You can use the following CSS to solve the problem in IE:

HTML {filter: progid: DXImageTransform. Microsoft. basicimage (grayscale = 1 );}

The following supports chrome and IE

 
HTML {overflow-Y: Scroll; filter: progid: DXImageTransform. Microsoft. basicimage (grayscale = 1);-WebKit-filter: grayscale (100% );}