Блог

Главная - Вопросы по программированию - Неперехваченная ошибка безопасности: не удалось выполнить ‘toDataURL’ для ‘HTMLCanvasElement’ [JS] [jQuery]

Неперехваченная ошибка безопасности: не удалось выполнить ‘toDataURL’ для ‘HTMLCanvasElement’ [JS] [jQuery]

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Я пытаюсь объединить два изображения на холсте, а затем поместить их в img. функция слияния — это нормально, я думаю, вероятно, это лучший способ сделать, но я думаю, что это хорошо.

Проблема

Функция, которая должна изменить холст на img, выдает мне сообщение об ошибке :

 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:

crossOrigin Для изображений в canvas необходимо установить значение 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>

Комментарии:

1. Отлично, кажется, это работает. С другой стороны, теперь изображения больше не загружаются на холст.

2. @HuecoMundoPRODUCTION, что вы подразумеваете под «изображения больше не загружаются в холст»?

3. Доступ к изображению в ‘ ssl.gstatic.com/onebox/media/sports/logos /… ‘ из источника ‘ localhost:8765 ‘ заблокирован политикой CORS: заголовок ‘Access-Control-Allow-Origin’ отсутствует на запрошенном ресурсе. Вероятно, это нормально для локального, нет?

4. @HuecoMundoPRODUCTION, возможно, это связано с сервером, на котором размещено изображение. Потому что он работает с этим URL- адресом — picsum.photos / id/1/200/300

Метки: