Django的模板標籤+使用fabric.js

我已經建立了一個合理的Django的現場測試和玩，但我有一個可怕的時間，包括fabric.jsDjango的模板標籤+使用fabric.js

最後，我想用面料。 js從數據庫中提取小圖片並將其顯示在畫布上，但我離題了。

我遇到的問題是，我不能在我的html中使用本地PNG圖像使用fabric.js - 我的意思是，包括織物（因爲我可以做與織物非常基本的技巧，如創建矩形）但是，本教程不清楚包含本地圖像。

這裏是我的可怕代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
     <title>This is using render</title> 
    {% load staticfiles %} 
    <script scr="{% static "js/fabric.js" %}" type="text/javascript"></script> 
</head> 


<body> 


<script type="text/javascript"> 
var canvas = new fabric.Canvas('c'); 
canvas.setHeight(480); 
canvas.setWidth(640); 
var imgElement = fabric.Image.fromURL('../static/images/pitch.png', function(oImg) { 
    canvas.add(oImg); 
}); 

var imgInstance = new fabric.Image(imgElement, { 
    left: 100, 
    top: 100, 
    angle: 90, 
    opacity: 0.85 
}); 
canvas.add(imgInstance); 

</script> 


</body> 
</html>

可能做一些noobish，所以道歉提前。

來源

2017-09-16 charliedontsurf

在HTML 添加圖像元素（和ID得到它）使用不必加載它的fabric.Image.fromURL()

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <title>This is using render</title> {% load staticfiles %} 
    <script src="{% static "js/fabric.js" %}" type="text/javascript"></script> 
</head> 

<body> 
    <canvas id="c"></canvas> 
    <img id="imgElement" src="../static/images/pitch.png" hidden> 

    <script type="text/javascript"> 
     var canvas = new fabric.Canvas('c'); 
     canvas.setHeight(480); 
     canvas.setWidth(640); 

     var imgInstance = new fabric.Image(imgElement, { 
      left: 100, 
      top: 100, 
      angle: 90, 
      opacity: 0.85 
     }); 
     canvas.add(imgInstance); 
    </script> 
</body> 

</html>

來源

2017-09-16 10:54:22

Django的模板標籤+使用fabric.js

回答

相關問題