Question

我知道这个问题与文件来源有些关系。当我从安全URL中提出一个小提琴时，它不起作用（https://jsfiddle.net/fccarminati/c7f53g9j/）。但是，如果我从非安全网址访问它（http://jsfiddle.net/fccarminati/c7f53g9j/）。

现在，当我尝试在本地工作时，我建立了一个Apache服务器来托管我的文件。它没有在控制台上给我一个跨源错误，但它也没有正确导入svg。

HTML：

public Integer totalFat()
    {
        repo repo = new repo(this);

        double i = repo.totalFatrepo();

        Textbreakfast.setText(""+i);

        return null;
    }

JS

public double totalFatrepo(){

        SQLiteDatabase db = dbHelper.getWritableDatabase();

        String query = "SELECT SUM(Fat) FROM " + breakfast.TABLE;

        Cursor c = db.rawQuery(query, null);

        //Add in the movetofirst etc here? see SO
        c.moveToFirst();
        double i=c.getDouble(0);

        return i;

    }

有谁知道我应该研究哪些其他问题？

Answer 1

我没有足够的声誉来评论，所以......

当我从安全网址中提出一个小提琴时，它不起作用（https://jsfiddle.net/fccarminati/c7f53g9j/）

您的SVG文件网址必须使用HTTPS。因此，尝试在js源文件中更改为https://fabricjs.com/assets/1.svg。它可能不是第一次工作。此外，您必须尝试open the url on new tab of your browser并接受安全警告。

＆＃34;现在尝试在本地工作时，......＆＃34;

~~我会尝试在本地运行它并更新此答案。（但是，以防万一，它不是＆＃34; PORT 81＆＃34;问题，对吗？你的apache运行在：81？）~~

[UPDATE] 你的代码LGTM。我这样做了（并且有效）：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <button id="btnAddSVG" type="button" class="btn btn-default">Add SVG</button>
    <canvas width="800" height="600" id="c"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.3/fabric.min.js" integrity="sha256-BeLYOR7hF1X4xXnJJkOvwf2nNkZK9Fe2OJgoa2/maqA=" crossorigin="anonymous"></script>
    <script>
        var canvas = new fabric.Canvas('c');
        //add sticker
        $('#btnAddSVG').on('click', function(){

            fabric.loadSVGFromURL('http://0.0.0.0:8000/1.svg', function(objects) { 
                var group = new fabric.PathGroup(objects, { 
                    left: 100, 
                    top: 100, 
                    width: 150, 
                    height: 150 
                });

                canvas.add(group); 
                canvas.renderAll(); 

            }); 

        });
    </script>
</body>
</html>

注意URL /文件路径。就我而言，我的服务器运行在localhost：8000，而SVG位于html文件的同一个文件夹中。

FabricJS loadSVGFromURL（）无法在localhost上运行

1 个答案: