FabricJS loadSVGFromURL() не работает на localhost

Я знаю, что эта проблема несколько связана с происхождением файла. Когда я выставляю скрипку с защищенного URL-адреса, она не работает (https://jsfiddle.net/fccarminati/c7f53g9j/). Однако, если я получаю доступ к нему из небезопасного URL-адреса, он делает (http://jsfiddle.net/fccarminati/c7f53g9j/).FabricJS loadSVGFromURL() не работает на localhost

Теперь, пытаясь сделать эту работу локально, я поставил сервер Apache для размещения моих файлов. Это не дает мне ошибку кросс-оригинала на консоли, но она также не импортирует svg.

HTML:

<!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="bower_components/jquery/dist/jquery.min.js"></script> 
    <script src="js/fabric.js"></script> 
    <script src="js/test.js"></script> 
</body> 
</html>

var canvas = new fabric.Canvas('c'); 

//add sticker 
$('#btnAddSVG').on('click', function(){ 

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

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

    }); 

});

Кто-нибудь знает, что другие проблемы, которые я должен смотреть в?

источник

2017-02-10 Felipe Carminati

Я не хватает репутации комментировать, так что ...

Когда я положил на скрипку из защищенного URL, он не работает (https://jsfiddle.net/fccarminati/c7f53g9j/)

Ваш Файл SVG-файла должен использовать HTTPS. Итак, попробуйте изменить на https://fabricjs.com/assets/1.svg в исходном файле js. Возможно, он не работает в первый раз. Кроме того, вы должны попробовать open the url on new tab of your browser и принять предупреждения о безопасности.

«Теперь при попытке сделать эту работу на местном уровне, ...»

Я пытаюсь запустить его локально и обновлять этот ответ. (? Но, на всякий случай, его не проблема "PORT 81", право Ваш апач работает по адресу: 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-файла.

источник

2017-02-10 17:26:38 leonardomerlin

Оказывается, это не проблема с файлом. Это был импорт ткани. Я использовал вашу ссылку cdnjs, и это сработало. Я загрузил файл с веб-сайта fabricjs, но, похоже, с ним проблема. Я посмотрю. Спасибо!! –

FabricJS loadSVGFromURL() не работает на localhost

ответ

Смежные вопросы