• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

238
Vistas
I want to get file content by img element isn't async, (src is svg)

I have a img element , his src attribute is a svg url file.
I can get this img dom element, but I want to get this file content, and can't use ajax.
thanks! example:

<svg>
<rect> </rect>
</svg>

this is my code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img id="testImg" src="logo.svg" alt="">

    <script>
        const img = document.getElementById('testImg');

        console.log('img', [img]);
    </script>
</body>
</html>

This is my scene! I can't use ajax because I can't get the data of the asynchronous setting of 'ondragstart' in the 'ondrop' event.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <img id="img" draggable="true" src="logo.png" width="50px" height="50px" />

    <div
      id="div"
      style="background-color: #123; width: 400px; height: 300px;"
    ></div>
    <script>
      const img = document.getElementById('img');
      img.addEventListener('dragstart', function(e) {
        const src = e.target.src;
        console.log(src);

        axios.get(src).then(function(res) {
          console.log(res.data);
          e.dataTransfer.setData('text/plain', res.data);
        });

      });

      const div = document.getElementById('div');
      div.addEventListener('dragover', function(e) {
        e.preventDefault();
      });
      div.ondrop = function(e) {
        const data = e.dataTransfer.getData('text/plain');
        console.log(data);
      };
    </script>
  </body>
</html>
about 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

Assuming that it is the already displayed SVG image that needs to be dragged and dropped this could be an example. It is only the id of the image that is "transferred" and on the drop event the images is fetched using the src attribute.

In the callback of the fetch function I create a XML document and in this case just print out the root element in the console.

In this example I use a data URI for the images source, but this can just be replaced by your URL to your own image.

const img = document.getElementById('img');
img.addEventListener('dragstart', function(e) {
  const id = e.target.id;
  e.dataTransfer.setData('text/plain', id);
});

const div = document.getElementById('div');

div.addEventListener('dragover', function(e) {
  e.preventDefault();
});

div.addEventListener('drop', function(e) {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  
  let img = document.getElementById(id);
  
  fetch(img.src).then(res => res.text()).then(text => {
    let parser = new DOMParser();
    let svg = parser.parseFromString(text, "text/xml");
    console.log(svg.rootElement.outerHTML);
  });
  
});
<img id="img" draggable="true" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDIgMiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIj48Y2lyY2xlIHI9IjEiIGN4PSIxIiBjeT0iMSIgZmlsbD0icmVkIi8+PC9zdmc+" width="50px" height="50px"/>
<div id="div" style="background-color: #123; width: 400px; height: 300px;"></div>

about 3 years ago · Juan Pablo Isaza Denunciar

0

Given your project it seems like it would make a lot more sense to do it the other way around:

  • Fetch the resource
  • Read it as text
  • Load the fetched resource in the images (as a blob: URL)

This way, when you start dragging your elements around you already have their markup version:

const images = document.querySelectorAll("img[data-src]");
images.forEach( async (img) => {
  // we store the actual src in a data- attribute
  // we will only fetch it from here
  const resp = await fetch(img.getAttribute("data-src"));
  const as_blob = resp.ok && await resp.blob();
  // read as text to get the markup
  const markup = await as_blob.text();
  // create a blob: URL so we can display the image
  const url = URL.createObjectURL(as_blob);
  img.src = url;
  // once the image is loaded we can revoke the blob: URL
  // this will allow the Blob to be Garbage Collected
  img.addEventListener("load", (evt) => URL.revokeObjectURL(url), {
    once: true
  });
  img.addEventListener("dragstart", (evt) =>
    evt.dataTransfer.setData("text/plain", markup)
  );
});

const div = document.getElementById("div");
div.addEventListener("dragover", (evt) => evt.preventDefault() );

div.ondrop = (evt) => {
  const data = evt.dataTransfer.getData('text/plain');
  console.log(data);
};
<img id="img" draggable="true" data-src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Commons-logo.svg" width="50px" height="50px" />

<div id="div" style="background-color: #123; width: 400px; height: 300px;"></div>

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda