짤방 생성기 만들기

토이 프로젝트

짤방 생성기 만들기

길용쓰 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로 생성한 사이트 링크.