將 SVG 標簽內的圖像發送到服務器 - JavaScript

Question

在客戶端，我有一個 svg 元素，在該元素下有一個圖像和該圖像上的一些文字（所以它看起來像一張帶有文字的海報）。 我需要將這張海報作為一個整體發送到服務器。 HTML 看起來像這樣：

    <svg id="poster_svg" width="1000" height="1000" style="max-width: 100%;">
    <image href="/static/images/motiv1.jpg" width="100%" height="100%"/>
    <p class="centered" id="poster_text"></p>
    </svg>

p中的文本是由其他一些用戶操作生成的。 我在網上找到了一個教程，它將 svg 元素轉換為 base64，然后我可以使用它通過 POST 請求發送到服務器。

它的 JavaScript 代碼是：

var SVGDomElement = document.getElementById("poster_svg");
var serializedSVG = new XMLSerializer().serializeToString(SVGDomElement);
var base64Data = window.btoa(serializedSVG);

const json = {
    image: base64Data
};
const options = {
    method: "POST",
    body: JSON.stringify(json),
    headers:{
        'Content-Type':'application/json'
    }
};

fetch('/makeposter',options).then(res=>{
    return res.json()
}).then(cont=>{
    console.log(cont)
});

在服務器端（使用 Flask），base64 被成功接收，但是當轉換為圖像時，它是空白的。 將 base64 轉換為圖像的服務器代碼是這樣的：

cont = request.get_json()
imgb64 = cont['image']
decoded = base64.b64decode(imgb64)
f=open("test.png","wb")
f.write(decoded)
f.close()

為什么圖像是空白的，我該如何解決？

Answer 1

base64 編碼不會神奇地將 SVG 轉換為 PNG。 在服務器上解碼后，結果仍然是一個字符串，其內容仍然是您為客戶端引用的相同的序列化 SVG。

這包括圖像標簽仍然只包含對 JPG 文件的引用，而不是文件內容本身的事實。 您需要確保該文件的相對路徑在服務器端執行的上下文中仍然有效。

最后，如果要將結果從 SVG 轉換為 PNG，則需要一些軟件來完成實際工作。 我不知道您將如何使用 Flask 來了解 go。

您也可以在客戶端進行轉換，例如，請參閱此問題以獲取操作方法。 只需將下載的 function 與上傳的 function 交換即可。 但請注意，有一個嚴重的警告：SVG 中的<image> href必須指向與執行此操作的頁面相同的域，否則導出將被阻止。

除了在 SVG 內容中直接使用 HTML <p>標記之外，它不起作用。 您必須使用<text>元素。