Django模板标签+使用fabric.js答案

【问题标题】：Django template tags + using fabric.jsDjango模板标签+使用fabric.js
【发布时间】：2017-09-16 18:54:22
【问题描述】：

我已经建立了一个合理的 Django 站点来测试和使用，但是我在包含 fabric.js 的时候过得很糟糕

最终我想使用 fabric.js 从数据库中获取小图像并将它们显示在画布上，但我离题了。

我遇到的问题是，我无法使用 fabric.js 在我的 html 中使用本地 png 图像——我的意思是，包括了织物（因为我可以用织物做非常基本的技巧，比如创建矩形）但是，教程并不清楚是否包含本地图像。

这是我糟糕的代码：

<!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>

可能是在做一些无聊的事情，所以提前道歉。

【问题讨论】：

标签： javascript django fabricjs

【解决方案1】：

在您的 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>

【讨论】：