Generowanie obrazka w przeglądarce

Question

Hejka mam problem z głupimi telefonami. Może znacie jakieś obejście. Mam znacznik canvas oraz przycisk pobierz zdjęcie który tworzy plik na podstawie tego co jest w canvas i pobiera obraz dla usera. Kod który mam wygląda następująco:
 

canvas.toBlob((blob) => {
    const url = blob === null ? canvas.toDataURL("image/png", 1) : URL.createObjectURL(blob);

    const a = document.createElement('a');
    a.href = url;
    a.download = 'avatar.png';
    a.click();
}, "image/png", 1);

I to się zaczyna magia ponieważ na komputerze działa, a na komórkach nie zawsze. Co to znaczy? Gdy ktoś wejdzie na stronę przez przeglądarkę to wszystko działa. Jednak gdy wyśle link do kogoś na messanger lub ktoś użyje linku w aplikacji facebooka. To strona otwiera mu się w tym głupim trybie "podglądu" Nie wiem jak to się nazywa. I jeśli ktoś nie kliknie u góry 3 kropek i nie wybierze "otwórz w chrome" To nie zadziała. 

Moje pytanie to czy da się to jakoś ominąć? Ewentualnie przechwycić błąd i wyświetlić komunikat który pomoże użytkownikowi zrozumieć problem. 

Jeśli chcecie potestować generator obrazków jest tutaj: 

https://wegateka.pl/etsa/ 
Zachęcam przy okazji do dorzucenia swoich podpisów jeśli zgadzacie się z propozycją ;) 

Comments

Masz teraz

Jeśli Twój avatar nie zapisał się. Spróbuj zaznaczyć obrazek i pobrać go ręcznie. Jeśli to nie działa otwórz naszą stronę w innej przeglądarce internetowej.

Może zmień komunikat, np.

"Jeśli Twój avatar nie otworzył się automatycznie do zapisu. Spróbuj zaznaczyć obrazek i pobrać go ręcznie lub pobierz go z tego linku"

i pod tekst "linku" podepnij ten

const a = document.createElement('a');

 

---

Czy to coś zmieni? Na moje oko to ta przeglądarka ma wszystko po blokowane. Jak przytrzymam palec na zdjęciu to nie pokazują mi się żadne opcje. A w zwykłej przeglądarce miałbym pobierz ;)

---

Sugeruje umieścić ten komunikat

już przy próbie "kliknięcia" w

z poziomu przeglądarki messenger-a. 

 

Answer 1

Każda przeglądarka ma coś takiego jak User Agent string. Teoria polega na tym, że każda przeglądarka powinna mieć unikatowy, żeby dało się ją odróżnić od reszty. W praktyce często przeglądarki kłamią i przedstawiają się jako inne. Aczkolwiek, przeglądarka FB przedstawia się jako FB (ma w UA stringu fragment FB_IAB), co pozwoli ją zidentyfikować.

Do UA stringu można się dostać albo przez nagłówek HTTP User-Agent, który przyjdzie w żądaniu, albo przez navigator.userAgent w kodzie JS.

Comments

Ooo ekstra! Myślałem że za podgląd odpowiada ta sama przeglądarka co w systemie tylko uruchomiona w jakimś dziwnym trybie. Nie wpadłbym na to że ma to unikatowego UA.

---

To różnie. W niektórych apkach – tak, np. w Discordzie. Można to poznać po tym, że jak się otworzy menu w takiej przeglądarce, to na dole jest ikonka Chrome'a i napis, że działa w Chrome. No i po tym, że ciasteczka z Chrome'a są obecne, więc jesteśmy zalogowani w różne miejsca.

Natomiast FB ma swój własny webview, odizolowany od tego systemowego. I tam się dzieją rzeczy – najczęściej dziwne i smutne.

Answer 2

A nie sprawdzałeś np, czy informacje w trybie podglądu mają jakieś inne dodatkowe metadata, albo dane w header odpowiedzi/zapytania ? Może filtrować by to w taki sposób, że jeśli użytkownik otwiera w ten sposób plik/zdjęcie, czy coś to wysyłać coś dodatkowego w nagłówkach, albo zaczytywać to... i na takiej podstawie wnioskować, czy i kiedy użytkownik znajduje się w jakim trybie? W ten sposób dostosować komunikat, to jest tylko takie moje hipotetyczne gdybanie.

Comments

No własnie problem jest taki że nawet nie wiem jak to debugować aby znaleźć jakąś różnice.

Zapytanie tam żadne nie leci bo tworzę base64 i dodaje do go znacznika <a>

Wiem że base64 i link są poprawnie wygenerowane więc po prostu zablokowane jest pobieranie plików. Pytałem też chat GTP o rozwiązanie bez skutku :/