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,
"strict": false,
"node": false,
"ImageEditor": false,
"sessionStorage": false
"ImageEditor": false
},
"browserify": false,
"strict": false,
dist/image-editor.js
Vendored
+5 -5
View File
@@ -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;
};
/**
examples/canvas/index.html
+15
View File
@@ -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>
src/ImageDataHandler.js
+5 -5
View File
@@ -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;
};
/**