Fix CORS for images loaded from IndexedDB

Add crossOrigin='anonymous' to image elements in CanvasState._createLayerFromSrc() method. This prevents canvas tainting when images are restored from IndexedDB after page refresh, ensuring export functions work correctly.
This commit is contained in:
Dariusz L
2025-08-14 15:04:08 +02:00
parent 8d1545bb7e
commit b04795d6e8
2 changed files with 4 additions and 0 deletions

View File

@@ -200,6 +200,7 @@ export class CanvasState {
_createLayerFromSrc(layerData, imageSrc, index, resolve) {
if (typeof imageSrc === 'string') {
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => {
log.debug(`Layer ${index}: Image loaded successfully.`);
const newLayer = { ...layerData, image: img };
@@ -216,6 +217,7 @@ export class CanvasState {
if (ctx) {
ctx.drawImage(imageSrc, 0, 0);
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => {
log.debug(`Layer ${index}: Image loaded successfully from ImageBitmap.`);
const newLayer = { ...layerData, image: img };

View File

@@ -235,6 +235,7 @@ export class CanvasState {
_createLayerFromSrc(layerData: Layer, imageSrc: string | ImageBitmap, index: number, resolve: (value: Layer | null) => void): void {
if (typeof imageSrc === 'string') {
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => {
log.debug(`Layer ${index}: Image loaded successfully.`);
const newLayer: Layer = {...layerData, image: img};
@@ -250,6 +251,7 @@ export class CanvasState {
if (ctx) {
ctx.drawImage(imageSrc, 0, 0);
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => {
log.debug(`Layer ${index}: Image loaded successfully from ImageBitmap.`);
const newLayer: Layer = {...layerData, image: img};