30.05.2013, 15:20
|
|
Интересующийся
|
|
Регистрация: 09.07.2012
Сообщений: 16
|
|
|
Canvas картинка с обесцвечиванием.
Вот код. Суть - нужно сделать чтобы при наведении на картинку из коричневого цвета, картинка становилась цветной.
Как не старался либо становится "черно-белой", либо вида - "Негатив". А нужно серый.
Вот Исходный рабочий черно-белый код:
<script type="text/javascript">
// $(".item img").css({"display":"none");
// On window load. This waits until images have loaded which is essential
$(window).load(function(){
// Fade in images so there isn't a color "pop" document load and then on window load
$(".item").animate({opacity:1},500);
// clone image
$('.item img').each(function(){
var el = $(this);
el.css({"position":"relative"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
var el = $(this);
el.parent().css({"width":this.width,"height":this.height});
el.dequeue();
});
this.src = grayscale(this.src);
});
// Fade image
$('.item').mouseover(function(){
$(this).parent().find('img:first').stop().animate({opacity:1}, 400);
})
$('.img_grayscale').mouseout(function(){
$(this).stop().animate({opacity:0}, 400);
});
});
// Grayscale w canvas method
function grayscale(src){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var imgObj = new Image();
imgObj.src = src;
canvas.width = imgObj.width;
canvas.height = imgObj.height;
ctx.drawImage(imgObj, 0, 0);
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
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;
}
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}
</script>
Я менял до такого состояния ("Эффект негатива")
<script type="text/javascript">
// $(".item img").css({"display":"none");
// On window load. This waits until images have loaded which is essential
$(window).load(function(){
// Fade in images so there isn't a color "pop" document load and then on window load
$(".item").animate({opacity:1},500);
// clone image
$('.item img').each(function(){
var el = $(this);
el.css({"position":"relative"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
var el = $(this);
el.parent().css({"width":this.width,"height":this.height});
el.dequeue();
});
this.src = grayscale(this.src);
});
// Fade image
$('.item').mouseover(function(){
$(this).parent().find('img:first').stop().animate({opacity:1}, 400);
})
$('.img_grayscale').mouseout(function(){
$(this).stop().animate({opacity:0}, 400);
});
});
// Grayscale w canvas method
function grayscale(src){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var imgObj = new Image();
imgObj.src = src;
canvas.width = imgObj.width;
canvas.height = imgObj.height;
ctx.drawImage(imgObj, 0, 0);
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
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 avgd = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2] + imgPixels.data[i + 3]) / 4;
imgPixels.data[i] = 255 - imgPixels.data[i];
imgPixels.data[i+1] = 255 - imgPixels.data[i+1];
imgPixels.data[i+2] = 255 - imgPixels.data[i+2];
imgPixels.data[i+3] = 255;
}
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}
</script>
Как сделать его серым? Знаю что надо ковыряться в RGB, но получается нужный цвет с эффектом негатива.
Помогите плиз!!!! 
|
|
30.05.2013, 15:21
|
|
х.з
|
|
Регистрация: 21.11.2010
Сообщений: 4,588
|
|
|
Сообщение от cheba
|
Вот код. Суть - нужно сделать чтобы при наведении на картинку из коричневого цвета, картинка становилась цветной.
Как не старался либо становится "черно-белой", либо вида - "Негатив". А нужно серый.
|
И как это понимать ? нужна чтоб была цветной, но при этом в оттенках серого? -сбой шаблона...
Если из цветной серую -алгоритмов море и реализаций в гугле есть
Последний раз редактировалось dmitriymar, 30.05.2013 в 15:39.
|
|
30.05.2013, 16:02
|
|
Интересующийся
|
|
Регистрация: 09.07.2012
Сообщений: 16
|
|
Сообщение от dmitriymar
|
И как это понимать ? нужна чтоб была цветной, но при этом в оттенках серого? -сбой шаблона...
Если из цветной серую -алгоритмов море и реализаций в гугле есть
|
Спасибо капитан про гугл, можно намекнуть еще про поисковики!
На данный момент есть 2 варианта которые я указал. Черно-белый (1 вариант) и Обратный "Негатив" (2 вариант)
Когда я указываю по RGB -
imgPixels.data[i] = 128 - imgPixels.data[i];
imgPixels.data[i+1] = 108 - imgPixels.data[i+1];
imgPixels.data[i+2] = 79 - imgPixels.data[i+2];
imgPixels.data[i+3] = 255;
Становится "Негативом".
<script type="text/javascript">
// $(".item img").css({"display":"none");
// On window load. This waits until images have loaded which is essential
$(window).load(function(){
// Fade in images so there isn't a color "pop" document load and then on window load
$(".item").animate({opacity:1},500);
// clone image
$('.item img').each(function(){
var el = $(this);
el.css({"position":"relative"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
var el = $(this);
el.parent().css({"width":this.width,"height":this.height});
el.dequeue();
});
this.src = grayscale(this.src);
});
// Fade image
$('.item').mouseover(function(){
$(this).parent().find('img:first').stop().animate({opacity:1}, 400);
})
$('.img_grayscale').mouseout(function(){
$(this).stop().animate({opacity:0}, 400);
});
});
// Grayscale w canvas method
function grayscale(src){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var imgObj = new Image();
imgObj.src = src;
canvas.width = imgObj.width;
canvas.height = imgObj.height;
ctx.drawImage(imgObj, 0, 0);
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
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 avgd = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2] + imgPixels.data[i + 3]) / 4;
imgPixels.data[i] = 128 - imgPixels.data[i];
imgPixels.data[i+1] = 108 - imgPixels.data[i+1];
imgPixels.data[i+2] = 79 - imgPixels.data[i+2];
imgPixels.data[i+3] = 255;
}
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}
</script>
|
|
30.05.2013, 21:41
|
|
Интересующийся
|
|
Регистрация: 09.07.2012
Сообщений: 16
|
|
Я честно не понял зачем вы мой же вариант выкладываете?
Видимо вы не поняли и также очень много людей что я хочу.
Там показывается только ЧБ (Черно-белый вариант)
А я же пытаюсь сделать его коричневым (как сепия) пробую разными способами, перерыл кучу примеров, говорят что надо менять 4 канал, и при смене получается 2 вариант который я опять же описал.
Цвет меняется но получается инверсионный.
Как бороться я не знаю. |
|
30.05.2013, 21:50
|
 |
