/**
* 图片调色
*/
function Toner()
{
/**
* 更改图片色彩
* @ img image对象
* @ old_color 旧颜色(16进制)
* @ new_color 新颜色(16进制)
*/
this.setImageColor = function(image,old_color,new_color)
{
image.src = getNewImgColor(image,old_color,new_color);
}
/**
* 更改背景图片颜色
* @ dom 节点对象
* @ old_color 旧颜色(16进制)
* @ new_color 新颜色(16进制)
*/
this.setBgImageColor = function(dom,old_color,new_color)
{
var url = window.getComputedStyle(dom).backgroundImage;
if(url.indexOf('url("') == 0)
{
url = url.replace('url("','').replace('")','');
}
else
{
url = url.replace('url(','').replace(')','');
}
var image = new Image();
var data = null;
image.src = url;
image.onload = function(e)
{
dom.style.backgroundImage = 'url('+getNewImgColor(image,old_color,new_color)+')';
}
}
/**
* 获取新的图片数据
* @ image 图片对象
* @ old_color 旧颜色
* @ new_color 新颜色
*/
function getNewImgColor(image,old_color,new_color)
{
old_color = toRGB(old_color);
new_color = toRGB(new_color);
//画布
var canvas = document.createElement("canvas");
var context = canvas.getContext('2d');
//绘制图片
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image,0,0);
//获取像素
var imgData = context.getImageData(0,0,canvas.width,canvas.height)
for(var i=0;i<imgData.data.length;i+=4)
{
if(imgData.data[i+0] > (old_color[0]-5) && imgData.data[i+0] < (old_color[0]+5))
{
imgData.data[i+0] = new_color[0]
}
if(imgData.data[i+1] > (old_color[1]-5) && imgData.data[i+1] < (old_color[1]+5))
{
imgData.data[i+1] = new_color[1];
}
if(imgData.data[i+2] > (old_color[2]-5) && imgData.data[i+2] < (old_color[2]+5))
{
imgData.data[i+2] = new_color[2];
}
/*
imgData.data[i+0]=255; //红
imgData.data[i+1]=0; //绿
imgData.data[i+2]=0; //蓝
imgData.data[i+3]=0; //透明度
*/
}
context.putImageData(imgData,0,0);
return canvas.toDataURL("image/png");
}
/**
* 16进制转RGB颜色
* @ hex #E9E9E9
*/
function toRGB(hex)
{
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
var sColor = hex.toLowerCase();
if(sColor && reg.test(sColor))
{
if(sColor.length === 4)
{
var sColorNew = "#";
for(var i=1; i<4; i+=1)
{
sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));
}
sColor = sColorNew;
}
//处理六位的颜色值
var sColorChange = [];
for(var i=1; i<7; i+=2)
{
sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));
}
return sColorChange;
}
else
{
return sColor;
}
}
/**
* RGB转换为16进制
* @ r 红
* @ g 绿
* @ b 蓝
*/
function toHex(r,g,b)
{
return '#'+((r << 16) | (g << 8) | b).toString(16);
}
}
调色(图片/背景图)
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 第一种方法 在HTML节点中直接onerror事件设置,使用于单个img 第二种方法 使用javascript里的...
- 为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据backg...