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>
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>Given your project it seems like it would make a lot more sense to do it the other way around:
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>