짤방 생성기 만들기

토이 프로젝트 2022. 3. 21. 21:06

커뮤니티에서 이런 댓글을 봤다.

저 만화의 짤방은 여러 커뮤니티에서 자주 사용하는 짤이고,

인벤 커뮤니티는 고유의 특징으로 커뮤니티를 많이하면 레벨이 오르고

레벨에 따라 일명 '딱지색"이 변한다.

윗 사진은 해당 짤방을 따라한 세 유저의 레벨을 각 짤에 대입시켜놓은것.

이 짤을 보고, 저러한 짤을 레벨만 입력하면 빠르게 만들어주는 사이트가 있다면 어떠할까!

생각을 하게 되었고

최근 일주일 내내 포켓몬 시뮬 프로젝트만하다가 번아웃(?)이 온 나에게 다시 개발의지를 샘솟게해주었다.

일단 무슨 언어로 만들까. 그게 첫 고민이였다.

아무래도 저런 짤 하나 만들자고

따로 프로그램이나 앱을 까는건 다들 기피할것같고,

이왕이면 사이트로 만들고싶었다.

인터넷을 살짝 뒤져본 결과

github.io만 있으면 html 파일만 있어도 사이트를 만들 수 있다하니,

언어는 자연스럽게 html과 자바 스크립트로 결정됐다.

그리고 또 구글링을 해본 결과

https://jsfiddle.net/eu81273/g60v7wp8/

두 이미지 합성 - JSFiddle - Code Playground

jsfiddle.net

두 이미지를 업로드하여 합쳐주는 js코드를 찾았다.

물론 나는 사용할 이미지는 정해져있으므로,

두 이미지를 합쳐주는 부분을 참고하였다.

<body>
	<br><br>  
	<ul>
		<li><input id='firstid' onkeyup='firstv()'/></li>
		<br>
	    <li><input id='secondid' onkeyup='secondv()'/></li>
	    <br>
	    <li><input id='thirdid' onkeyup='thirdv()'/></li>
    </ul>
	<br><br>

	<a id="download" download="thumbnail.jpg" target="_blank">
		<img id="preview" src="" width="585" height="351" alt="로컬에 있는 이미지가 보여지는 영역">
	</a>

html 파트

3개의 input 칸을 만들어 ul로 묶었고

해당 칸에선 사진에 붙일 딱지 레벨을 입력받는다.

그러면 밑에 사진에 해당 레벨에 맞는 딱지가 생성되어 붙여진다.

이러한 이미지는 <a> 링크로 감싸 다운로드 가능하게 했다.

이제 스크립트를 보자면

    var canvas = document.createElement('canvas');
            canvas.width = 585; //가로 100px
            canvas.height = 351; //세로 100px
    var context = canvas.getContext("2d");
    context.globalCompositeOperation = "source-over";
    var baseImage = new Image(); //drawImage 메서드에 넣기 위해 이미지 객체화
    baseImage.onload = function () {
    	context.drawImage(this, 0, 0, 585, 351);
    	var dataURI = canvas.toDataURL("image/jpeg");
        document.querySelector('#preview').src = dataURI;
        document.querySelector('#download').href = dataURI;
    };

캔버스를 생성하고

기본 이미지(위 짤방)을 캔버스에 넣는다.

var first = new Image(); //drawImage 메서드에 넣기 위해 이미지 객체화
    first.onload = function () {
    	context.drawImage(this, 150, 80, 60, 40);
    	var dataURI = canvas.toDataURL("image/jpeg");
        document.querySelector('#preview').src = dataURI;
        document.querySelector('#download').href = dataURI;
    };

    var second = new Image();
    second.onload = function () {
    	context.drawImage(this, 450, 165, 60, 40);
    	var dataURI = canvas.toDataURL("image/jpeg");
        document.querySelector('#preview').src = dataURI;
        document.querySelector('#download').href = dataURI;
    };

    var third = new Image();
    third.onload = function () {
    	context.drawImage(this, 360, 285, 40, 30);
    	var dataURI = canvas.toDataURL("image/jpeg");
        document.querySelector('#preview').src = dataURI;
        document.querySelector('#download').href = dataURI;
    };

이제 위 input에 값이 입력되고, 변경될때마다

사진을 넣는 first second third 함수를 넣는다.

사진을 넣는 위치는 고정되어있고,

사진의 종류, 즉 src는 밑에서 지정한다.

function firstv()  {
  var fg = document.getElementById('firstid').value;
  fg = parseInt(fg);
  for(var i=0 ; i<101 ; i++){
  	if (fg==i){
  		first.src = p[i];
  	}
  }
}
function secondv()  {
  var fg = document.getElementById('secondid').value;
  fg = parseInt(fg);
  for(var i=0 ; i<101 ; i++){
  	if (fg==i){
  		second.src = p[i];
  	}
  }
}
function thirdv()  {
  var fg = document.getElementById('thirdid').value;
  fg = parseInt(fg);
  for(var i=0 ; i<101 ; i++){
  	if (fg==i){
  		third.src = p[i];
  	}
  }
}

인벤 레벨은 0렙부터 100렙까지 있고

이를 p[] 배열에 순서대로 전~부 저장한다

노가다지만 이는 어쩔수없다. 견뎌내자.

이제 input에 입력된 레벨에 따른 레벨 딱지를 기본 이미지에 붙여넣는다.

이미지는 base64 방식을 활용했다.

https://namu.wiki/w/BASE64

base64에 관한 설명

쉽게 말해 이미지를 문자열로 나타내주는 방식이다.

https://www.base64-image.de/

Base64 Image Encoder

show code opens a modal with image preview, usage examples, image width & height, ... copy image copies this base64 code to your clipboard: data:image/jpeg;base64,/9j/4AA... copy css copies this base64 code to your clipboard: url('data:image/jpeg;base64,/9

www.base64-image.de

이미지를 base64 코드로 바꿔주는 사이트.

덕분에 간단한 html 사이트에 필요한 이미지는

전부 해당 방식으로 간편하게 추가할 수 있게 되었다.

https://gillyongs.github.io/github.io/jjalbang/

인벤 전용 짤방 생성기

gillyongs.github.io

github.io로 생성한 사이트 링크.

레벨을 넣으면 숫자에 맞는 딱지가 아래 생성된다.

그리고 사진을 클릭하면 다운된다.

https://www.inven.co.kr/board/maple/2299/8784085?my=post

메이플스토리 인벤 : 메붕이 사이트(?) 만든거 구경하고가셈 - 메이플스토리 인벤 자유게시판

10추 둘러보다 해당 댓글을 보고 오랜만에 개발 의지(?)가 타올라숫자 3개 입력하면각 레벨에 맞는 딱지를 부착하여 이미지를 생성해주는 사이트를 간단하게 만들어봤음https://gillyongs.github.io/gith

www.inven.co.kr

커뮤에서도 나름 괜찮은 반응.

개발의지를 다시 복돋아준 은인(?)도 나타났다.

그리고 100렙 딱지 추가 요청이 있어서 업데이트 했당.

'토이 프로젝트' 카테고리의 다른 글

네모네모 멈뭄미 변환기 사이트 만들기 (0)	2022.03.23
포켓몬 빵 시뮬레이터 만들기 (0)	2022.03.23
듀자이크 생성기 만들기 (0)	2022.03.21
러브라떼 변환기 업데이트 (1)	2022.03.21
러브라떼 변환기 개발일지 (4)	2022.03.19

ABOUT ME

길용의 개발 발자취 길용의 개발 발자취

'토이 프로젝트' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'토이 프로젝트' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바