Не работает код вставки изображения на fabric.js

209

02 мая 2018, 04:45

Имеется код из офф документации fabric.js. Со вставкой изображения. Но он не работает. Вместо этого у меня пустая страница. Все пути проверил. Все верно. Консоль пустая.

<!doctype html> 
<html> 
<head> 
    <title>curveExample</title> 
    <meta charset='utf-8' /> 
</head> 
<body> 
<script src="fabric/dist/fabric.min.js"></script> 
<canvas id="c"></canvas> 
<img src="long-arrow-down.png" id="my-image" style="height: 100px; width: 100px"> 
<script> 
var canvas = new fabric.Canvas('c'); 
var imgElement = document.getElementById('my-image'); 
var imgInstance = new fabric.Image(imgElement, { 
left: 100, 
top: 100, 
angle: 100, 
opacity: 0.85 
}); 
canvas.add(imgInstance); 
</script> 
 
 
<!--<script src="teat.js"></script>--> 
</body> 
</html>

в чем может быть проблема?

Answer 1

Русскоязычное руководство похоже устарело,смотрите лучше примеры в Demo на сайте.Скрипты подключать лучше перед закрывающим тегом BODY. Вот пример вставки картинки:

    <!doctype html>
    <html>
    <head>
        <title>curveExample</title>
        <meta charset='utf-8' />
    </head>
    <body>
    <canvas id="c" width="500" height="500"></canvas>
    <script 
    src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.min.js"> 
    </script>
    <script>
     (function() {
    var canvas = new fabric.Canvas('c');
    fabric.Image.fromURL('http://fabricjs.com/lib/pug.jpg', function(img) {
    canvas.add(img.set({ left: 0, top: 0 }).scale(1));
   });
   })()
    </script>
    </body>
    </html>