삶의 늪에 들어 가기 전/정리중(미정리)

[공개용 S/W 개발] 뉴스속보 합성 이미지 만들기

류명운

·

2016. 12. 10. 07:50

반응형

[공개용 S/W 개발] 뉴스속보 합성 이미지 만들기

 

이번 공개용 S/W 개발의 주제는 "뉴스속보 합성 이미지 만들기" 입니다. 해당 프로젝트는 간단한 웹 어플리케이션 사이트로 제작되었습니다.

개발된 사이트 설명

  1. HTML5의 Canvas Tag와 Javascript를 이용하여 합성된 뉴스속보 이미지 파일을 만들어 사용자에게 제공하여 줍니다.
  2. 전체적인 UI는 Twitter Bootstrap을 기반으로 만들어졌습니다.
  3. 사용자로부터 배경 이미지 혹은 텍스트 문구를 입력받으면 실시간으로 Javascript와 CANVAS 요소를 통해 이미지를 디스플레이 해줍니다.
  4. 사용자는 생성된 이미지를 파일로 다운로드 받을 수 있습니다.
  5. 모든 처리는 클라이언트 단에서 이루어집니다. (사용자로부터 선택된 이미지는 서버 업로드 X)
  6. * 사이트 - http://myeonguni.com/myeonguni_news/myeonguni_news.html
  7. * GitHub - https://github.com/myeonguni/BreakingNews_CreateImg

개발 환경

  • 언어 - HTML5/CSS, JAVSCRIPT
  • 프레임워크 - JQUERY, Twitter Bootstrap
  • 웹 서버 호스팅 - AWS EC2

구현 결과

