小编LVS*_*AJE的帖子

在我的页面上，我有一个按钮和一个具有以下属性的画布 -

<button onclick="openSVG()">Open</button>
<canvas></canvas>

单击按钮时，该openSVG()功能应该

• 让用户从他们的本地硬盘驱动器中选择并打开一个 SVG 文件（以前使用 FabricJS 创建）
• 使用 FileReader 读取 SVG 文件的内容并将其存储在变量中
• 使用该变量使用fabric.loadSVGFromString()方法填充画布

现在单击“打开”按钮会打开一个文件选择窗口，但不会将对象绘制到画布中。这是我的 openSVG() 函数 -

function openSVG() {

// importing file
var input = $(document.createElement('input'));
input.attr("id", "mySVGFile")
input.attr("type", "file");
input.trigger('click');

//storing file contents in var using FileReader
var myInputFile = document.getElementById('mySVGFile');
var myFile = myInputFile.files[0];

var fr = new FileReader();
fr.onload = function(){

    var canvasD = this.result;

    //loading data from var to canvas
    fabric.loadSVGFromString(canvasD, function(objects, options) {
        var obj = …