Estoy intentando colocar una imagen de marca de agua en una imagen de entrada antes de guardarla en una base de datos. Estoy usando un lienzo para hacer esto y luego vuelvo a convertir el lienzo en un blob, pero cuando hago referencia a la imagen de la marca de agua en el directorio de archivos local del proyecto para dibujar en el lienzo, aparece el mensaje "Es posible que los lienzos contaminados no se exporten". error en la consola.

 // Read input file const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { // Create canvas & calculate Stamp size and position const canvas = document.createElement("canvas"); canvas.width = canvasSize.width; canvas.height = canvasSize.height; var calcW = canvasSize.width/2; var calcH = calcW/2.16; var calcX = (canvasSize.width - calcW)/2; var calcY = (canvasSize.height - calcH)/2; // Load input image into canvas const img = document.createElement("img"); img.src = reader.result; img.onload = () => { const ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); //Load & draw the Stamp image const mark = new Image(); mark.src = 'assets/img/compliant.png'; // <<TAINTED ASSET? mark.onload = () => { ctx.drawImage(mark, calcX,calcY,calcW,calcH); // Convert to blob and get URL canvas.toBlob((canvasBlob) => { const newImg = document.createElement("img"), url = URL.createObjectURL(canvasBlob); newImg.onload = function () { //Destroy objecturl after image loading URL.revokeObjectURL(url); }; // Show stamped image newImg.src = url; window.open(url); }); }; }; }; });