소스 코드

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<!-- 링크에 표시될 이미지 -->
	<link rel="image_src" href="./img/thumbnail.jpg"/>
	<!-- META TAG 정의 -->
	<meta name="title" content="myeongkBox"/>
	<meta name="author" content="myeonguni.com"/>
	<meta name="keyword" content="myeongkBox"/>
	<meta name="description" content="HTML AUDIO 객체를 이용한 비트 제작 웹앱"/>
	<meta name="publisher" content="http://myeonguni.com"/>
	<meta name="replay-to(Email)" content="aparecium117@gmail.com"/>
	<!-- 페이지 제목 -->
	<title>명우니닷컴 :: 뉴스 속보 이미지 만들기</title>
	<!-- bootstrap css -->
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<!-- jquery js -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
	<!-- bootstrap js -->
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
	<!-- HEADER -->
	<header>
		<!-- DEFAULT NEWS TITLE -->
		<div class="text-center">
			<h2>
				<div class="text-center">
					<label class="control-label"><span class="glyphicon glyphicon-picture"></span>  뉴스속보 합성 이미지 만들기</label>
				</div>
			</h2>
			<br/>
		</div><!-- //DEFAULT NEWS TITLE -->
	</header><!-- //HEADER -->

	<!-- CONTENT -->
	<div style="position:absolute; width:702px; left:50%; margin-left:-351px;">
		<!-- DEFAULT NEWS CANVAS TAG-->
		<div class="text-center">
			<canvas id="myeonguniNewsCanvas" width="702" height="396" style="border:1px solid black">
				<!-- 브라우저가 canvas 태그를 지원하지 않을 경우 표시-->
				<div class="text-center">
					<script>document.write("접속하신 브라우저는 지원하지 않습니다. 최신 브라우저로 업데이트 해주세요");</script>
					<br><a href="http://windows.microsoft.com/ko-kr/internet-explorer/download-ie">접속하신 브라우저는 지원하지 않습니다. 최신 버전으로 업데이트 하기(클릭)</a><br><br>
				</div><!-- //브라우저가 canvas 태그를 지원하지 않을 경우 표시-->
			</canvas>
		</div><!-- //DEFAULT NEWS CANVAS TAG-->
		<br/>
		<!-- 뉴스속보 합성 생성 폼 -->
		<form action="" method="">
			<hr/>
			<!-- 뉴스속보 배경 이미지 -->
			<div class="form-group row">
				<label class="col-sm-2 col-form-label">① 배경 이미지</label>
				<div class="col-sm-10">
					<input type="file" id="fileName" name="file" onchange="createNewsImg(this);" />
				</div>
			</div><!-- //뉴스속보 배경 이미지 -->
			<!-- 뉴스속보 텍스트 -->
			<div class="form-group row">
				<label for="inputNumber" class="col-sm-2 col-form-label">② 텍스트</label>
				<div class="col-sm-10">
					<!-- 텍스트를 입력할때마다(onkyup Event) createNews() 호출 -->
					<input type="text" class="form-control" id="inputText" name="text" placeholder="합성할 뉴스특보 문구를 입력해주세요" onkeyup="createNews(this.value);" />
				</div>
			</div><!-- //뉴스속보 텍스트 -->
		</form><!-- //뉴스속보 합성 생성 폼 -->
		<hr/>
		<!-- CREATE NEWS CANVAS TAG-->
		<div class="text-center">
			<canvas id="newNewsCanvas" width="702" height="396" style="border:1px solid black">
				<!-- 브라우저가 canvas 태그를 지원하지 않을 경우 표시-->
				<div class="text-center">
					<script>document.write("접속하신 브라우저는 지원하지 않습니다. 최신 브라우저로 업데이트 해주세요");</script>
					<br><a href="http://windows.microsoft.com/ko-kr/internet-explorer/download-ie">접속하신 브라우저는 지원하지 않습니다. 최신 버전으로 업데이트 하기(클릭)</a><br><br>
				</div><!-- //브라우저가 canvas 태그를 지원하지 않을 경우 표시-->
			</canvas>
		</div><!-- //CREATE NEWS CANVAS TAG-->
		<!-- 생성한 뉴스속보 이미지 파일 저장 버튼 -->
		<div class="text-center">
			<br/>
			<a id="news_download">
				<button type="button" class="btn btn-default btn-sm">
					<span class="glyphicon glyphicon-download-alt"></span> Download
				</button>
			</a>
			<a href="https://github.com/myeonguni/BreakingNews_CreateImg" target="_blank" style="margin-left:10px;">
				<button type="button" class="btn btn-default btn-sm">
					<span class="glyphicon glyphicon-link"></span> GitHub
				</button>
			</a>
			<br/><br/>
			<p>(모바일의 경우 - ①다운로드 버튼 클릭 → ②이미지를 길게 눌름 → ③이미지 저장)</p>
			<hr/>
		</div><!-- //생성한 뉴스속보 이미지 파일 저장 버튼 -->
		<!-- 샘플 뉴스속보 이미지 -->
		<div class="row">
			<div class="col-xs-6 col-md-4 text-center" style="padding-bottom: 30px">
				<img src="img/sample/img_sample1.jpg" width="300px" class="img-thumbnail">
			</div>
			<div class="col-xs-6 col-md-4 text-center" style="padding-bottom: 30px">
				<img src="img/sample/img_sample2.jpg" width="300px" class="img-thumbnail">
			</div>
			<div class="col-xs-6 col-md-4 text-center" style="padding-bottom: 30px">
				<img src="img/sample/img_sample3.jpg" width="300px" class="img-thumbnail">
			</div>
			<div class="col-xs-6 col-md-4 text-center" style="padding-bottom: 30px">
				<img src="img/sample/img_sample4.jpg" width="300px" class="img-thumbnail">
			</div>
			<div class="col-xs-6 col-md-4 text-center" style="padding-bottom: 30px">
				<img src="img/sample/img_sample5.jpg" width="300px" class="img-thumbnail">
			</div>
			<div class="col-xs-6 col-md-4 text-center" style="padding-bottom: 30px">
				<img src="img/sample/img_sample6.jpg" width="300px" class="img-thumbnail">
			</div>
		</div><!-- //샘플 뉴스속보 이미지 -->

		<!-- FOOTER 저작권 표시 -->
        <div class="text-center" style="margin: 10px 0px;">
        	copyright ⓒ 2016 <a href="http://myeonguni.com" target="_blank">myeonguni.com</a> All Rights Reserved
        </div><!-- //FOOTER 저작권 표시 -->
	</div><!-- //CONTENT -->

	<!-- 스크립트 -->
	<script>
		/* 페이지 로드 시 초기화 작업 진행 */ 
		$(function() {
			/* 기본 뉴스 CANVAS 초기화 */
			init_defalut_canvas();

			/* 생성할 뉴스 CANVAS 초기화 */
			createNews('');

			/* 생성한 뉴스 이미지 다운로드 */
			$("#news_download").click(function() {
				this.href = document.getElementById('newNewsCanvas').toDataURL();
				this.download = 'news.png';
			});
		});

		// 기본 뉴스 CANVAS 초기화 함수
		function init_defalut_canvas(){
			// canvas 요소 가져오기
			var canvas = document.getElementById('myeonguniNewsCanvas');
			// canvas의 context 가져오기
			var context = canvas.getContext('2d');

			/* DEFALUT NEWS CANVAS */
			// 이미지(뉴스배경) 불러오기
			var img_news_background = new Image();
			// 기본 뉴스 배경 이미지 설정(크리스마스)
			img_news_background.src = "img/img_news_background_christmas.jpg";

			// 이미지(뉴스자막) 불러오기
			var img_news_text = new Image();
			// 기본 뉴스 자막 이미지 설정
			img_news_text.src = "img/img_news_text.png";

	 		// 이미지(뉴스배경) 로드되면 canvas에 방송사, 이미지(배경,자막), 자막 그리기
			img_news_background.onload = function() {
				// 이미지(뉴스배경) 그리기 - x : y : width : height
				context.drawImage(img_news_background, 1, 1, 700, 394);
				// 이미지(뉴스자막) 그리기 - x : y : width : height
				context.drawImage(img_news_text, 1, 1, 700, 394);

				// 글씨(방송사) 론트, 색상 설정 및 그리기
				context.font = '12px Calibri';
		      	context.fillStyle = 'white';
				context.fillText('MYEONGUNI.COM', 598, 22);

				// 글씨(뉴스자막) 론트, 색상 설정 및 그리기
				context.font = 'italic 25px Calibri';
		      	context.fillStyle = 'white';
				context.fillText('[속보] 명우니닷컴 뉴스 속보 합성 페이지 오픈!', 150, 355);
			}
		}

		/** 생성할 뉴스 자막 이미지 전역변수 선언 **/
		var createNews_text_img = new Image();

		/* 생성할 뉴스 자막 초기 설정 */
		createNews_text_img.src = "img/img_news_text.png";

		/** 생성할 뉴스 배경화면 이미지 전역변수 선언 **/
		var createNews_background_img = new Image();

		/* 생성할 뉴스 배경화면 초기 설정 */
		createNews_background_img.src = "img/img_news_background_homealone.jpg";

		// 생성할 뉴스 배경 이미지 셋팅 : 배경화면 파일 업로드 시 
		function createNewsImg(upload){
			var file = upload.files[0];
			reader = new FileReader();

			reader.onload = function (event) {
			    createNews_background_img.src = event.target.result;
			    createNews($("#inputText").val());
			};
			reader.readAsDataURL(file);
			return false;
		}

		// 생성할 뉴스 CANVAS 그려주기 : 텍스트 변경 혹은 배경 이미지 변경 시
		function createNews(inputText){
			// canvas 요소와 context 가져오기
			var canvas = document.getElementById('newNewsCanvas');
			var context = canvas.getContext('2d');
			// 배경 이미지 선언 및 설정
			var createNews_back_img = new Image();
			createNews_back_img.src = createNews_background_img.src;

			// 이미지(뉴스배경) 로드되면 canvas에 방송사, 이미지(배경,자막), 자막 그리기
			createNews_back_img.onload = function() {
				// 이미지(뉴스배경) 그리기 - x : y : width : height
				context.drawImage(createNews_back_img, 1, 1, 700, 394);
				// 이미지(뉴스자막) 그리기 - x : y : width : height
				context.drawImage(createNews_text_img, 1, 1, 700, 394);
				// 글씨(방송사) 론트, 색상 설정 및 그리기
				context.font = '12px Calibri';
		      	context.fillStyle = 'white';
				context.fillText('MYEONGUNI.COM', 598, 22);
				// 글씨(뉴스자막) 론트, 색상 설정 및 그리기
				context.font = 'italic 25px Calibri';
		      	context.fillStyle = 'white';
		      	// (inputText)텍스트 입력이 없을 경우
		      	if (inputText == "")
		      	{
		      		context.fillText("텍스트를 입력해주세요.", 150, 355);
		      	}
		      	// (inputText)텍스트 입력이 있을 경우
		      	else
		      	{
					context.fillText(inputText, 150, 355);
		      	}
			}
		}
	</script><!-- //스크립트 -->
</body>
</html>

업데이트 & 개선 해야할 사항

  • (16-12-10) 사용자로 부터 입력받은 파일(input file type)의 절대경로(사용자 디바이스의 로컬경로)를 받아와 해당 파일을 CANVAS에 적용시켜 주어야 함 → JAVSCRIPT File IO로 읽어오는 방법으로 해결
  • (16-12-12) 페이지 하단 저작권 표시 추가

 

 

반응형
저작자표시 비영리 동일조건

'삶의 늪에 들어 가기 전 > 정리중(미정리)' 카테고리의 다른 글

[공개용 S/W 개발] 명크박스(미완)  (0) 2016.12.13
[개발자 강좌] 스터디 절대로 하지마라, 김포프(펌)  (1) 2016.12.12
[공개용 S/W 개발] 명우니닷컴  (0) 2016.12.08
[꽃보다YOU] 네이버에서 꽃보다YOU를 검색해주세요 !  (0) 2016.12.06
[공개용 S/W 개발] Packet Flooder (DOS)  (2) 2016.11.29

삶의 늪에 들어 가기 전/정리중(미정리) 카테고리와 연관된 콘텐츠