fix(ui): set crossOrigin on every image load

Hopefully fixes `TaintedCanvas` issues.
This commit is contained in:
psychedelicious
2024-09-20 06:12:27 +10:00
parent 1a258e9497
commit c79d9453dd
3 changed files with 7 additions and 0 deletions

View File

@@ -1,4 +1,5 @@
import { getArbitraryBaseColor } from '@invoke-ai/ui-library';
import { $authToken } from 'app/store/nanostores/authToken';
import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase';
import { TRANSPARENCY_CHECKERBOARD_PATTERN_DARK_DATAURL } from 'features/controlLayers/konva/patterns/transparency-checkerboard-pattern';
@@ -94,6 +95,7 @@ export class CanvasBackgroundModule extends CanvasModuleBase {
this.konva.patternRect.fillPatternImage(this.checkboardPattern);
this.render();
};
this.checkboardPattern.src = $authToken.get() ? 'use-credentials' : 'anonymous';
this.checkboardPattern.src = this.config.CHECKERBOARD_PATTERN_DATAURL;
this.render();
};

View File

@@ -1,3 +1,4 @@
import { $authToken } from 'app/store/nanostores/authToken';
import { rgbColorToString } from 'common/util/colorCodeTransformers';
import { SyncableMap } from 'common/util/SyncableMap/SyncableMap';
import type { CanvasEntityAdapter } from 'features/controlLayers/konva/CanvasEntity/types';
@@ -35,6 +36,7 @@ function setFillPatternImage(shape: Konva.Shape, ...args: Parameters<typeof getP
imageElement.onload = () => {
shape.fillPatternImage(imageElement);
};
imageElement.crossOrigin = $authToken.get() ? 'use-credentials' : 'anonymous';
imageElement.src = getPatternSVG(...args);
return imageElement;
}

View File

@@ -1,4 +1,5 @@
import type { Selector, Store } from '@reduxjs/toolkit';
import { $authToken } from 'app/store/nanostores/authToken';
import type { CanvasEntityIdentifier, CanvasObjectState, Coordinate, Rect } from 'features/controlLayers/store/types';
import type Konva from 'konva';
import type { KonvaEventObject } from 'konva/lib/Node';
@@ -304,6 +305,7 @@ export const dataURLToImageData = (dataURL: string, width: number, height: numbe
reject(e);
};
image.crossOrigin = $authToken.get() ? 'use-credentials' : 'anonymous';
image.src = dataURL;
});
};
@@ -424,6 +426,7 @@ export function loadImage(src: string): Promise<HTMLImageElement> {
const imageElement = new Image();
imageElement.onload = () => resolve(imageElement);
imageElement.onerror = (error) => reject(error);
imageElement.crossOrigin = $authToken.get() ? 'use-credentials' : 'anonymous';
imageElement.src = src;
});
}