The dynamic-image-renderer from 403thi

[Feature] Generator/Previewer

Dynamic Image generator/previewer

It would be nice to have a "Dynamic image" generator,
to be able to freely test the possible customizations.

I made a very simple example below:

The example code (I apologize if something is wrong in the code):

index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
<body>
    <main>
        <section class="preview">
            <h2>Preview</h2>
            <img id="previewImage" src="https://dynamic-image-renderer.vercel.app/api?preset=dracula">
            <span id="url">https://dynamic-image-renderer.vercel.app/api?preset=dracula</span>
        </section>
        <section class="actions">
            <div>
                <label for="title">title:</label>
                <input type="text" class="paramsAction" name="title" id="title">
            </div>
            <div>
                <label for="subtitle">subtitle:</label>
                <input type="text" class="paramsAction" name="subtitle" id="subtitle">
            </div>
            <div>
                <label for="textAnimation">text animation:</label>
                <input type="text" class="paramsAction" name="textAnimation" id="textAnimation">
            </div>
            <div>
                <label for="glowColor">glowColor:</label>
                <input type="text" class="paramsAction" name="glowColor" id="glowColor">
            </div>
            <div>
                <label for="preset">preset:</label>
                <select name="preset" id="preset">
                    <option value="none" selected>none</option>
                    <option value="dracula">Dracula</option>
                    <option value="monokai">Monokai</option>
                    <option value="hub">Hub</option>
                    <option value="minimalist">Minimalist</option>
                    <option value="oneDark">OneDark</option>
                </select>
            </div>
            <button class='btn' id="generate">generate</button>
        </section>
    </main>
    <script src="script.js"></script>
</body>
</html>

script.js

class DynamicImage {
    constructor(data) {
        this.title = data.title
        this.subtitle = data.subtitle
        this.textAnimation = data.textAnimation
        this.glowColor = data.glowColor
        
        this.preset = preset.value
        this.image = document.getElementById('previewImage')
        
        this.containerUrl = document.getElementById('url')
        this.params = `title=${this.title}&subtitle=${this.subtitle}&textAnimation=${this.textAnimation}&glowColor=${this.glowColor}`
    }
    
    update() {
        this.params = preset != 'none' ? `preset=${this.preset}&title=${this.title}&subtitle=${this.subtitle}&textAnimation=${this.textAnimation}&glowColor=${this.glowColor}` : this.params
        this.url = `https://dynamic-image-renderer.vercel.app/api?${this.params}`
        
        this.containerUrl.textContent = this.url
    }
    
    renderAll() {
        this.image.src = this.url
    }
}

const generate = document.querySelector('#generate')

generate.addEventListener('click', (event) => {
    const data = {
        title: 'myTitle', subtitle: 'mySubtitle', 
        textAnimation: 'pulse', glowColor: 'white',
        preset: 'dracula'
    }
    
    for (const item in data) {
        dataValue = document.querySelector(`#${item}`).value
        data[item] = dataValue ? dataValue : data[item]
    }
    
    const dynamicImage = new DynamicImage(data)
    
    dynamicImage.update()
    dynamicImage.renderAll()
})

style.css

* {
    margin: 0;
    padding: 0;
    border: 0;
    text-decoration: none;
}

body {background: #3C3B4E;}

main {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}

.actions, .preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 45vw;
    height: 90vh;
    gap: 10px;
    padding: 7px;
    margin-top: 20px;
}

.preview > h2 {
    font-family: Helvetica;
    color: #886EB9;
}

#previewImage {
    width: 100%;
    transition: all .3s ease;
}

#url {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95%;
    padding: 5px;
    border-radius: 7px;
    color: #886EB9;
    word-break: break-word;
    background: #2D2C39;
}

.actions > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.actions > div > label {
    display: flex;
    justify-content: flex-start;
    width: 98%;
    font-family: Arial;
    color: #89889F;
}

#preset, .paramsAction {
    width: 98%;
    height: 30px;
    color: #6E6AA3;
    border: none;
    border-radius: 7px;
    background: #2D2C39;
    transition: all .5s ease;
}

#preset:focus, .paramsAction:focus {
    outline: none;
    box-shadow: 0 0 0 5px rgba(136, 110, 185, .4);
}

.btn {
    width: 98%;
    height: 30px;
    border-radius: 7px;
    color: white;
    margin-top: 5px;
    font-size: 10pt;
    background: #886EB9;
}

@media only screen and (max-width: 768px) {
    main {
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }
    .actions, .preview {
        width: 90vw;
    }
    
}

403thi / dynamic-image-renderer Goto Github PK

dynamic-image-renderer's Introduction

👋 Hello! I'm Thiago!

dynamic-image-renderer's People

Contributors

Stargazers

Watchers

dynamic-image-renderer's Issues

[Feature] Generator/Previewer

Dynamic Image generator/previewer

index.html

script.js

style.css

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent