title: JS - Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported
body: <p>I am trying to convert the image to <strong>base64</strong>, and send image to server, but at the moment I am getting following error:</p>
  
  <pre><code>app.js:503 Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
  </code></pre>
  
  <p>Line 503 is </p>
  
  <pre><code>let image = canvas.toDataURL("image/jpeg")
  </code></pre>
  
  <p>What am I doing wrong here?</p>
  
  <p>The code in question:</p>
  
  <pre><code>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"
          );
  
  
  
      });
  
  });
  </code></pre>