Fix CORS issue for Send to Clipspace function

Add crossOrigin='anonymous' attribute to image elements in CanvasLayers.ts to prevent canvas tainting. This resolves the "Tainted canvases may not be exported" error when using the Send to Clipspace feature.
This commit is contained in:
Dariusz L
2025-08-14 14:49:18 +02:00
parent d1ceb6291b
commit f6a240c535
2 changed files with 8 additions and 0 deletions

View File

@@ -96,6 +96,7 @@ export class CanvasLayers {
tempCtx.globalCompositeOperation = 'destination-in';
tempCtx.drawImage(maskCanvas, 0, 0);
const newImage = new Image();
newImage.crossOrigin = 'anonymous';
newImage.src = tempCanvas.toDataURL();
layer.image = newImage;
}
@@ -158,6 +159,7 @@ export class CanvasLayers {
reader.readAsDataURL(blob);
});
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => {
if (!this.canvas.node.imgs) {
this.canvas.node.imgs = [];
@@ -853,6 +855,7 @@ export class CanvasLayers {
}
// Convert canvas to image
const processedImage = new Image();
processedImage.crossOrigin = 'anonymous';
processedImage.src = processedCanvas.toDataURL();
return processedImage;
}
@@ -1722,6 +1725,7 @@ export class CanvasLayers {
tempCtx.translate(-minX, -minY);
this._drawLayers(tempCtx, this.canvas.canvasSelection.selectedLayers);
const fusedImage = new Image();
fusedImage.crossOrigin = 'anonymous';
fusedImage.src = tempCanvas.toDataURL();
await new Promise((resolve, reject) => {
fusedImage.onload = resolve;

View File

@@ -100,6 +100,7 @@ export class CanvasLayers {
});
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => {
if (!this.canvas.node.imgs) {
this.canvas.node.imgs = [];
@@ -402,6 +403,7 @@ export class CanvasLayers {
tempCtx.drawImage(maskCanvas, 0, 0);
const newImage = new Image();
newImage.crossOrigin = 'anonymous';
newImage.src = tempCanvas.toDataURL();
layer.image = newImage;
}
@@ -1000,6 +1002,7 @@ export class CanvasLayers {
// Convert canvas to image
const processedImage = new Image();
processedImage.crossOrigin = 'anonymous';
processedImage.src = processedCanvas.toDataURL();
return processedImage;
}
@@ -2020,6 +2023,7 @@ export class CanvasLayers {
this._drawLayers(tempCtx, this.canvas.canvasSelection.selectedLayers);
const fusedImage = new Image();
fusedImage.crossOrigin = 'anonymous';
fusedImage.src = tempCanvas.toDataURL();
await new Promise((resolve, reject) => {
fusedImage.onload = resolve;