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.

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>
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>
                Perfect, that seems to be working. On the other hand, now the images no longer load in the canvas.
– Hueco Mundo PRODUCTION
                Jan 11, 2021 at 7:07
                Access to image at 'ssl.gstatic.com/onebox/media/sports/logos/…' from origin 'localhost:8765' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.  It's probably normal in local, no ?
– Hueco Mundo PRODUCTION
                Jan 11, 2021 at 7:25
                @HuecoMundoPRODUCTION, It maybe due to the server which hosts the image. Because it works with this url - picsum.photos/id/1/200/300
– Nikhil Patil
                Jan 11, 2021 at 7:58
        
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.