JavaScript-фильтр цвет изображения - PullRequest
Новая
       5

JavaScript-фильтр цвет изображения

3 голосов
/ 12 октября 2010

Эй, я ищу способ взять черно-белый элемент img и, используя JavaScript, задаю значение RGB, чтобы изображение стало таким цветом. Есть идеи (кроме библиотек)?

Также я пытаюсь сделать это только с IE. Причина, по которой я делаю это только в IE, в том, что я делаю небольшой гаджет на боковой панели.

Ответы [ 3 ]

3 голосов
/ 12 октября 2010

В Internet Explorer вы можете использовать Визуальные фильтры .

Изменить: вы хотите использовать Световой фильтр , вотпример 

<STYLE>
   .aFilter {
            filter:light();
        }
</STYLE>
<SCRIPT>
window.onload=fnInit;
function fnInit(){
   oDiv.filters[0].addAmbient(50,20,180,100);
}
</SCRIPT>
with filter: <img CLASS="aFilter" ID="oDiv" src="http://cache2.artprintimages.com/p/LRG/8/853/2USY000Z/black-and-white-cats.jpg">

without: <img src="http://cache2.artprintimages.com/p/LRG/8/853/2USY000Z/black-and-white-cats.jpg">
2 голосов
/ 12 октября 2010

Как то так?

Редактировать: Ах, нет холста. Не беспокойся. 

<html>
  <head>
  <script type="text/javascript">
  function createCanvas(image){

    // create a new canvas element
    var myCanvas = document.createElement("canvas");
    var myCanvasContext = myCanvas.getContext("2d");


    var imgWidth=image.width;
    var imgHeight=image.height;

    // set the width and height to the same as the image
    myCanvas.width= imgWidth;
    myCanvas.height = imgHeight;

    // draw the image
    myCanvasContext.drawImage(image,0,0);

    // get all the image data into an array
    var imageData = myCanvasContext.getImageData(0,0, imgWidth, imgHeight);


    // go through it all...
    for (j=0; j<imageData.width; j++)
    {
      for (i=0; i<imageData.height; i++)
      {
         // index: red, green, blue, alpha, red, green, blue, alpha..etc.
         var index=(i*4)*imageData.width+(j*4);
         var red=imageData.data[index];
         var alpha=imageData.data[index+3];

         // set the red to the same
         imageData.data[index]=red;

         // set the rest to black
         imageData.data[index+1]=0;
         imageData.data[index+2]=0;
         imageData.data[index+3]=alpha;
         delete c;
       }
     }

     // put the image data back into the canvas
     myCanvasContext.putImageData(imageData,0,0,0,0, imageData.width,   imageData.height);

    // append it to the body
    document.body.appendChild(myCanvas);
  }
  function loadImage(){
    var img = new Image();
    img.onload = function (){
      createCanvas(img);
    }
    img.src = "monkey.jpg";
  }
  </script>
  </head>
  <body onload="loadImage()">

  </body>
  </html>
0 голосов
/ 12 октября 2010

Единственный способ сделать это в JavaScript - это тег <canvas>. Вот отличное учебное пособие , если вам интересно узнать, как его использовать.

Редактировать: Я не эксперт по проприетарным фильтрам MS, но вот Документы Microsoft для фильтров изображений в IE.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...