Как сохранить изображение которое генерируется в реальном времени?

Question

[DocTypeMaster]

Подскажите как правильно генерировать ссылку на изображение которое я генерирую на livewire

<img src="data:image/png;base64, {!! base64_encode(QrCode::format('png')->size(300)->wiFi([
     'ssid' => $this->ssid,
     'encryption' => $this->encryption,
     'password' => $this->password
     ])) !!} ">
     <a href="" class=""></a>

Comments

[Дмитрий]

Генерируем base64 изображение, сохраняем, отдаём на фронт
Возможно у класса qr есть метод сохранения
Ну как вариант там есть кэш.
Лучше дайте посмотреть их реп

[Денис Юрьев]

Ничего не понятно, но если представленный код работает, то как то так, путь до файла поправить и генерацию имени онного только внедрить бы.

<?
file_put_contents(
  $_SERVER['DOCUMENT_ROOT'].'/path/to/file.png', 
  QrCode::format('png')->size(300)->wiFi([
    'ssid' => $this->ssid,
    'encryption' => $this->encryption,
    'password' => $this->password
  ])
);
?>

<img src="/path/to/file.png">
     <a href="" class=""></a>

чем текущая реализация плоха?

[DocTypeMaster]

Денис Юрьев, я все делаю в блейде, и так не будет работать. И сохранять я его не хочу, есть вариант без сохранения ?

[Александр Талалаев]

Уточните вопрос. Что-то не понятно, там вы написали: "Как сохранить изображение которое генерируется в реальном времени?", а здесь пишете что сохранять не хотите?
base64 изображения пользователь вполне может сохранить, например правой кнопкой сохранить изображение. Или что вы имели ввиду?

[DocTypeMaster]

Дмитрий, https://www.simplesoftware.io/#/docs/simple-qrcode

[DocTypeMaster]

Александр Талалаев, cуть в том что я генерирую qr код на странице, и под ним хочу вывести кнопку скачать ( скачать изображение ), проблема в том что я не сохраняю эту самую картинку на сервере, она сразу поститься на сайте, вот собственно я и не понимаю откуда брать ссылку на скачивание когда картинки нет на сервере

[Александр Талалаев]

DocTypeMaster, аа. Вам, конечно, нужно учиться ставить нормально вопрос сразу ;-)

[Александр Талалаев]

<img src="data:image/png;base64, {!! base64_encode(QrCode::format('png')->size(300)->wiFi([
     'ssid' => $this->ssid,
     'encryption' => $this->encryption,
     'password' => $this->password
     ])) !!} ">
     <a 
download="qr.png"
href="data:image/png;base64, {!! base64_encode(QrCode::format('png')->size(300)->wiFi([
     'ssid' => $this->ssid,
     'encryption' => $this->encryption,
     'password' => $this->password
     ]))" class=""></a>

Как видим, код здесь повторяется и два раза генерируем png, поэтому возможно есть смысл использовать доп переменную что сохранить код картинки и в blade передавать уже только само значение переменной.

[Дмитрий]

DocTypeMaster, ну генерите на бэке и отдавайте в блэйд, на бэке можно сохранить и потом отдать ссылкой

Answer 1

[Александр Талалаев]

Короче говоря, сразу отмечу, мне не очень нравится такое вкрапления кода в шаблон, я бы создал свой сервисный класс обертку, но да ладно. Значит у тега a есть свойство download, куда можно дать имя файла(как он будет называться при сохранении) и который браузеру сразу и подскажет что ссылка для скачивания и угадывать что там не нужно, ждать хедеров от сервера и тп тоже не нужно(я упростил объяснение).
Ваш код должен быть таким:

<img src="data:image/png;base64, {!! base64_encode(QrCode::format('png')->size(300)->wiFi([
     'ssid' => $this->ssid,
     'encryption' => $this->encryption,
     'password' => $this->password
     ])) !!} ">
     <a 
download="qr.png"
href="data:image/png;base64, {!! base64_encode(QrCode::format('png')->size(300)->wiFi([
     'ssid' => $this->ssid,
     'encryption' => $this->encryption,
     'password' => $this->password
     ]))  !!}" class=""></a>

Как видим, код здесь повторяется и два раза генерируем png, поэтому возможно есть смысл использовать доп переменную что сохранить код картинки и в blade передавать уже только само значение переменной.

Comments

[DocTypeMaster]

Сделал по вашему примеру, пишет при скачивании "ошибка сети" и файл посмотреть нельзя

[Александр Талалаев]

DocTypeMaster, я там ещё опечатался забыл закрыть скобочки.
У меня работало, ну и можете проверить на чистых данных, те просто создать тег a.
А в href ставить полный чистый код base64 картинки.
Вот пример

[DocTypeMaster]

Александр Талалаев, я вроде как нашел решение получше, но столкнулся с другой проблемой, а именно с генерацией и сохранением кода на сервере,

Нашел в доках что можно сохранять код файфай но не получается что-то. Не могу как это сделать этим префиксом

вот мой код

$png2 = QrCode::format('png')->size(300)->generate( тут я так понимаю должен быть префикс '../public/qr-wifi/111.png');
      $png2 = base64_encode($png2);

[Александр Талалаев]

DocTypeMaster, конечно же лучше сохранять, просто выше в комментариях вы указали что не хотите хранить у себя картинку и хотели именно вариант со встраиванием через base64.

use Illuminate\Support\Facades\Storage;

