[1주-2일차] NFT maker APP - 1스프린트-day2 코드 해석

또 개을러서 프로젝트 때려치고 술이나 먹었었는데...

 

이따가 4시에 축구하는데

 

그전에 조금이라도 해보자

 

 

https://app.monopro.org/pixel/

ドット絵こんばーた

 

일단 사이트는 대체로 3개 파일이 핵심인듯 하다

 

pixel.html

pixel_convert.py

pixel.py

 

이 세 파일인데

 

대체적인 흐름만 보자면

 

먼저 pixel.html 의 코드에서

 

 

 

<form action="./" method="post" enctype="multipart/form-data">
                <div class="form-group">
                    <label>画像(最大2MBまで)<br>透過PNGに対応しました(2017/05/23)</label>
                    <input type="file" name="image" accept='image/png,image/jpeg'>
                </div>
                <div class="form-group">
                    <div>色の数</div>
                    <label class="radio-inline"><input name="k" type="radio" value="2">2</label>
                    <label class="radio-inline"><input name="k" type="radio" value="4" checked>4</label>
                    <label class="radio-inline"><input name="k" type="radio" value="8">8</label>
                    <label class="radio-inline"><input name="k" type="radio" value="16">16</label>
                </div>
                <div class="form-group">
                    <div>ドットの大きさ</div>
                    <label class="radio-inline"><input name="scale" type="radio" value="1">1</label>
                    <label class="radio-inline"><input name="scale" type="radio" value="2" checked>2</label>
                    <label class="radio-inline"><input name="scale" type="radio" value="3">3</label>
                    <label class="radio-inline"><input name="scale" type="radio" value="4">4</label>
                    <label class="radio-inline"><input name="scale" type="radio" value="5">5</label>
                </div>
                <div class="form-group">
                    <div>画像を平滑化</div>
                    <label class="radio-inline"><input name="blur" type="radio" value="0" checked>なし</label>
                    <label class="radio-inline"><input name="blur" type="radio" value="50">弱</label>
                    <label class="radio-inline"><input name="blur" type="radio" value="100">中</label>
                    <label class="radio-inline"><input name="blur" type="radio" value="200">強</label>
                </div>
                <div class="form-group">
                    <div>輪郭線を膨張</div>
                    <label class="radio-inline"><input name="erode" type="radio" value="0" checked>なし</label>
                    <label class="radio-inline"><input name="erode" type="radio" value="1">弱</label>
                    <label class="radio-inline"><input name="erode" type="radio" value="2">強</label>
                </div>
                <div class="form-group">
                    <label><input name="alpha" type="checkbox" value="1" checked>透過PNGで書き出す</label>
                    <label><input name="to_tw" type="checkbox" value="1" checked>Twitter用に1pxだけ透過</label>
                </div>
                <button type="submit" class="btn btn-primary">実行</button>
</form>

 

이 폼에서 radio 로 값들을 받고

 

pixel_convert.py 의 함수에서 얘네들을 request 해와서

def post():
    img = request.files['image']
    if not img:
        error='ファイルを選択してね'
        return render_template('pixel.html', error=error)
    k = int(request.form['k'])
    scale = int(request.form['scale'])
    blur = int(request.form['blur'])
    erode = int(request.form['erode'])

make_dot(img_path, k=k, scale=scale, blur=blur, erode=erode, alpha=alpha, to_tw=to_tw)

이런식으로 make_dot 함수에 인자들을 넣어주는데

이 make dot 함수는

from pixel import make_dot

이렇게 pixel.py 안에 이렇게 정의되있다.

# coding:utf-8
import sys
import cv2
from PIL import Image
import numpy as np
 
n8 = np.array([[1, 1, 1],
               [1, 1, 1],
               [1, 1, 1]],
              np.uint8)
 
n4 = np.array([[0, 1, 0],
               [1, 1, 1],
               [0, 1, 0]],
              np.uint8)
 
 
def make_dot(src, k=3, scale=2, color=True, blur=0, erode=0, alpha=True, to_tw=True):
    img_pl = Image.open(src)

얘네를 가져오는거다

 

일단 pixel_convert.py 에 있는 헤더가

from flask import Flask, render_template, request, redirect, url_for, abort, logging

import os

import cv2

from PIL import Image

import hashlib

import datetime as dt

from pixel import make_dot

이정도인데

위에 request 로 html 을 받아오는 게 되겠고

cv2 는 opencv 일꺼고 pil 도 쓰는가보다

 

make_dot 함수가 들어있는 pixel.py 에 cv2, pillow, numpy 를 쓰는데

이 세 라이브러리 다 한번씩은 써본 라이브러리들이여서

분석하기 꽤 수월할 것 같다.

 

대층 흐름은 알겠고 내일 이어서 어떤식으로 사진을 변형하고 도트화 하는지 알아봐야겠다.

 

일요일 월요일 을 그냥 술먹는다고 날려버려서

수,목,금 이렇게 좀 빡세게 해봐야겠다

 

오늘은 여기까지