Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement' [JS] [jQuery]

I try to merge two image in a canvas, past it in an img. merge function is OK I think, probably many best way to do but I think it's good.

Issue

The function which should change the canvas to img gives me an error :

function merge(){
  var img1fil = document.getElementById("img1");
  var img2fil = document.getElementById("img2");

  var c=document.createElement("canvas");
  c.setAttribute("id", "myCanvas");
 
  document.body.appendChild(c);
  c.width=100;
  c.height=200;
  var canva = $("#myCanvas");
  var ctx=canva.get(0).getContext("2d");
  var imageObj1 = new Image();
  var imageObj2 = new Image();
  imageObj1.src = img1fil.value;
  imageObj1.onload = function() {
    ctx.drawImage(imageObj1, 0, 0, 100, 100);
    imageObj2.src = img2fil.value;
    imageObj2.onload = function() {
      ctx.drawImage(imageObj2, 0, 100, 100, 100);
    }
  };  
}
function lodzer(){
    var canvab = $("#myCanvas");
  var dataURL = canvab.get(0).toDataURL("image/png");
  var img = $("<img></img>");
  img.crossOrigin = "anonymous";
  img.setAttribute("src", dataURL);
  img.setAttribute('crossOrigin','anonymous');
  document.getElementById("myCanvas").replaceWith(img);
    
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="img1"/>
<input type="text" id="img2"/>
<img id='imouge'>

<button onclick="merge()">Click me</button>
<button onclick="lodzer()">Click me</button>

1 answer

  • answered 2021-01-11 06:14 Nikhil Patil

    You need to set crossOrigin for images in canvas to anonymous -

    function merge() {
      var img1fil = document.getElementById("img1");
      var img2fil = document.getElementById("img2");
    
      var c = document.createElement("canvas");
      c.setAttribute("id", "myCanvas");
    
      document.body.appendChild(c);
      c.width = 100;
      c.height = 200;
      var canva = $("#myCanvas");
      var ctx = canva.get(0).getContext("2d");
      var imageObj1 = new Image();
      var imageObj2 = new Image();
      imageObj1.src = img1fil.value;
      imageObj1.crossOrigin = "anonymous";
      imageObj1.onload = function() {
        ctx.drawImage(imageObj1, 0, 0, 100, 100);
        imageObj2.src = img2fil.value;
        imageObj2.crossOrigin = "anonymous";
        imageObj2.onload = function() {
          ctx.drawImage(imageObj2, 0, 100, 100, 100);
        }
      };
    }
    
    function lodzer() {
      var canvab = $("#myCanvas");
      var dataURL = canvab.get(0).toDataURL("image/png");
      var image = new Image();
      image.src = dataURL;
      image.crossOrigin = "anonymous";
      canvab.replaceWith(image);
    
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <input type="text" id="img1" />
    <input type="text" id="img2" />
    <img id='imouge'>
    
    <button onclick="merge()">Click me</button>
    <button onclick="lodzer()">Click me</button>