Error Exporting Merged Image using Fabric.js in Local HTML: 'Tainted canvases may not be exported #120867

tayllana · 2024-04-23T15:49:44Z

tayllana
Apr 23, 2024

Hello community,

I'm encountering an issue when trying to export a merged image using Fabric.js in a local environment. I'm using just a simple HTML file and opening it directly in the browser, without the use of an Apache server, XAMPP, or any other server setup.

When attempting to export the merged image using the following code:
const dataURL = canvas.toDataURL('image/png');
I receive the following error:
fabric.min.js:1 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
Does anyone know how I can resolve this issue? Appreciate any help in advance!

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>Posicionar e Salvar Logo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
    <h1>Posicione e Salve sua Logo</h1>

    <canvas id="meuCanvas" width="500" height="500"></canvas>

    <div class="acoes">
        <button id="salvarButton">Salvar</button>
    </div>
    <style>
        body {
            font-family: sans-serif;
            text-align: center;
        }

        .acoes {
            margin-top: 20px;
        }

        #salvarButton {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            cursor: pointer;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.4.0/fabric.min.js"></script>
    <script>
        $(document).ready(function () {
            const canvas = new fabric.Canvas('meuCanvas');
            const canvasWidth = canvas.width;
            const canvasHeight = canvas.height;
            
            // Carrega a imagem principal
            fabric.Image.fromURL('img/image.png', (img) => {
                img.set({
                    selectable: false,
                    scaleX: canvasWidth / img.width,
                    scaleY: canvasHeight / img.height
                });
                img.crossOrigin = 'Anonymous';
                canvas.add(img);
            });
            
            // Carrega a logo
            fabric.Image.fromURL('img/logoimobiliaria.png', (logo) => {
                logo.set({
                    evented: true,
                    scaleX: 0.2,
                    scaleY: 0.2,
                    left: (canvasWidth - (logo.width * 0.2)) / 2,
                    top: (canvasHeight - (logo.height * 0.2)) / 2
                });
                logo.crossOrigin = 'Anonymous';
                // default (Logo no canto inferior esquerdo)
                //logo.set({
                //    evented: true,
                //    scaleX: 0.1,
                //    scaleY: 0.1, 
                //    left: 0,
                //    top: canvasHeight - (logo.height * 0.1) 
                //});
                logo.on('mouseup', () => {
                    canvas.renderAll();
                });
                canvas.add(logo);
            });
            // Funcionalidade para salvar a imagem mesclada
            $('#salvarButton').click(function () {
                debugger
                const dataURL = canvas.toDataURL('image/png');

                // Opções para salvar a imagem:
                // 1. Mostrar a imagem em uma nova guia:
                window.open(dataURL, '_blank');

                // 2. Salvar a imagem no computador (requer implementação adicional com base em sua tecnologia de backend)
                // Exemplo usando AJAX (substitua com seu método de salvar):
                // $.post('/salvarImagem.php', { data: dataURL })
                //     .done(function () {
                //         console.log('Imagem salva com sucesso!');
                //     })
                //     .fail(function () {
                //         console.error('Falha ao salvar a imagem.');
                //     });
            });
        });
    </script>
</body>

</html>

Answered by CopperEagle

Apr 23, 2024

Yep, this is what I mentioned in your last discussion here.

The problem lies with CORS. Some images come from an origin that is not the webserver the website is from. If both, the images and the website is offline (local), this is quite annoying. The solution is to have a local webserver serve the website and images. (No change to the code should be needed.) For example, you may execute in the directory of the html page and images

python3 -m http.server

then visit localhost:8000/website.html where website.html is the name of your file. There is no other way, as far as I know. toBlob, etc. will give the same result. If you are still trying to overlay images then you may want to look at mer…

View full answer

CopperEagle · 2024-04-23T16:21:44Z

CopperEagle
Apr 23, 2024

Yep, this is what I mentioned in your last discussion here.

The problem lies with CORS. Some images come from an origin that is not the webserver the website is from. If both, the images and the website is offline (local), this is quite annoying. The solution is to have a local webserver serve the website and images. (No change to the code should be needed.) For example, you may execute in the directory of the html page and images

python3 -m http.server

then visit localhost:8000/website.html where website.html is the name of your file. There is no other way, as far as I know. toBlob, etc. will give the same result. If you are still trying to overlay images then you may want to look at merge-images. It returns the result image as base64 encoded string, so there would be no need to call toDataURL.

Ps. If a comment answers your question, please mark it as the answer. Thanks.

1 reply

tayllana Apr 24, 2024
Author

I was using the file directly from my PC, so I was encountering this CORS issue. But after I uploaded it to the server, everything worked fine. Thank you.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

Error Exporting Merged Image using Fabric.js in Local HTML: 'Tainted canvases may not be exported #120867

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

GitHub Community

Error Exporting Merged Image using Fabric.js in Local HTML: 'Tainted canvases may not be exported #120867

tayllana Apr 23, 2024

Replies: 1 comment · 1 reply

CopperEagle Apr 23, 2024

tayllana Apr 24, 2024 Author

tayllana
Apr 23, 2024

Replies: 1 comment 1 reply

CopperEagle
Apr 23, 2024

tayllana Apr 24, 2024
Author