將 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