데이터 분석가

이미지 파일 색상 분석 (Udemy Project 10) 본문

유데미 부트캠프 프로젝트(Final)

이미지 파일 색상 분석 (Udemy Project 10)

PlintAn 2023. 6. 30. 12:22

안녕하세요!

 

이번 시간에는 이미지 파일에 대한 색상에 대한 hex 코드로 간단하게 분석해주는

 

웹 애플리케이션을 만들어 보겠습니다 !

 

 

헥스 코드가 무엇인가 ?

 

헥스(HEX)는 16진수를 뜻하는 단어로

색상을 #과 뒤에 붙는 여섯 자리의 16진수로 나타낸다.

'R', 'G', 'B'로 나타내며

16진수로 표현되어 00(=0 10)일 때 가장 어둡고 FF(=255 10)일 때 가장 밝다

 

template\

1.index.html

2.result.html

 

3.app.py

 

1.index.html

 

<!DOCTYPE html>
<html>
<head>
    <style>
        /* CSS 스타일로 index.html 파일을 중앙으로 위치시킵니다. */
        html, body {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 이미지 업로드 영역에 스타일을 적용합니다. */
        .upload-area {
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 2px dashed #aaa;
            padding: 20px;
        }

        /* 업로드 버튼에 스타일을 적용합니다. */
        .upload-button {
            margin-top: 10px;
        }

        /* 이미지 미리보기 영역에 스타일을 적용합니다. */
        .preview {
            margin-top: 20px;
        }

        /* 색상 미리보기 박스에 스타일을 적용합니다. */
        .color-box {
            display: inline-block;
            width: 30px;
            height: 30px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="upload-area">
        <h2>이미지 업로드</h2>
        <form action="/upload" method="post" enctype="multipart/form-data">
            <input type="file" name="image" accept="image/*">
            <input class="upload-button" type="submit" value="Upload">
        </form>
    </div>

    {% if colors %}
        <div class="preview">
            <h2>추출된 색상</h2>
            {% for color in colors %}
                <div class="color-box" style="background-color: {{ color }};"></div>
                <span>{{ color }}</span><br>
            {% endfor %}
        </div>
    {% endif %}
</body>
</html>

2.result.html

 

<!DOCTYPE html>
<html>
<head>
    <style>
        /* CSS 스타일로 result.html 파일에서 추출된 색상을 가로로 중앙에 위치시킵니다. */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        /* 색상 표시 영역에 스타일을 적용합니다. */
        .color-area {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 색상 박스에 스타일을 적용합니다. */
        .color-box {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 100px;
            margin: 10px;
            color: white;
            font-weight: bold;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <h2>추출된 색상</h2>
    <div class="color-area">
        {% for color in colors %}
            <div class="color-box" style="background-color: {{ color }};">
                <span>{{ color }}</span>
            </div>
        {% endfor %}
    </div>
</body>
</html>

3.app.py

 

from flask import Flask, render_template, request
import os
from PIL import Image
import colorgram

app = Flask(__name__)

def extract_colors(image_path, num_colors):
    image = Image.open(image_path)
    colors = colorgram.extract(image, num_colors)
    hex_colors = []
    for color in colors:
        r = color.rgb.r
        g = color.rgb.g
        b = color.rgb.b
        hex_color = "#{:02x}{:02x}{:02x}".format(r, g, b)
        hex_colors.append(hex_color)
    return hex_colors

@app.route('/')
def home():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    if 'image' not in request.files:
        return "No image uploaded"
    image = request.files['image']
    image_path = "static/temp_image.jpg"
    image.save(image_path)
    colors = extract_colors(image_path, 10)
    os.remove(image_path)  # 업로드된 이미지 파일을 삭제합니다.
    return render_template('result.html', colors=colors)

if __name__ == '__main__':
    app.run(debug=True)

1.index.html 웹 페이지에 이미지 파일을 업로드 하면 

2.result.html 웹 페이지에 이미지 파일에 대한 hex(헥스) 코드를 rgb 컬러로 분석해서 결과를 알려줍니다 !

 

 

헥스 코드 분석

제 베지터 그림에 대한 10가지 rgb 컬러를 분석해보았습니다 !

 

정말 어렵지 않네요 !

'유데미 부트캠프 프로젝트(Final)' 카테고리의 다른 글

우주 외계인 침공 게임(Udemy Project 12)  (0) 2023.07.01
MLB 선수들 데이터 스크래핑(Udemy Project 11)  (0) 2023.07.01
PDF파일 음성 변환 Pdf2Voice (Udemy Project 9)  (0) 2023.06.29
파이썬 가장 위험한 글쓰기 (udemy project 8)  (0) 2023.06.28
ToDoList 웹 페이지 구축 (Udemy Project 7)  (0) 2023.06.28
'유데미 부트캠프 프로젝트(Final)' Related Articles more
Comments