사용자 이름이 포함 된 워터 마크 이미지

Question

특정 날짜 이전에 출시 될 수없는 일부 이미지를 공유하는 웹 사이트가 있습니다. 사용자는 사용자 이름과 암호로 로그인합니다. 내가 그 이미지의 공유를 방해하기 위해 로그인 한 사용자 이름으로 모든 이미지를 워터 마킹 할 수 있는지 궁금합니다. 내가 아는 한 웹 사이트는 java/CSS로 코드화되어 있습니다.

희망이 있으면 충분합니다.

편집 :

여기 ... 내가 엄청난 양의 부족한 정보를 가지고 보인다는 .NET 프레임 워크에 대한 자세한

서버 측 프로그래밍 언어 마이크로 소프트의 액티브 서버 페이지 기술입니다. ASP.NET

클라이언트 측 프로그래밍 언어 자바 스크립트는 주로 웹 페이지 내에서 사용되는 경량, 객체 지향, 크로스 플랫폼 스크립트 언어입니다. 자바 스크립트

자바 스크립트 라이브러리 jQuery를이 애니메이션과 아약스의 상호 작용, 처리 HTML 문서 이송, 이벤트를 단순화하는 자바 스크립트 라이브러리입니다. 원래 John Resig에 의해 개발되었습니다. jQuery 1.12.4 (사이트의 8 %가 최신 버전 사용)

부트 스트랩은 오픈 소스 HTML, CSS 및 JavaScript 프레임 워크입니다. 부트 스트랩

마크 업 언어 HTML5는 HTML 표준의 다섯 번째 개정판입니다.

Answer 1

CSS로 워터 마크를 추가 할 수 없습니다. 여기서는 파일을 처리하고 수정할 수있는 기능이 있으므로 서버 측에서이 작업을 수행해야합니다. 자바를 사용하고 있기 때문에 아마도이 라이브러리를 사용하면 도움이 될 것입니다.

사진을 업로드 할 때이 워터 마킹을 수행하십시오. 워터 마크를 추가하고 어딘가에 저장하십시오.

How can I watermark an image in Java?

Answer 2

기본적으로, 당신이 말한 모든 내가 웹 사이트와 문제가 있습니다. 물론 앞면은 JS로 코딩되어 있습니다. 더 많은 옵션이있는 것과 달리 CSS를 사용하여 스타일을 지정하고 구조화에 HTML을 사용하고 웹 페이지의 의미를 나타낼 수도 있습니다.

우리 모두는 그 설정 :

문제는 당신이 아마 싶어 백엔드 (서버 측)에서이 작업을 수행입니다 가정 할 수 있었다. 그리고 귀하는 귀하가 신청서의 해당 부분에서 사용하는 것을 진술하지 않았습니다.

당신이 전면에이 일을 주장하는 경우 (JS를 사용하여), 당신은 매우 간단합니다, 여기에

내가 만든 기본 바이올린입니다 HTML5 및 캔버스라는 새로운 요소 중 하나를 사용할 수 있습니다 : fiddle me diddle

 var canvas = document.getElementById('viewport'), 
    context = canvas.getContext('2d'); 

function drawIt() { 
    base_image = new Image(); 
    base_image.src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPBj_avFTxiKBETiND86_i-xQTDOMVYEXB0kaeh3uPOTfvfA3n'; 
    context.font = "30px Georgia"; 
    context.canvas.width = 500; 
    context.canvas.height = 500; 
    context.drawImage(base_image, 0, 0); 
    context.fillText("FEAR the DERP powaa", 50, 180); 
} 

drawIt(); 

! 노트 ! 교육을받은 사용자는 원본 사진을 얻을 수 있습니다 (이미지를 마우스 오른쪽 버튼으로 클릭하지 않고 이미지 저장 ..)

왜?

이미지는 어딘가에서 원래 형식으로 액세스 한 다음 캔버스에 넣어야합니다. 이 "퍼팅 인"은 사용자의 브라우저에서 발생하므로 브라우저는 텍스트가없는 원본 이미지를 가져와야하며 스마트 사용자는 괭이를 찾아서 찾아냅니다.

사용자의 브라우저로 이미지를 보내기 전에 서버에서이 작업을 수행해야하는 주된 이유가 있습니다. 그런 다음 모든 브라우저에서 변경된 이미지 (텍스트 포함)가 표시됩니다.