Generowanie obrazka

Witam społeczność.
Temat może nie do końca oddaje, to z czym się chcę zmierzyć, gdyż jest to w zasadzie połączenie jQuery i PHP. No ale może od początku. Mam taki mały formularz, gdzie wpisuje się tekst, koordynaty, wybiera się kolor, oraz rozmiar czcionki. Te parametry przekazuję poprzez ajax do skryptu php, który wczytuję odpowiednią grafikę z dysku, nanosi wprowadzone dane i ma ją wyświetlić. Skrypt PHP wiem jak zrobić. Dane przekazać też wiem jak. Problemem jest samo wyświetlenie. Grafika ma się generować na żądanie (zdarzenie onclick na elemencie). Jest również blok, w którym ma ta wygenerowana grafika się wyświetlić. Jak to programistycznie ogarnąć? Może nie tyle programistycznie, a logicznie scalić?

Nie szukałeś w ogóle?
W Pythonie łatwo to zrobić na macierzach, a w php GD library ma fajne funkcje do tego.
https://stackoverflow.com/questions/13267846/how-to-add-text-to-an-image-with-php-gd-library

A po stronie frontu możesz np. dynamicznie dodać img, element z linkiem do tego skryptu php i w query parametrach podać dane potrzebne do wyrenderowania położenie, wielkość itp.
Ewentualnie fetchem pobrać bo to type/image wraca, zrobić z tego blob i wrzucić też do img.

Po stronie frontu można pozycjonować tekst za pomocą CSS.

Buster napisał(a):

Witam społeczność.
Temat może nie do końca oddaje, to z czym się chcę zmierzyć, gdyż jest to w zasadzie połączenie jQuery i PHP. No ale może od początku. Mam taki mały formularz, gdzie wpisuje się tekst, koordynaty, wybiera się kolor, oraz rozmiar czcionki. Te parametry przekazuję poprzez ajax do skryptu php, który wczytuję odpowiednią grafikę z dysku, nanosi wprowadzone dane i ma ją wyświetlić. Skrypt PHP wiem jak zrobić. Dane przekazać też wiem jak. Problemem jest samo wyświetlenie. Grafika ma się generować na żądanie (zdarzenie onclick na elemencie). Jest również blok, w którym ma ta wygenerowana grafika się wyświetlić. Jak to programistycznie ogarnąć? Może nie tyle programistycznie, a logicznie scalić?

Nie potrzebujesz JS'a do tego

<img src="your_php_file.php?param=value"/>

Plusów jeszcze nie rozdałeś, pewnie problem nie rozwiązany do końca, a wrzucę ci kod cały.

image.php

<?php
// test link
// http://127.0.0.1:8000/image.php?text=asdfga&x=100&y=200&red=255&green=0&blue=0

header('Content-type: image/jpeg');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Cache-Control: post-check=0, pre-check=0', FALSE);
header('Pragma: no-cache');

$text = urldecode($_GET['text']);
$x = $_GET['x'];
$y = $_GET['y'];
$red = $_GET['red'];
$green = $_GET['green'];
$blue = $_GET['blue'];

$jpg_image = @imagecreatefromjpeg('image.jpg');

$color = imagecolorallocate($jpg_image, $red, $green, $blue);

$font_path = 'arial.ttf';

imagettftext($jpg_image, 25, 0,  $x, $y, $color, $font_path, $text);

imagejpeg($jpg_image);

imagedestroy($jpg_image);
?>

index.html

<div>
    <div style="display: flex;">
        <div>
            <h1>text</h1>
            <input id="text" type="text" value="some tekst">
        </div>

        <div>
            <h1>x</h1>
            <input id="x" type="text" value="50">
        </div>

        <div>
            <h1>y</h1>
            <input id="y" type="text" value="100">
        </div>

        <div>
            <h1>red</h1>
            <input id="red" type="text" value="0">
            <h1>green</h1>
            <input id="green" type="text" value="0">
            <h1>blue</h1>
            <input id="blue" type="text" value="0">
        </div>

    </div>
    <button onclick="render()">Render</button>

    <button onclick="download()">Download image</button>
</div>

<img id="image" src="http://127.0.0.1:8000/image.php?text=asdfga&x=100&y=200&red=255&green=0&blue=0" width="800" height="600" alt="">

<script>
    const text = document.getElementById("text");
    const x = document.getElementById("x");
    const y = document.getElementById("y");
    const red = document.getElementById("red");
    const green = document.getElementById("green");
    const blue = document.getElementById("blue");

    const createLink = () => {
        const link = `http://127.0.0.1:8000/image.php?text=${text.value}&x=${x.value}&y=${y.value}&red=${red.value}&green=${green.value}&blue=${blue.value}`;
        return link;
    }

    const render = () => {
        document.querySelector("img#image").src = createLink();
    };

    const download = () => {
        var source = createLink();
        var el = document.createElement('a');
        el.setAttribute('href', source);
        el.setAttribute('download', 'image.jpg');
        el.click();
    };
</script>

Jak to zreprodukować u siebie?

-font sobie wrzuć do katalogu z plikem image.php
pobierz lub skopiuj sobie na windowsie jest w C:\Windows\Fonts\Arial

-jakiś obrazek o nazwie image.jpg wrzuć do katalogu z plikiem image.php

-odpal sobie php -S 127.0.0.1:8000
lub
php -S 127.0.0.1:8000 -c php.ini
-w tym php.ini możesz napisać extension=gd lub extension= i link do php_gd jeśli nie masz zainstalowane php w windows C:\php\ lub ci po prostu nie wykrywa.

Potem wchodzisz na link 127.0.0.1:8000 w przeglądarce i masz wszystko.

Wyłączyłem cache, czasem coś się zbuguje, a przeglądarka ci cache rzuci i gorzej ci się będzie debugować.