색상 조합(그림/배경그림)
/**
*
*/
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 (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);
}
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.