diff --git a/e2e/tests/image.magic-wand.test.js b/e2e/tests/image.magic-wand.test.js index d377e0afe..64a5edd1b 100644 --- a/e2e/tests/image.magic-wand.test.js +++ b/e2e/tests/image.magic-wand.test.js @@ -158,10 +158,9 @@ Scenario('Make sure the magic wand works in a variety of scenarios', async funct I.say('Unselecting last magic wand region'); I.pressKey('Escape'); - // @todo currently gallery doesn't work well with CORS, so this is not covered by test // Change to the false color view, zoom in, and magic wand with a new class. - // I.say('Changing to false-color view'); - // I.click('[class*="gallery--"] img[src*="false_color"]'); + I.say('Changing to false-color view'); + I.click('[class*="gallery--"] img[src*="false_color"]'); I.say('Zooming in'); I.click('button[aria-label="zoom-in"]'); diff --git a/src/tags/object/Image.js b/src/tags/object/Image.js index b8e7dba3c..7aef7d56f 100644 --- a/src/tags/object/Image.js +++ b/src/tags/object/Image.js @@ -34,22 +34,22 @@ import { FF_DEV_3377, FF_DEV_3666, FF_DEV_4081, isFF } from '../../utils/feature * @name Image * @meta_title Image Tags for Images * @meta_description Customize Label Studio with the Image tag to annotate images for computer vision machine learning and data science projects. - * @param {string} name - Name of the element - * @param {string} value - Data field containing a path or URL to the image - * @param {boolean} [smoothing] - Enable smoothing, by default it uses user settings - * @param {string=} [width=100%] - Image width - * @param {string=} [maxWidth=750px] - Maximum image width - * @param {boolean=} [zoom=false] - Enable zooming an image with the mouse wheel - * @param {boolean=} [negativeZoom=false] - Enable zooming out an image - * @param {float=} [zoomBy=1.1] - Scale factor - * @param {boolean=} [grid=false] - Whether to show a grid - * @param {number=} [gridSize=30] - Specify size of the grid - * @param {string=} [gridColor="#EEEEF4"] - Color of the grid in hex, opacity is 0.15 - * @param {boolean} [zoomControl=false] - Show zoom controls in toolbar - * @param {boolean} [brightnessControl=false] - Show brightness control in toolbar - * @param {boolean} [contrastControl=false] - Show contrast control in toolbar - * @param {boolean} [rotateControl=false] - Show rotate control in toolbar - * @param {boolean} [crosshair=false] - Show crosshair cursor + * @param {string} name - Name of the element + * @param {string} value - Data field containing a path or URL to the image + * @param {boolean} [smoothing] - Enable smoothing, by default it uses user settings + * @param {string=} [width=100%] - Image width + * @param {string=} [maxWidth=750px] - Maximum image width + * @param {boolean=} [zoom=false] - Enable zooming an image with the mouse wheel + * @param {boolean=} [negativeZoom=false] - Enable zooming out an image + * @param {float=} [zoomBy=1.1] - Scale factor + * @param {boolean=} [grid=false] - Whether to show a grid + * @param {number=} [gridSize=30] - Specify size of the grid + * @param {string=} [gridColor="#EEEEF4"] - Color of the grid in hex, opacity is 0.15 + * @param {boolean} [zoomControl=false] - Show zoom controls in toolbar + * @param {boolean} [brightnessControl=false] - Show brightness control in toolbar + * @param {boolean} [contrastControl=false] - Show contrast control in toolbar + * @param {boolean} [rotateControl=false] - Show rotate control in toolbar + * @param {boolean} [crosshair=false] - Show crosshair cursor * @param {string} [horizontalAlignment="left"] - Where to align image horizontally. Can be one of "left", "center" or "right" * @param {string} [verticalAlignment="top"] - Where to align image vertically. Can be one of "top", "center" or "bottom" * @param {string} [defaultZoom="fit"] - Specify the initial zoom of the image within the viewport while preserving it’s ratio. Can be one of "auto", "original" or "fit" @@ -297,10 +297,24 @@ const Model = types.model({ // @todo the name is for backward compatibility; change the name later get _value() { - const value = self.parsedValue; + let value = self.parsedValue; + + if (Array.isArray(value)) value = value[self.currentImage]; - if (Array.isArray(value)) return value[self.currentImage]; - return value; + if (!self.imageCrossOrigin) { + return value; + } else if (isFF(FF_DEV_4081) && + /^https?:.*?s3\.amazonaws\.com\//g.test(value) && + !(new URL(value)).searchParams.has('X-Amz-Signature')) { + // Unsigned AWS S3 inconsistently sends back the Origin HTTP header, between + // images in an tag and a JavaScript CORS request, breaking cross domain images. + // Details: https://bugs.chromium.org/p/chromium/issues/detail?id=409090 + // Fix is to break the cache for this image only if its cross origin, on + // S3, and not a signed AWS URL with X-Amz-Signature in its query params. + return value + '?v=1'; + } else { + return value; + } }, get images() {