[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ć (IMG:style_emoticons/default/smile.gif)

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 (IMG:style_emoticons/default/smile.gif) 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 (IMG:style_emoticons/default/smile.gif)

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