cornerstone/example/flip&rotation/index.html at master · bruceliu2008/cornerstone · GitHub

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
41
42
43
44
45
46
47
48
49
50
51
52
53
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE HTML>
<html>
<head>
    <!-- twitter bootstrap CSS stylesheet - not required by cornerstone -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- cornerstone css - provides some useful css classes -->
    <link href="../cornerstone.css" rel="stylesheet">

</head>
<body>
<div class="container">

<h1>
    fliprotate/index.html
</h1>

This is an example of image flips and rotations

<br>
<br>

In this example,the image can be flipped (Horizontal/Vertical) or rotated (Clockwise/Anti-clockwise)
<br>
<br>

    <button id="hFlip" type="button" class="btn btn-default">HFlip</button>
    <button id="vFlip" type="button" class="btn btn-default">VFlip</button>
    <button id="lRotate" type="button" class="btn btn-default">Rotate Left</button>
    <button id="rRotate" type="button" class="btn btn-default">Rotate Right</button>
    <button id="reset" type="button" class="btn btn-default">Reset</button>
            <div id="dicomImage" style="width:512px;height:512px"
            class="cornerstone-enabled-image"
            oncontextmenu="return false"
            unselectable='on'
            onselectstart='return false;'
            onmousedown='return false;'>
            </div>
            <div><span id="coords"></span></div>


            </div>
            </body>

                <!-- cornerstone depends on jQuery so it must be loaded first-->
            <script src="../jquery.min.js"></script>

<!-- include the cornerstone library -->
<script src="../../dist/cornerstone.js"></script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageIdLoader.js"></script>

<script>
    $(document).ready(function() {

        // image enable the dicomImage element
        var element = $('#dicomImage').get(0);
        cornerstone.enable(element);

        //load the image and display it
        var imageId = 'example://1';
        cornerstone.loadImage(imageId).then(function(image) {
            cornerstone.displayImage(element, image);
        });

        // Add event handlers to flip or rotate the image
        $('#hFlip').click(function (e) {
            var viewport = cornerstone.getViewport(element);
            viewport.hflip = !viewport.hflip;
            cornerstone.setViewport(element, viewport);
        });

        $('#vFlip').click(function (e) {
            var viewport = cornerstone.getViewport(element);
            viewport.vflip = !viewport.vflip;
            cornerstone.setViewport(element, viewport);
        });

        $('#lRotate').click(function (e) {
            var viewport = cornerstone.getViewport(element);
            viewport.rotation-=90;
            cornerstone.setViewport(element, viewport);
        });

        $('#rRotate').click(function (e) {
            var viewport = cornerstone.getViewport(element);
            viewport.rotation+=90;
            cornerstone.setViewport(element, viewport);
        });

        $('#reset').click(function (e) {
            cornerstone.reset(element);
        });
        $(element).mousemove(function(event)
        {
            var pixelCoords = cornerstone.pageToPixel(element, event.pageX, event.pageY);
            var x = event.pageX;
            var y = event.pageY;
            $('#coords').text("pageX=" + event.pageX + ", pageY=" + event.pageY + ", pixelX=" + pixelCoords.x + ", pixelY=" + pixelCoords.y);
        });
    });

</script>
</html>