将 SVG 元素转成 dataUrl

首先需要有一段 svg 代码：直接百度找了一个

<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="40" fill="red" stroke="%23ededed" stroke-width="3"/></svg>

 

使用  window.btoa(svg) ：

 

增加前缀：

 

完成：

 

效果：

 

 代码：

    /**
     * 第一种方法，url
     * 异步加载性能最好
     * url 可以是下载 url， 也可以是 dataUrl (data:image/jpg;base64,...)
     */
    methodOne(canvas) {
        let url = this.test(); // 测试
        new fabric.Image.fromURL(url, (img) => {
            img.set(Image.defaultImage(canvas, img));
            canvas.add(img);
            img.center();
            img.sendBackwards();
        });
    }

    test() {
        let svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"-10 -18 100 135\"><circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" stroke=\"%23ededed\" stroke-width=\"3\"/></svg>";
        return 'data:image/svg+xml;base64,' + window.btoa(svg);
    }

 

 

https://www.jianshu.com/p/68b909620380