Javascript 웹 페이지 워 터 마크(비 이미지 워 터 마크)구현 코드

1 개술 1.1 정 의 는 일부 B/S 구조의 응용 시스템 에서 많은 페이지 가 워 터 마크 가 필요 하 다.흔히 볼 수 있 는 것 은 공문 시스템,계약 시스템 등 이다.사람들 이 흔히 주목 하 는 것 은 사이트 사진 에 워 터 마크 를 추가 하 는 것 이지 페이지 워 터 마크 에 관심 을 가지 지 않 는 다 는 것 이다.구 글 을 한 바퀴 돌 았 을 때 페이지 워 터 마크 에 관 한 글 의 수량 은 거의 0 이 었 다.본 고 는 다음 과 같은 상황 을 토론 한다.워 터 마크 를 추가 하 는 방법 은 자바 script 으로 완성 해 야 하고 기 존의 페이지 에 편리 하 게 가입 할 수 있 도록 요구 하 며 기 존의 기능 에 영향 을 주지 않도록 해 야 한다.1.2 예상 목 표 는 이미지 워 터 마크 실현 방안 에 있어 우 리 는 적어도 다음 과 같은 몇 가지 목 표를 포함 할 것 으로 예상 된다.1.부유,반투명 한 이미지 워 터 마크 실현 2.워 터 마크 를 포함 하 는 페이지,모든 요 소 는 읽 기 전용(쓸 수 없 음)3.프레임 페이지 를 포함 하 는 페이지 에서 임의의 키 페이지 나 부모 페이지 의 워 터 마크 생 성 을 제어 할 수 있다.페이지 확대,축소(resize 과정)후에페이지 가 새로 고침 되 지 않도록 하 는 전제 에서 페이지 크기 에 맞 는 새로운 워 터 마크 를 다시 생 성하 여 모든 내용 이 워 터 마크 로 덮 여 있 고 워 터 마크 이미지 범위 가 너무 커서 스크롤 바 가 생기 지 않도록 해 야 합 니 다.5.IE6\7\8 브 라 우 저 를 지원 합 니 다.다른 브 라 우 저 는 잠시 고려 하지 않 습 니 다.1.3 효과 그림 암호 화 전: 
암호 화 후:
첨부 파일 에 있 는 파일 을 열 어 볼 수 있 습 니 다.2 단계 2.1 기본 구상 암호 화 과정 은 자 바스 크 립 트 함수 실행 과정 이기 때문에 우 리 는 먼저 자 바스 크 립 트 로 DOM 대상 을 조작 하 는 방식 을 고려 해 야 한다.기 존 HTML 페이지 에서 새 DOM 대상 은 Body 노드 아래 에 있 습 니 다.이 대상 의 길이,폭 은 모두 계산 을 거 쳐 모든 페이지 의 내용 을 덮어 쓰 는 동시에 스크롤 바 가 생기 지 않도록 합 니 다.이 대상 을 기 존 페이지 에 덮어 쓰 고 배경 그림 을 설정 하 며 투명 하 게 설정 합 니 다.새 DOM 요소 만 들 기:document 대상 의 createElement 방법 을 사용 합 니 다.요 소 를 만 든 후에 z-index 를 큰 정수 로 설정 하여 기 존 웹 페이지 의 최대 z-index 보다 커 야'덮어 쓰기'를 완성 할 수 있 습 니 다.새 대상 크기 계산:세 개의 DOM 대상 값:client Width,scrollHeight 와 client Height 를 이용 합 니 다.웹 페이지 에 서 는 가로 스크롤 바 가 나타 나 지 않 기 때문에 scrollWidth 를 사용 하지 않 고 세로 스크롤 바 를 사용 하 는 것 이 흔 합 니 다.페이지 내용 을 모두 덮어 쓰기 위해 스크롤 바 가 나타 나 지 않 았 을 때 clientHeight 를 사용 하고 스크롤 바 가 나타 나 면 scrollHeight 를 사용 합 니 다.투명 설정:알파 값 을 이용 합 니 다.알 파 는 IE 가 지원 하 는 css filter 입 니 다.2.2 변형 디 테 일 은 작은 디 테 일이 재 미 있 고 앞에서 도 언급 했 듯 이 resize 의 과정 이다.한 페이지 가 열 렸 을 때 550 px 라 고 생각해 보 세 요.×400 px,자 연 스 럽 게 550 px 생 성×400 px 크기 의 워 터 마크.그러나 사용자 가 이 를 최대 화 할 때 페이지 가 새로 고침 되 지 않 고 워 터 마크 를 만 드 는 함 수 를 다시 실행 하지 않 으 면 예전 에 생산 된 워 터 마크 사진 이 너무 작 습 니 다.아래 그림 과 같은 상황.오른쪽,아래쪽 에 워 터 마크 가 없 으 니 주의 하 세 요.  이러한 상황 에 대응 하기 위해 서 는 body 의 onresize()함수 에 대한 처리 가 필요 합 니 다.이전 정의 에 onresize()함수 가 없 으 면 onresize()를 직접 추가 합 니 다.이전에 onresize()함수 가 있 었 다 면 수정 합 니 다.2.3 최종 코드 는 프레임 페이지 가 고려 해 야 할 상황 을 고려 하여 이 방법 은 세 가지 매개 변 수 를 포함한다.목표 페이지 대상,목표 페이지 문자열,배경 그림 이다.

 
function GetWaterMarked(targetObj,jpgUrl,targetStr ) { 
var windowobj=targetObj; 
var waterMarkPicUrl=jpgUrl; 
var controlWindowStr=targetStr; 
if(windowobj.document.getElementById("waterMark") != null) 
return; 
var m = "waterMark"; 
var newMark = windowobj.document.createElement("div"); 
newMark.id = m; 
newMark.style.position = "absolute"; 
newMark.style.zIndex = "9527"; 
newMark.style.top = "0px"; 
newMark.style.left = "0px"; 
newMark.style.width = windowobj.document.body.clientWidth; 
if( parseInt(windowobj.document.body.scrollHeight) > parseInt(windowobj.document.body.clientHeight) ) 
{ 
newMark.style.height = windowobj.document.body.scrollHeight; 
}else 
{ 
newMark.style.height = windowobj.document.body.clientHeight; 
} 
newMark.style.backgroundImage = "url("+ waterMarkPicUrl +")"; 
newMark.style.filter = "alpha(opacity=50)"; 
windowobj.document.body.appendChild(newMark); 
var markStr = "var sobj ="+controlWindowStr+".document.getElementById('waterMark');sobj.style.width ="+controlWindowStr+".document.body.clientWidth;sobj.style.height ="+controlWindowStr+".document.body.clientHeight;"; 
if(windowobj.document.body.onresize != null) 
{ 
var oldResiae = windowobj.document.body.onresize.toString(); 
var oldResiaeStr = oldResiae.substr(oldResiae.indexOf("{")+1); 
var oldResiaeStr= oldResiaeStr.substr(0,oldResiaeStr.lastIndexOf("}")); 
oldResiaeStr+=";"+markStr; 
windowobj.document.body.onresize = new Function(oldResiaeStr); 
} 
else 
{ 
windowobj.document.body.onresize = new Function(markStr); 
} 
} 

3 기 존 페이지 처 리 는 기 존의태그 에 onload 방법 을 추가 해 야 합 니 다.예 를 들 어4 첨부 프 리 젠 테 이 션 주소 http://demo.jb51.net/js/js_wartermark/baidu_mark.htm 첨부 파일 다운로드 http://xiazai.jb51.net/201003/yuanma/js_wartermark.rar