Блог

Главная - Вопросы по программированию - Как я могу загрузить сгенерированный пользователем svg-файл на сервер?

Как я могу загрузить сгенерированный пользователем svg-файл на сервер?

#javascript #php #ajax #svg #server

Вопрос:

Потратив три дня на исследования и не сумев включить загрузку сгенерированного пользователем svg-файла на сервер, я совершенно в тупике.

Я создал сайт на HTML и Javascript, чтобы пользователи могли создавать базовую модель транспортного средства, вводя размеры в форму.

Затем эти измерения используются для редактирования координат x и y каждого svg-файла.

Я добился успеха с преобразованием вложенного svg в base64 и последующей загрузкой в файловую систему пользователя с помощью кнопки (хотя она не работает в JSFiddle), а также экспериментировал с сохранением файла в локальном хранилище.

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

Я бы хотел, чтобы пользователь мог отправлять свои отредактированные svg-файлы на сервер, где я мог бы ссылаться на него на другой странице.

Я довольно плохо знаком с кодом и практикой на стороне сервера, но до сих пор пробовал общие предложения, такие как:

   $.ajax({
  url: ajaxurl,
  type: 'POST',...

а также различные итерации PHP-кода для получения svg.

Вот (в основном) рабочая скрипка моего сайта на данный момент.

JSFiddle

Отредактируйте для лучшего контекста

Это очень упрощенная версия вложенного svg-файла, который я пытаюсь экспортировать на сервер

 <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" id="Layer_1">
    <rect id="rect1"/>
    <rect id="rect2"/>
</svg>

Экспорт привязан к этой кнопке

 <button id="downloadSVG">Download</button>

А затем сценарий экспорта

  <script>
                    function downloadSVGAsText() {
                        const svg = document.querySelector('svg');
                        const base64doc = btoa(unescape(encodeURIComponent(svg.outerHTML)));
                        const a = document.createElement('a');
                        const e = new MouseEvent('click');
                        a.download = 'download.svg';
                        a.href = 'data:image/svg xml;base64,'   base64doc;
                        a.dispatchEvent(e);
                    }

                    const downloadSVG = document.querySelector('#downloadSVG');
                    downloadSVG.addEventListener('click', downloadSVGAsText);

                </script>

Упрощенный JSFiddle

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

Пока я понимаю, что мне понадобится Ajax для передачи изображения Base64 из javascript в PHP-файл на сервере, затем PHP-файл разместит изображение на сервере. Кажется, я просто не могу заставить его работать. Основная проблема заключается в том, как получить сгенерированный Base64 на PHP. Остальное я с удовольствием отработаю.

Комментарии:

1. Пожалуйста, поделитесь более подробной информацией, например, кодом, который вы используете. Что именно не работает? Это проблема JS (когда вы затрудняетесь с отправкой правильного запроса) или проблема PHP (когда вы затрудняетесь с его правильной обработкой)? Кроме того, вы уверены, что эта проблема действительно связана с самим SVG (поскольку вы до сих пор не поделились никаким кодом, связанным с SVG)?

2. Пожалуйста, поместите весь соответствующий код в свой вопрос, а не на какой-либо внешний сайт. Кроме того, пожалуйста, сократите код до тех частей, которые вызывают проблему, и опустите все окружающие части — даже если они являются частью вашего приложения, возможно, будет легче понять вашу проблему, используя только соответствующие части

3. Извините, я редко публикую вопросы здесь. Надеюсь, все исправлено.

4. Чего вам не хватает, так это того, что запущено на этом сервере, на который вы хотите отправить данные. Он не просто волшебным образом появляется на сервере и записывается на диск. Для этого вам нужен код на стороне сервера.

5. «Основная проблема заключается в том, как получить сгенерированный Base64 в PHP» — что вы пытались добиться этого? У вас проблемы с отправкой запроса (содержащего эти данные) или его правильной обработкой на сервере?

Ответ №1:

Это очень общий вопрос. Я думаю, что использование AJAX — хороший способ. Вы должны иметь возможность просто поместить SVG в текст сообщения:

 $.ajax('url',{
    'data': svg.outerHTML,
    'type': 'POST',
    'processData': false,
    'contentType': 'image/svg xml'
});

Затем используйте $svgString = file_get_contents('php://input'); для получения содержимого тела, это сэкономит вам много времени на кодировании и декодировании. Остальное зависит от вас.

Метки: