7 заметок с тегом

crossbrowser РСС

15 ноября 2009, 22:52

Javascript GrayScale Image (Crossbrowser)

Как сделать из рисунка, с помощью javascript черно-белую картинку? Не простая казалось бы задача, но решается не сложно. Для ИЕ есть могучий css-фильтр, но для картинок нет селектора :hover (псевдо-класса), потому имитировать его мы будем через javascript, а для остальных браузеров будет canvas.
// Функция для "остальных" браузеров
// Которая и делает преобразование
function grayscale(image, bPlaceImage){
	// Создаём объект типа canvas.2d
  var myCanvas=document.createElement("canvas");
  var myCanvasContext=myCanvas.getContext("2d");
  // Делаем его размером с нашу картинку
  var imgWidth=image.width;
  var imgHeight=image.height;
  myCanvas.width= imgWidth;
  myCanvas.height=imgHeight;
  // Пихаем картинку в наш объект
  myCanvasContext.drawImage(image,0,0);
	// Заганяем попиксельно картинку в матрицу
  var imageData=myCanvasContext.getImageData(0,0, imgWidth, imgHeight);
  // Теперь в цикле, каждый пиксель мы делаем ч/б
  for (i=0; i<imageData.height; i++){
    for (j=0; j<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)*0.3333; 	  
		  // Оставляем прозрачность и делим на среднее от RGB
			imageData.data[index]=average;
			imageData.data[index+1]=average;
			imageData.data[index+2]=average;
			imageData.data[index+3]=alpha;
		}
  }
  // Получаем чёрно-белую картинку
  myCanvasContext.putImageData(imageData,0,0,0,0, 
  	imageData.width, imageData.height);
	// Вставляем чёрнобелую картинку
	// От параметра зависит куда вставляем
	// Либо рядом в div-ку, либо отдаём через return
  if (bPlaceImage){  
	  var myDiv=document.createElement("div");  
	  myDiv.appendChild(myCanvas);
	  image.parentNode.appendChild(myCanvas);//, image);
  }
  return myCanvas.toDataURL();

}

// Функция, что делает картинку ч/б и при наведении мыши возвращает 
// нормальное состояние
function MakeGSImage(image){
	// если испортил (только у него есть фильтр) 
	if (typeof image.style.filter != "undefined") {
		// объект должен иметь лаяут
		image.style.zoom = 1;
		// делаем ч/б используя фильтр grayscale=1
		image.style.filter = 
			"progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);";
		// вешаем тригеры мыши
		image.onmouseover=function(){
			this.style.filter = 
				"progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)";}
		image.onmouseout=function(){
			this.style.filter = 
				"progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";}
	} else {
		// для функции grayscale практически идентично %)
		image.mouseOverImage=image.src;
		image.onload=function(){return true;};
		image.normalImage=grayscale(image, false);
		image.onmouseover=function(){this.src=this.mouseOverImage;}
		image.onmouseout=function(){this.src=this.normalImage;}
		image.src=image.normalImage;	
	}
}


canvas   crossbrowser

21 октября 2009, 5:57

Магия, отменяем загрузку CSS в браузере с включённым JS

Еге-гей! Вот так громкий заголовок ;) Вы спросите для чего? А для того, что бы параллельно загружать несколько стилей, для ускорения так сказать, а можно и дизайн другой для людей с ДЖ-сом замутить ;)) хохо... Код выглядит так:
<script type="text/javascript">
document.write("\x3c!--");
</script>
<link type="text/css" href="resource.css" rel="stylesheet"/>
<!--[if IE]><![endif]-->
И шо, и как? Всё довольно просто ;))
  1. JS пишет перед стилем комент
  2. На кондишинал.комментс эта штука закроется
  3. Получается стили закомментированы, браузер их не грузит (туда можно много их запихать ;)
  4. И что теперь? А теперь можно вот-так, например, загрузить любой другой стиль %)
  5. Работает везде!


javascript   css   crossbrowser   magik

19 сентября 2009, 11:15

Javascript: minijQuery 0.0.0.1 alpha :D

crossbrowser   minijQuery

25 августа 2009, 11:10

Избранное

crossbrowser   css

13 августа 2009, 11:06

Избранное

crossbrowser   css

18 июля 2009, 20:32

crossbrowser click event (DOM)

var clickEvent:Object = doc.createEvent("MouseEvents");
clickEvent.initMouseEvent("click");
HTMLElement.dispatchEvent(clickEvent);
С помощью dispatchEvent мы напрямую бросаем ивент(событие) в модель ивентов. Использовать можно, так же и для других событий ;)
DOM   crossbrowser   javascript

16 июня 2009, 12:28

CSS: Выравниваем плавающие колонки (CrossBrowser)

И так, в чём суть да дело :)

Если браузер нормальный, то мы используем display: table-*, то есть создаём див с display: table-row, а в нём дивы, которые должны быть одинаковой высоты с display: table-cell. Вуаля, остался ИЕ :(

Второй метод, кроссбарузерный:
<style type="text/css">
/* Два дублирующих контейнера col-wrap*
нам нужны, что бы сделать бордеры у колонок
одной высоты, или фон внизу каждого */
.col-wrap1 {
	width:25%;
	background:blue;
}
/* второй контейнер смещён на нужное растояние
влево, с помощью маргин-райт попячен под ИЕ %) */
.col-wrap2 {
	width:200%;
	position:relative;
	left: 100%;
	background:red;
	/* чтобы ИЕ6 не раздвигал контейнер */
	margin-right:-100%; 
}
/* левую колонку с текстом смещаем на длину 
врап2 контейнера */
.col1 {
	float:left;
	width:50%;
	margin-right:-100%;
	position:relative;
	left:-50%;
}
/* что бы ничего снизу не налезло, очищаем */
.clear {
	clear:both;
	font-size:0;
	
	/* тройной презерватив для ИЕ */
	overflow:hidden; 
}
</style>
<div class="col-wrap1">
    <div class="col-wrap2">
        <div class="col1">left column</div>
        <!-- Кол2 занимает всё оставшиеся пространство -->
        <div class="col2">center column</div>
        <div class="clear"></div>
    </div>
</div>



Этот замечательный, и очень простой метод я подглядел вот сдесь, спасибо Сергею.
crossbrowser   css