diff --git a/dist/image-editor.js b/dist/image-editor.js index df03a69..98e9430 100644 --- a/dist/image-editor.js +++ b/dist/image-editor.js @@ -1193,9 +1193,17 @@ function ImageDataHandler(img) { var dragAxis = img.canvas.getViewport().getData().axis; + var leftDiff = viewportBounds.left - img.left; + var topDiff = viewportBounds.top - img.top; + + // Robustness measure to handle the extreme precision of shape positioning in canvas. + var countAsZeroLimit = 1e-5; + leftDiff = Math.abs(leftDiff) < countAsZeroLimit ? 0 : leftDiff; + topDiff = Math.abs(topDiff) < countAsZeroLimit ? 0 : topDiff; + _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, + x: dragAxis === 'x' ? (leftDiff) / (img.width * img.scaleX) : 0, + y: dragAxis === 'y' ? (topDiff) / (img.height * img.scaleY) : 0, viewportWidth: viewportBounds.width, viewportHeight: viewportBounds.height, }; @@ -1792,8 +1800,8 @@ function Viewport(canvas) { fill: 'transparent', width: _data.width, height: _data.height, - stroke: '#fff', - strokeWidth: canvas.__type === 'canvas' ? 0 : _borderWidth + stroke: canvas.__type === 'canvas' ? 'transparent' : '#fff', + strokeWidth: _borderWidth, }); _rect.width += _borderWidth; diff --git a/src/ImageDataHandler.js b/src/ImageDataHandler.js index 603e56a..3656751 100644 --- a/src/ImageDataHandler.js +++ b/src/ImageDataHandler.js @@ -21,9 +21,17 @@ function ImageDataHandler(img) { var dragAxis = img.canvas.getViewport().getData().axis; + var leftDiff = viewportBounds.left - img.left; + var topDiff = viewportBounds.top - img.top; + + // Robustness measure to handle the extreme precision of shape positioning in canvas. + var countAsZeroLimit = 1e-5; + leftDiff = Math.abs(leftDiff) < countAsZeroLimit ? 0 : leftDiff; + topDiff = Math.abs(topDiff) < countAsZeroLimit ? 0 : topDiff; + _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, + x: dragAxis === 'x' ? (leftDiff) / (img.width * img.scaleX) : 0, + y: dragAxis === 'y' ? (topDiff) / (img.height * img.scaleY) : 0, viewportWidth: viewportBounds.width, viewportHeight: viewportBounds.height, }; diff --git a/src/Viewport.js b/src/Viewport.js index 2451acf..903f3cd 100644 --- a/src/Viewport.js +++ b/src/Viewport.js @@ -75,8 +75,8 @@ function Viewport(canvas) { fill: 'transparent', width: _data.width, height: _data.height, - stroke: '#fff', - strokeWidth: canvas.__type === 'canvas' ? 0 : _borderWidth + stroke: canvas.__type === 'canvas' ? 'transparent' : '#fff', + strokeWidth: _borderWidth, }); _rect.width += _borderWidth;