Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

JS - Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

I am trying to convert the image to base64 , and send image to server, but at the moment I am getting following error:

app.js:503 Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
Line 503 is 
let image = canvas.toDataURL("image/jpeg")
What am I doing wrong here?
The code in question:
let theId = $('.rev_slider').attr('id')
let container = document.getElementById(theId);
$('#download-file').click(function () {
    html2canvas(container, { allowTaint: true }).then(function (canvas) {
        let templateData = $('#ds-slide')
        let image = canvas.toDataURL("image/jpeg")
        let title = templateData.data('title')
        console.log(canvas);
        $.post("/downloads/store", {
            image: image,
            title: title,
            templateID: templateData.data('templateid')
            function (data, textStatus, jqXHR) {
                let a = document.createElement('a')
                a.href = data.url;
                a.download = title + '.jpeg';
                document.body.append(a);
                a.click();
                a.remove();
                window.URL.revokeObjectURL(data.url);
            "json"
                The error means that the <img> tag "src" is from a different domain, so the browser will not allow code from your domain to extract the image content.
– Pointy
                Jan 14, 2020 at 15:33
                Right, it usually involves an <img>, but nevertheless that's what the error means. The browser considers something on the page (the content that you're rendering into the <canvas>) to be from another domain, which "taints" the canvas. It's a security measure.
– Pointy
                Jan 14, 2020 at 15:36
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.