[php] imagewebp() - jak wysłać obrazek w odpowiedzi ajaxa Opcje

[siutek]

Cześć, mam zagwozdkę...

Mam na serwerze różne rodzaje plików graficznych: niektóre JPG inne TIFF.

Z formularza na stronie wysyłam ajaxa z danymi do umieszczenia na tych grafikach. Chciałbym te grafiki przerobione uzyskać w odpowiedzi ajaxa, tak bym mógł go wstawić w tag <img src=''> o konkretnym ID.
Wymyśliłem sobie, że aby maksymalnie "odciążyć" łącze użytkownika, będę wysyłał grafiki wynikowe w formacie webp. No i teraz pojawia się pytanie:

- jak przypisać wynik działania funkcji imagewebp() do zmiennej? Tak bym mógł właśnie ten obraz wysłać ajaxem do przeglądarki?

[SmokAnalog]

Jeśli ten obrazek ma być użyty tylko raz, to może po prostu zwróć Ajaxem zasób obrazka? Wtedy wystarczy:

[PHP] pobierz, plaintext 
header('Content-Type: image/webp');
 
// tutaj tworzysz swój obrazek
 
imagewebp($image);
[PHP] pobierz, plaintext 

Ustawianie Content-Type nie jest niezbędne w Twoim przypadku (zadziała bez tego), ale jednak wypada podać

Potem na tej podstawie konwertujesz do base64 i przypisujesz src="data:image/webp;base64,TwójBase64"

EDIT

Z ciekawości sprawdziłem czy działa łatwo z Fetch API i na szczęście tak Zobacz ten przykład:

1. Masz jakiś obrazek w pliku obrazek.jpg. Ten obrazek będziemy przekształcać i zapisywać jako webp.

2. Plik obrazek.php, gdzie przekształcasz obrazek i go "wypluwasz":

[PHP] pobierz, plaintext 
<?php
 
header('Content-Type: image/webp');
 
$image = imagecreatefromjpeg('obrazek.jpg');
 
// tutaj możesz się bawić obrazkiem
 
imagewebp($image);
[PHP] pobierz, plaintext 

3. I przykładowy HTML, gdzie to się dzieje:

[HTML] pobierz, plaintext 
<button>Czary mary</button>
<img>
<script>
document.querySelector('button').addEventListener('click', async () => {
    const response = await fetch('obrazek.php');
    const resource = await response.blob();
 
    document.images[0].src = URL.createObjectURL(resource);
});
</script>
[HTML] pobierz, plaintext 

Działa pięknie

Dla kompletności mojej odpowiedzi jeszcze dodam, że oczywiście możesz ustawić src obrazka bezpośrednio na plik .php:

[HTML] pobierz, plaintext 
<img src="obrazek.php">
[HTML] pobierz, plaintext 

Jeżeli plik PHP wypluwa obrazek tak jak nasz obrazek.php, to <img> sobie poradzi - nawet bez Content-Type lub z nieprawidłowym Content-Type.

Jeżeli musisz wysłać do tego pliku dużo danych lub np. wysyłasz mu obrazek źródłowy, to Fetch API lub Ajax będą na miejscu. Ale jeśli chodzi o prostą operację np. pokazania TIFF jako webp, ustawienie src na plik PHP może wystarczyć. Zakładając, że te obrazki TIFF są na serwerze i tylko mówisz skryptowi który obrazek ma wyświetlić jako webp, możesz np. podawać ten obrazek źródłowy jako parametr w zwykłym GET:

[JAVASCRIPT] pobierz, plaintext 
const sourceFileName = document.getElementById('my-input').value;
 
document.getElementById('my-image').src = 'http://foo.test/obrazek.php?source=' + encodeURIComponent(sourceFileName);
[JAVASCRIPT] pobierz, plaintext 

I to wystarczy.

Ten post edytował SmokAnalog 3.11.2020, 22:50:56

[siutek]

Dzięki.
generalnie ciągle myślę jak najlepiej sensownie ograć całość.

główne założenie są takie, że ajaxem wysyłam dane z formularza, według tych danych modyfikuję źródłowy plik tiff/jpg i... wypluwam go do wyświetlenia ajaxem ORAZ zapisuję jako miniaturkę do podglądu na serwerze.

wczoraj chciałem jeszcze wysyłać ten obraz ajaxem, ale chyba faktycznie lepiej będzie zapisać miniaturkę, a jej nazwę (zakodowaną base64) wyślę w odpowiedzi ajaxa. Ten string umieszczę w <img src=> razem z adresem pliku php, który odczyta obrazek z serwera. Czyli <img src="https://mojserwer.pl/obrazek.php?hjs74hdlaldurbvxc6skskxjx">

zależy mi również na ukryciu prawdziwej lokalizacji tych grafik na serwerze, stąd plik php, który ma wyświetlać zawartość grafiki.

[SmokAnalog]

Tak naprawdę to czy zrobisz to zwracając obrazek w odpowiedzi, czy tylko jego URL, to będzie git majonez. Nie wiem co tam robisz z tym obrazkiem, ale czasami nawet nie trzeba pokazywać użytkownikowi właściwego obrazka, tylko jego "symulację". Na przykład jeśli tylko wycinasz fragment z tego obrazka lub nakładasz jakieś proste efekty, czasem można to zrobić po stronie klienta. Jeśli chodzi o tworzenie obrazka na podstawie przesłanego obrazka z <input type="file"> to pamiętaj, że możesz ten obrazek wyświetlić natychmiast, zanim wyślesz cokolwiek na serwer. To jest bardzo miły dla oka efekt.

Ale ogólnie mam za mało informacji, żeby coś konkretnego doradzić, bo nie wiem co konkretnie chcesz zrobić