diff --git a/.jshintrc b/.jshintrc index 3158d98..f49675e 100644 --- a/.jshintrc +++ b/.jshintrc @@ -12,8 +12,7 @@ "require": false, "strict": false, "node": false, - "ImageEditor": false, - "sessionStorage": false + "ImageEditor": false }, "browserify": false, "strict": false, diff --git a/dist/image-editor.js b/dist/image-editor.js index 54f8a04..4d85039 100644 --- a/dist/image-editor.js +++ b/dist/image-editor.js @@ -1129,28 +1129,28 @@ module.exports = GoreHandler; function ImageDataHandler(img) { + var _cropData; + /** * Gets information about how the cropped image is dragged * @return {Object} */ this.getCropData = function () { - return JSON.parse(sessionStorage.getItem('cropData')); + return _cropData; }; this.setCropData = function() { var viewportBounds = img.canvas.getViewport().getBounds(); var dragAxis = img.canvas.getViewport().getData().axis; - var cropData = { + _cropData = { x: dragAxis === 'x' ? (viewportBounds.left - img.left) / (img.width * img.scaleX) : 0, y: dragAxis === 'y' ? (viewportBounds.top - img.top) / (img.height * img.scaleY) : 0, }; - - sessionStorage.setItem('cropData', JSON.stringify(cropData)); }; this.removeCropData = function() { - sessionStorage.removeItem('cropData'); + _cropData = null; }; /** diff --git a/examples/canvas/index.html b/examples/canvas/index.html index 0c8fbac..951e8ac 100644 --- a/examples/canvas/index.html +++ b/examples/canvas/index.html @@ -1,6 +1,11 @@ + +

X:

+

Y:

+ + @@ -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(); }); diff --git a/src/ImageDataHandler.js b/src/ImageDataHandler.js index 825a71b..f1613f1 100644 --- a/src/ImageDataHandler.js +++ b/src/ImageDataHandler.js @@ -2,28 +2,28 @@ function ImageDataHandler(img) { + var _cropData; + /** * Gets information about how the cropped image is dragged * @return {Object} */ this.getCropData = function () { - return JSON.parse(sessionStorage.getItem('cropData')); + return _cropData; }; this.setCropData = function() { var viewportBounds = img.canvas.getViewport().getBounds(); var dragAxis = img.canvas.getViewport().getData().axis; - var cropData = { + _cropData = { x: dragAxis === 'x' ? (viewportBounds.left - img.left) / (img.width * img.scaleX) : 0, y: dragAxis === 'y' ? (viewportBounds.top - img.top) / (img.height * img.scaleY) : 0, }; - - sessionStorage.setItem('cropData', JSON.stringify(cropData)); }; this.removeCropData = function() { - sessionStorage.removeItem('cropData'); + _cropData = null; }; /**