P5-1852 x/y coordinates are no longer stored in sessionStorage

2017-10-25 08:08:45 +02:00
parent 9f26886d42
commit 16a85b1431
4 changed files with 26 additions and 12 deletions
@@ -1,6 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
    <body>
+
+        <p>X: <span id="pos-x"></span></p>
+        <p>Y: <span id="pos-y"></span></p>
+
+
        <label>Width:</label>
        <input type="text" id="width" name="width" value="100" />
        <label>Height:</label>
@@ -21,6 +26,8 @@
            var width = document.getElementById('width');
            var height = document.getElementById('height');
            var frame = document.getElementById('frame');
+            var posX = document.getElementById('pos-x');
+            var posY = document.getElementById('pos-y');

            var editor = new ImageEditor('image-editor', {
                type: 'canvas'
@@ -34,6 +41,12 @@
                editor.canvas.getViewport().setFrame(frame.value);
            }

+            function showCoordinates() {
+                var data = editor.canvas.getImageData().getData();
+                posX.innerText = data.x;
+                posY.innerText = data.y;
+            }
+
            function resizeEditor() {
                var isFullscreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
                if(isFullscreen) {
@@ -48,10 +61,12 @@
            height.addEventListener('keyup', cropImage);
            frame.addEventListener('change', setFrame);
            window.addEventListener('resize', resizeEditor);
+            $(document).on('PIE:dragged', showCoordinates);

            //load the image (needs to be an remote image for 3D to work)
            editor.loadImage('http://images.photowall.com/products/42229.jpg?h=450', function() {
                cropImage();
+                showCoordinates();
            });

        </script>