Deff,
Спасибо, но уже бессмысленно
нашел объяснение на сайте jQuery
переделал.
Пока без кроссдоменных картинок. Просто навел порядок во всем, на что указали. Вот код.
(function( $ ){
$.fn.grayScale = function() {
$(this).each(function() {
this.onload = function() makeCopy(this);
});
function makeCopy(img) {
var canvas2DSupported = !!window.CanvasRenderingContext2D;
if (canvas2DSupported) {
var newImg = makeCanvasCopy(img);
} else {
var newImg = makeIMGCopy(img);
}
var offset = $(img).offset();
$(img).parent().append(newImg);
$(newImg).offset(offset);
$(newImg).hover(hoverIn, hoverOut);
}
function makeIMGCopy(imgObj) {
var newImg = document.createElement('img');
newImg.src = imgObj.src
$(newImg).addClass('grayScaleGray');
newImg.style.filter ='progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';
return newImg;
}
function makeCanvasCopy(imgObj) {
var newImg = document.createElement('img');
var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
var imgW = imgObj.width;
var imgH = imgObj.height;
canvas.width = imgW;
canvas.height = imgH;
canvasContext.drawImage(imgObj, 0, 0);
var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
newImg.src = canvas.toDataURL();
$(newImg).addClass('grayScaleGray');
return newImg;
}
function hoverIn(obj) {
$(this).stop().animate({
opacity: 0
},
{duration: 500, step: function(now, fx) {
// Every step of the opacity animation we'll get the current
// opacity as the 'now' argument.
var opacity = Math.round(now * 100);
$(fx.elem).css('-ms-filter', 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity + ')');
$(fx.elem).css('ms-filter', 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity + ')');
}
});
}
function hoverOut() {
$(this).stop().animate({
opacity: 1
},
{duration: 500, step: function(now, fx) {
var opacity = Math.round(now * 100);
$(fx.elem).css('-ms-filter', 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity + ')');
$(fx.elem).css('ms-filter', 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity + ')');
}
});
}
};
})( jQuery );
Вот вызов.
<script type="text/javascript">
$(document).ready(function() {
$('div > img').grayScale();
});
</script>
Теперь работает как плагин 8)
Но снова появился баг в хроме.
Он ругается, что не может определить высоту для создаваемого canvasa, т.к. функция выполняется ДО полной загрузки картинки.
Как я понимаю, я где-то неправильно вызываю функцию. Как раз эти самые анонимные функции где-то и должны использоваться? Но смаху решения найти не смог. Объясните, пожалуйста, как правильно вызывать функции из событий (в моем случае image.onload), или же функцию из функции таким образом, что бы они исполнялись только в нужный момент, а не в момент загрузки?
