Учебный вариант заработал во всех нужных браузерах IE 7+ (6го нет что бы проверить, но и там должно работать), FF, Opera, Chrome, Safari. Посмотреть можно здесь, а скачать здесь (не нашел как файл к сообщению прикрепить).
Господа спецы, прошу, по-возможности, глянуть как оно работает. Если есть какие-то кривости в коде, опасные места - подскажите, пожалуйста. Если можно - с общими советами как это исправить (работать вместо меня не прошу, но полезные советы - это хорошо). Я бы хотел выложить данный плагин для свободного использования, но для этого его нужно довести до совершенства. А в JS я весьма слаб... потому рассчитываю на вашу помощь :) |
Давай сюды код тогда.
|
Вызов плагина, параметром передается селектор, для которого нужно применить grayScale.
$(document).ready(function() { makeGray('body div img'); }); Подключаемый файл, где собственно описана вся логика работы. var grayTryCount = 0; var timerID = false; function makeGray(selector) { if (grayTryCount <= 3) { grayTryCount +=1; $(selector).each(function(){ if ((this.complete) && (!$(this).hasClass('makeGrayDone')) && (!$(this).hasClass('gray'))){ makeCopy(this); } else { if (!timerID) { timerID = setTimeout(function() {makeGray('body div img')}, 1000); } } }); } } 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); $(img).addClass('makeGrayDone'); $(newImg).offset(offset); $(newImg).hover(hoverIn, hoverOut); } function makeIMGCopy(imgObj) { var newImg = document.createElement('img'); newImg.src = $(imgObj).attr('src'); $(newImg).attr('class', 'gray'); 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).attr('class', 'gray'); return newImg; } function createCanvas(imgObj) { 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); imgObj.src = canvas.toDataURL(); //return canvas.toDataURL(); } function hoverIn(obj) { $(this).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 + ')'); } }); } function hoverOut() { $(this).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 + ')'); } }); } |
master_alf,
А картинка пока только с того же домена ? |
Да, только с этого же домена.
Я, если честно, слабо представляю зачем нужно грузить картинки с других доменов и обрабатывать их подобным образом... но может это дело в слабой фантазии? :D В принципе, если в готовом плагине лучше, что бы оно было - погуглю как делается. Встречал рецепты. |
master_alf,
На большинстве халявных сайтах и форумов, нет загрузки изо на текущий домен Пример Укоз, mybb.ru |
Цитата:
На хабре видал статейку, как реализуемо для свежих версий браузеров => http://habrahabr.ru/post/120917/ |
Цитата:
2) Раз jQuery, то и оформи как плагин к jQuery. Чтобы вызов был через $('div img').makeGray() Цитата:
Цитата:
Передать в анонимную функцию - обертку ссылку на jQuery, а внутри уже использовать знак доллара. Смотри как это сделано в других плагинах. Вообще, раз ты делаешь плагин, хоть бы не поленился и изучил как их делают другие. Цитата:
Цитата:
Цитата:
Цитата:
Где используется функция createCanvas ? Цитата:
Перед .animate() нужно делать .stop() чтоб не образовывалось очереди. |
В WebKit и вроде 10м ишаке (не уверен) есть поддержка css mask, нужно проверять поддержку и по возможности использовать. Это в тыщу раз быстрее чем работа с пикселями.
$(newImg).attr('class', 'gray') Слишком общий css-класс. Он может быть определен у юзера. Вообще, зачем тут css-классы назначать? |
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
|
Часовой пояс GMT +3, время: 18:49. |