Аспирант
|
|
Регистрация: 05.03.2012
Сообщений: 62
|
|
|
Так и гуглите "эффект сепии алгоритм". Врят ли сразу на js найдете, но вы же программист...
|
|
30.05.2013, 23:14
|
|
Интересующийся
|
|
Регистрация: 09.07.2012
Сообщений: 16
|
|
|
Сообщение от zOdmin
|
|
Так и гуглите "эффект сепии алгоритм". Врят ли сразу на js найдете, но вы же программист...
|
Гуглил.
И эффект искал, нашел но не то...
Нуно сменить именно цвет.
Моих знаний не хватает. |
|
31.05.2013, 00:13
|
|
Интересующийся
|
|
Регистрация: 09.07.2012
Сообщений: 16
|
|
Кароче вот готовый скрипт!
То, что я искал!
// $(".item img").css({"display":"none");
// On window load. This waits until images have loaded which is essential
$(window).load(function(){
// Fade in images so there isn't a color "pop" document load and then on window load
$(".item").animate({opacity:1},500);
// clone image
$('.item img').each(function(){
var el = $(this);
el.css({"position":"relative"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
var el = $(this);
el.parent().css({"width":this.width,"height":this.height});
el.dequeue();
});
this.src = grayscale(this.src);
});
// Fade image
$('.item').mouseover(function(){
$(this).parent().find('img:first').stop().animate({opacity:1}, 400);
})
$('.img_grayscale').mouseout(function(){
$(this).stop().animate({opacity:0}, 400);
});
});
// Grayscale w canvas method
function grayscale(src){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var imgObj = new Image();
imgObj.src = src;
canvas.width = imgObj.width;
canvas.height = imgObj.height;
ctx.drawImage(imgObj, 0, 0);
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++)
{
var i = (y * 4) * imgPixels.width + x * 4;
avg=(imgPixels.data[i]*0.2126+imgPixels.data[i+1]*0.7152+imgPixels.data[i+2]*0.0722)/3;
avg=avg*2;
var r=avg; var g=avg; var b=avg;
r=r*1.28; if(r>255)r=255;
g=g*1.05; if(g>255)g=255;
b=b*0.74;
imgPixels.data[i] =r; imgPixels.data[i+1] =g; imgPixels.data[i+2] =b; imgPixels.data[i+4] =255;
}
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}
|
|
31.05.2013, 09:13
|
|
х.з
|
|
Регистрация: 21.11.2010
Сообщений: 4,588
|
|
1 научитесь выражать свои мысли
|
Сообщение от cheba
|
Вот код. Суть - нужно сделать чтобы при наведении на картинку из коричневого цвета, картинка становилась цветной.
Как не старался либо становится "черно-белой", либо вида - "Негатив". А нужно серый.
|
Где здесь хоть слово о серпии? Ясно написано что нужны оттенки серого.
2
|
Сообщение от cheba
|
|
Я честно не понял зачем вы мой же вариант выкладываете?
|
Не подменяйте понятия - не ваш, вы им всего лишь воспользовались.
3
|
Сообщение от cheba
|
|
Как не старался либо становится "черно-белой", либо вида - "Негатив". А нужно серый.
|
В чём вы старались? в поиске чужих вариантов?
4
|
Сообщение от cheba
|
|
Кароче вот готовый скрипт!
|
что вы сделали чтоб выкладывать его здесь как свой готовый? слизали его с другого ресурса? |
|
|
|