/* 
 Задаём путь по которому будет хранится картинка, сразу говорю
 имя файла нужно делать уникальным чтобы файл не перезаписывался каждый раз.
Так ж у php должны быть права на запись в папку в которую вы сохраняете картинку
класс Storage будет сохранять по пути относительно директории storage/app/
*/
// сохранится в storage/app/public/qr/nameofpng.svg
// nameofpng.svg - лучше генерировать случайным
$pngPath = Storage::path('public/qr/nameofpng.svg');
//То что кодируем, в данном случае условная строка wifi подключения
$wifiCode = 'wifi:BLABLABLA';
$qr = QrCode::format('png')->size(300)->generate($wifiCode, $pngPath);
// далее в шаблон передаёте переменную $pngPath, где с помощью 
Storage::url( $pngPath);
//или
'/storage' .  $pngPath;
//PS не забываем что нужно сделать сим лин с помощью php artisan storage:link

[DocTypeMaster]

Александр Талалаев,

$wifiCode = 'wifi:BLABLABLA';

вот это таки и не работает, оно при сканировании пишет "открыть ссылку wifi " и открывает браузер, а должно спрашивать "подключиться к сети"

[DocTypeMaster]

Александр Талалаев, этот метод генерейт работает с чем угодно кроме вай-фай, либо я не знаю как его использовать

[Александр Талалаев]

DocTypeMaster, ну это уже отдельный вопрос. Тут вам уже нужно разобраться с форматом, который нужно использовать, как камера/спец приложения понимают что в этом qr может быть ссылка на настройки wifi.
Грубо говоря qr просто кодирует строку, поэтому само приложение на телефоне просто знает: такая то строка это ссылка в браузер, другая это вай-фай и тп. Те вам нужно узнать только правильный формат строки который отправить в генератор. Возьмите откуда-то из примера, прям чистую строку и проанализируйте что там.

[DocTypeMaster]

Александр Талалаев, я просто думал может вы уже делали такое. Я уже пробовал все, вот такой формат записи

base64_encode(QrCode::format('png')
      ->color(000, 000, 000)
      ->merge('\public\wifi.png', .3)


      ->size(300)
      ->wiFi(['ssid' => $this->ssid, 'encryption' => $this->encryption, 'password' => $this->password]))

генерирует нормально код но сохранить его я не могу, вообе за сохранение отвечает не стор метод а сам генерейт, там можно указать путь куда его сохранить.

QrCode::generate('Make me into a QrCode!', '../public/qrcodes/qrcode.svg');

вот такое простой пример работает хорошо и все сохраняет, а когда пытаюсь сделать с вай-фай , то ничего не сохраняет, в доках написано что нужно эти префиксы использовать но как я не понима, пробовал но не работает

[Александр Талалаев]

DocTypeMaster, смотрите, там всё просто. Есть RFC стандарт которого большинство стараются придерживаться. Он определяет как формировать url для соединения к wifi, так же там указан старый классический url который использовался ещё до стандартизации в qr кодах(и сейчас используется), это строка вида:
WIFI:T:WPA;S:mynetwork;P:mypass;;
можно посмотреть параметры здесь:
https://github.com/zxing/zxing/wiki/Barcode-Conten...
Если сформировать qr код с этой строкой, большинство камер/qr ридеров должны понять что это подключение к wifi

[DocTypeMaster]

Александр Талалаев,

QrCode::generate(WIFI:T:WPA;S:mynetwork;P:mypass;;, '../public/qr-wifi/qqq.svg');

не работает

[Александр Талалаев]

DocTypeMaster, так а где кавычки, там же строка должна быть:

QrCode::generate('WIFI:T:WPA;S:mynetwork;P:mypass;;', '../public/qr-wifi/qqq.svg');

[DocTypeMaster]

Александр Талалаев, спасибо, заработало )

[DocTypeMaster]

Александр Талалаев, у меня вышло вот так

$permitted_chars = '0123456789abcdefghijklmnopqrstuvwxyz';
    $randstr = substr(str_shuffle($permitted_chars), 0, 4);
 QrCode::size(300)->format('png')->generate('WIFI:T:'.$this->encryption.';S:'.$this->ssid.';P:'.$this->password.';;', '../public/qr-wifi/'.$this->ssid.'-'.$randstr.'.png');
  $this->sucsses = 'ok';

подскажите еще как мне его сразу после выполнения скачивать с сервера ?

[Александр Талалаев]

DocTypeMaster,

//так же его потом передаём в шаблон
$filename = uniqid($this->ssid . '_', true) . '.png';
// storage/public/qr-wifi/имя_файла, только абсолютный
$filepath = storage_path('public/qr-wifi/' . $filename);

 QrCode::size(300)->format('png')->generate('WIFI:T:'.$this->encryption.';S:'.$this->ssid.';P:'.$this->password.';;', $filepath);
  $this->sucsses = 'ok';
//Потом в шаблоне
//после выполнения линковки storage , в публичной папке должно появится папка storage
// Которая связана с storage/public в корне проекта (storage/public -> public/storage)
// Поэтому к файлам из шаблонов можно обращаться как:
<a href="storage/qr-wifi/{{$filename}}"> Скачать </a>
// или с хелпером asset, только нужно помнить что он генерирует с учетом настроек ASSET_URL(его меняют если есть CDN)
<a href="{{ asset('storage/qr-wifi/' . $filename) }}"> Скачать </a>