Question

我想将我为Web画布编写的一些代码转置到我的本地应用程序中。我的目标是获取服务器上svg文件的内容，获取字符串，替换字符串中的某些元素（颜色代码），然后为“ img.src”赋予以“ data：image”开头的字符串值/ svg + xml; charset = utf-8”。

在普通画布上效果很好，但在我的本机应用程序上效果不佳。

两件事发生了变化： 1）我使用的是fetch（）而不是jQuery $ .get（）-我认为这没关系 2）我不能使用XMLSerializer（）。所以我尝试了几种XML解析库（react-xml-parser，xmldom），但是没有用。

我比较了我的网站和我的本机应用程序之间的字符串。主要区别在于该网站显示的代码类似于“％0A”和“％09”，而不是在应用程序上显示的换行符和制表符。我尝试用String.replace手动替换这些字符，但我不知道为什么，所有列表都没有被替换，并且字符串仍然不同。

fetch(svgFileAddress, {
    method: 'GET'
})
.then(response => response.text())
.then((svgString) => {

    var img = new CanvasImage(canvas);

    // Here, I want to replace some colors codes in the string, but I'm trying without it for now

    img.src = "data:image/svg+xml;charset=utf-8,"+svgString;

    img.onload = function() {
        console.log('image was drawn');
    ctx.drawImage(img, 0, 0);
};
});

预期结果：图像应显示在画布上。不是。

通过将字符串放在img.src

0 个答案: