photowall/image-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Martin
2017-10-25 08:08:45 +02:00
parent 9f26886d42
commit 16a85b1431
4 changed files with 26 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.jshintrc
+1 -2
View File
@@ -12,8 +12,7 @@
"require": false, "require": false,
"strict": false, "strict": false,
"node": false, "node": false,
"ImageEditor": false, "ImageEditor": false
"sessionStorage": false
}, },
"browserify": false, "browserify": false,
"strict": false, "strict": false,
dist/image-editor.js
Vendored
+5 -5
View File
@@ -1129,28 +1129,28 @@ module.exports = GoreHandler;
function ImageDataHandler(img) { function ImageDataHandler(img) {
var _cropData;
/** /**
* Gets information about how the cropped image is dragged * Gets information about how the cropped image is dragged
* @return {Object} * @return {Object}
*/ */
this.getCropData = function () { this.getCropData = function () {
return JSON.parse(sessionStorage.getItem('cropData')); return _cropData;
}; };
this.setCropData = function() { this.setCropData = function() {
var viewportBounds = img.canvas.getViewport().getBounds(); var viewportBounds = img.canvas.getViewport().getBounds();
var dragAxis = img.canvas.getViewport().getData().axis; var dragAxis = img.canvas.getViewport().getData().axis;
var cropData = { _cropData = {
x: dragAxis === 'x' ? (viewportBounds.left - img.left) / (img.width * img.scaleX) : 0, x: dragAxis === 'x' ? (viewportBounds.left - img.left) / (img.width * img.scaleX) : 0,
y: dragAxis === 'y' ? (viewportBounds.top - img.top) / (img.height * img.scaleY) : 0, y: dragAxis === 'y' ? (viewportBounds.top - img.top) / (img.height * img.scaleY) : 0,
}; };
sessionStorage.setItem('cropData', JSON.stringify(cropData));
}; };
this.removeCropData = function() { this.removeCropData = function() {
sessionStorage.removeItem('cropData'); _cropData = null;
}; };
/** /**
examples/canvas/index.html
+15
View File
@@ -1,6 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<body> <body>
<p>X: <span id="pos-x"></span></p>
<p>Y: <span id="pos-y"></span></p>
<label>Width:</label> <label>Width:</label>
<input type="text" id="width" name="width" value="100" /> <input type="text" id="width" name="width" value="100" />
<label>Height:</label> <label>Height:</label>
@@ -21,6 +26,8 @@
var width = document.getElementById('width'); var width = document.getElementById('width');
var height = document.getElementById('height'); var height = document.getElementById('height');
var frame = document.getElementById('frame'); var frame = document.getElementById('frame');
var posX = document.getElementById('pos-x');
var posY = document.getElementById('pos-y');
var editor = new ImageEditor('image-editor', { var editor = new ImageEditor('image-editor', {
type: 'canvas' type: 'canvas'
@@ -34,6 +41,12 @@
editor.canvas.getViewport().setFrame(frame.value); editor.canvas.getViewport().setFrame(frame.value);
} }
function showCoordinates() {
var data = editor.canvas.getImageData().getData();
posX.innerText = data.x;
posY.innerText = data.y;
}
function resizeEditor() { function resizeEditor() {
var isFullscreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement; var isFullscreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
if(isFullscreen) { if(isFullscreen) {
@@ -48,10 +61,12 @@
height.addEventListener('keyup', cropImage); height.addEventListener('keyup', cropImage);
frame.addEventListener('change', setFrame); frame.addEventListener('change', setFrame);
window.addEventListener('resize', resizeEditor); window.addEventListener('resize', resizeEditor);
$(document).on('PIE:dragged', showCoordinates);
//load the image (needs to be an remote image for 3D to work) //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() { editor.loadImage('http://images.photowall.com/products/42229.jpg?h=450', function() {
cropImage(); cropImage();
showCoordinates();
}); });
</script> </script>
src/ImageDataHandler.js
+5 -5
View File
@@ -2,28 +2,28 @@
function ImageDataHandler(img) { function ImageDataHandler(img) {
var _cropData;
/** /**
* Gets information about how the cropped image is dragged * Gets information about how the cropped image is dragged
* @return {Object} * @return {Object}
*/ */
this.getCropData = function () { this.getCropData = function () {
return JSON.parse(sessionStorage.getItem('cropData')); return _cropData;
}; };
this.setCropData = function() { this.setCropData = function() {
var viewportBounds = img.canvas.getViewport().getBounds(); var viewportBounds = img.canvas.getViewport().getBounds();
var dragAxis = img.canvas.getViewport().getData().axis; var dragAxis = img.canvas.getViewport().getData().axis;
var cropData = { _cropData = {
x: dragAxis === 'x' ? (viewportBounds.left - img.left) / (img.width * img.scaleX) : 0, x: dragAxis === 'x' ? (viewportBounds.left - img.left) / (img.width * img.scaleX) : 0,
y: dragAxis === 'y' ? (viewportBounds.top - img.top) / (img.height * img.scaleY) : 0, y: dragAxis === 'y' ? (viewportBounds.top - img.top) / (img.height * img.scaleY) : 0,
}; };
sessionStorage.setItem('cropData', JSON.stringify(cropData));
}; };
this.removeCropData = function() { this.removeCropData = function() {
sessionStorage.removeItem('cropData'); _cropData = null;
}; };
/** /**