我有一個 img 元素，他的 src 屬性是一個 svg url 檔案。
我可以得到這個img dom 元素，但是我想得到這個檔案內容，并且不能使用ajax。
謝謝！例子：
<svg>
<rect> </rect>
</svg>
這是我的代碼。
<!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>
這是我的場景！我不能使用ajax，因為我在'ondrop'事件中無法獲取'ondragstart'的異步設定的資料。
<!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>
uj5u.com熱心網友回復：
鑒于您的專案，似乎以相反的方式進行操作會更有意義：
- 獲取資源
- 將其作為文本閱讀
- 在影像中加載獲取的資源（作為 blob：URL）
這樣，當您開始拖動元素時，您已經有了它們的標記版本：
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>uj5u.com熱心網友回復：
假設需要拖放的是已經顯示的 SVG 影像，這可能是一個示例。只有影像的 id 被“傳輸”，并且在 drop 事件中，影像是使用 src 屬性獲取的。
在 fetch 函式的回呼中，我創建了一個 XML 檔案，在這種情況下，只需在控制臺中列印出根元素。
在此示例中，我使用資料 URI 作為影像源，但可以將其替換為您自己影像的 URL。
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/432807.html
標籤：javascript html svg