Después de pasar tres días investigando y no poder habilitar la carga de svg generados por el usuario en el servidor, estoy completamente perplejo.
Creé un sitio HTML y Javascript para que los usuarios creen un modelo básico de un vehículo, ingresando las dimensiones en un formulario.
Esas dimensiones se utilizan luego para editar las coordenadas 'x' e 'y' de cada svgs.
Tuve éxito al convertir el svg anidado a base64 y luego descargarlo al sistema de archivos de los usuarios usando un botón (aunque no funciona en JSFiddle), y también experimenté guardando el archivo en el almacenamiento local.
El javascript de salida ha demostrado funcionar absolutamente bien, pero no puedo entender cómo obtener esa salida en el servidor de ninguna manera.
Me gustaría poder hacer que un usuario envíe su svg editado al servidor, donde luego puedo hacer referencia a él en otra página.
No estoy familiarizado con el código y la práctica del lado del servidor, pero hasta ahora he probado las sugerencias comunes como:
$.ajax({ url: ajaxurl, type: 'POST',...así como varias iteraciones de código PHP para recibir el svg.
Aquí está el Fiddle (en su mayoría) funcional de mi sitio hasta ahora.
Esta es una versión muy simplificada del svg anidado que estoy tratando de exportar al servidor
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" id="Layer_1"> <rect id="rect1"/> <rect id="rect2"/> </svg>La exportación está adjunta a este botón
<button id="downloadSVG">Download</button>Y luego el script de exportación.
<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>Lo que estoy completamente perdido es cómo publicar el svg anidado en el servidor, para que los usuarios puedan editarlo o usarlo más tarde.
Hasta ahora entiendo que necesitaré Ajax para pasar la imagen Base64 de javascript al archivo PHP en el servidor, luego el archivo PHP colocará la imagen en el servidor. Simplemente no parece ser capaz de hacer que funcione. El problema principal es cómo convertir el Base64 generado en PHP. El resto estoy feliz de hacer ejercicio.
Esta es una pregunta muy general. Creo que usar AJAX es una buena manera de hacerlo. Debería poder simplemente poner el SVG en un cuerpo POST:
$.ajax('url',{ 'data': svg.outerHTML, 'type': 'POST', 'processData': false, 'contentType': 'image/svg+xml' }); Luego use $svgString = file_get_contents('php://input'); para obtener el contenido del cuerpo, esto le ahorra mucha codificación y decodificación. El resto depende de usted.