imageEditorFabric.html 3.27 KB
Newer Older
bbaer's avatar
bbaer committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="../css/jqx.base.css">
    <link rel="stylesheet" href="../css/jqx.bootstrap.css">
    <link rel="stylesheet" href="../extension/Resources/Public/Css/qfq-bs.css">
    <title>Input Mode Switcher</title>

</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-10 ">
            <div class="btn-toolbar pull-right" role="toolbar">
                <div class="btn-group" role="group">
                    <button id="save-button" type="button" class="btn btn-default navbar-btn"><span
                            class="glyphicon glyphicon-ok"></span></button>
                    <button id="close-button" type="button" class="btn btn-default navbar-btn"><span
                            class="glyphicon glyphicon-remove"></span></button>
                </div>
                <div class="btn-group" role="group">
                    <button id="delete-button" type="button" class="btn btn-default navbar-btn"><span
                            class="glyphicon glyphicon-trash"></span></button>
                </div>
                <div class="btn-group" role="group">
                    <a id="form-new-button" href="personmock.html?s=badcaffe1" class="btn btn-default navbar-btn"><span
                            class="glyphicon glyphicon-plus"></span></a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
41
42
43
            <div class="fabric"
                 data-buttons="mockData/fabric.editor.buttons.json"
                 data-edit-image="true"
bbaer's avatar
bbaer committed
44
                 data-background-image="mockData/Scan2a.jpeg"
bbaer's avatar
bbaer committed
45
46
47
                 data-control-name='fabric-output'
                 data-image-resize-width="1200"
                 data-image-output="target-png">
48
            </div>
bbaer's avatar
bbaer committed
49
            <input id="fabric-output" name="fabric-data" type="hidden">
bbaer's avatar
bbaer committed
50
        </div>
51
52
53
        <div class="col-md-8">
            <img id="target-png">
        </div>
bbaer's avatar
bbaer committed
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
    </div>
</div>

<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/fabric.min.js"></script>
<script src="../js/validator.min.js"></script>
<script src="../js/jqx-all.js"></script>
<script src="../js/EventEmitter.min.js"></script>
<script src="../js/qfq.debug.js"></script>
<script src="../javascript/src/Plugins/qfq.fabric.js"></script>

<script type="text/javascript">
    $(function () {
        var qfqPage = new QfqNS.QfqPage({
            tabsId: 'myTabs',
            formId: 'myForm',
            submitTo: 'api/' + $("#submitTo").val(),
            deleteUrl: 'api/' + $("#deleteUrl").val(),
            fileUploadTo: 'api/' + $("#uploadTo").val(),
            fileDeleteUrl: 'api/' + $("#fileDeleteUrl").val()
        });

        QfqNS.Log.level = 0;
        // Just for mockup, init() function called from new QfqNS.Plugin class maybe.
        var qfqFabric = new QfqNS.Fabric();
        qfqFabric.initialize($(".fabric"));
    });
</script>
</body>
</html>