From 3470fd8232d435af6ee3ba5d7002008f9df1b5dd Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Tue, 4 Feb 2020 09:02:21 -0500 Subject: [PATCH] Prevent rounding error when getting image data. This was causing a crash on Safari. See #966 for more details. --- src/components/loupe/loupe.jsx | 11 ++++++++++- src/helper/tools/eye-dropper.js | 4 ++-- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/loupe/loupe.jsx b/src/components/loupe/loupe.jsx index 02a41901..8aadbf38 100644 --- a/src/components/loupe/loupe.jsx +++ b/src/components/loupe/loupe.jsx @@ -41,7 +41,16 @@ class LoupeComponent extends React.Component { const imageData = tmpCtx.createImageData( loupeDiameter, loupeDiameter ); - imageData.data.set(this.props.colorInfo.data); + + // Since the color info comes from elsewhere there is no guarantee + // about the size. Make sure it matches to prevent data.set from throwing. + // See issue #966 for example of how that can happen. + if (this.props.colorInfo.data.length === imageData.data.length) { + imageData.data.set(this.props.colorInfo.data); + } else { + console.warn('Image data size mismatch drawing loupe'); // eslint-disable-line no-console + } + tmpCtx.putImageData(imageData, 0, 0); // Scale the loupe canvas and draw the zoomed image diff --git a/src/helper/tools/eye-dropper.js b/src/helper/tools/eye-dropper.js index cc681f7d..44750915 100644 --- a/src/helper/tools/eye-dropper.js +++ b/src/helper/tools/eye-dropper.js @@ -99,8 +99,8 @@ class EyeDropperTool extends paper.Tool { y: y, color: colors.data, data: bufferContext.getImageData( - (artX * ZOOM_SCALE) - (LOUPE_RADIUS * ZOOM_SCALE), - (artY * ZOOM_SCALE) - (LOUPE_RADIUS * ZOOM_SCALE), + ZOOM_SCALE * (artX - LOUPE_RADIUS), + ZOOM_SCALE * (artY - LOUPE_RADIUS), LOUPE_RADIUS * 2 * ZOOM_SCALE, LOUPE_RADIUS * 2 * ZOOM_SCALE ).data,