Странная проблема, в Stackoverflow есть много решений, но никто не может работать (Не удалось выполнить toDataURL для HTMLCanvasElement: Tainted)

Question

Я делаю проверочный код для автоматического заполнения плагина, но я обнаружил ошибку.

Uncaught DOMException: Не удалось выполнить toDataURL для HTMLCanvasElement: Taintedполотна не могут быть экспортированы.

Изображение ошибки: https://img -ask.csdn.net / upload / 201902/03 / 1549128446_976961.png

Соответствующий код:

Кодовое изображение https://img -ask.csdn.net / upload / 201902/03 / 1549128473_324557.png

function getBase64Image(im)
{
    im.crossOrigin="";
    var canvas = document.createElement("canvas");
    canvas.width = im.width;
    canvas.height = im.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(im, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace("data:image/png;base64,", "");
}

Я нашел много решений вGoogle, в основном, говорит мне, что это междоменная ошибка.решения

Я могу добавить код, чтобы он был

img.crossOrigin="Anonymous";

Устранить междоменные проблемы, но все равно выдает ошибку после попытки Далее, я нашел решение проблемы такого типа на stackoverflow .

Понятно

img.crossOrigin="";

Еще добавлено после добавления

Это решение возможно на других страницах, то есть эту страницу нельзя убить илиkill.

Test ：

Test URL: ： Нажмите здесь, чтобы перейти на страницу входа Alipay

1.Введите функцию в консоли

Например:

function getBase64Image(im)
{
  im.crossOrigin="";
    var canvas = document.createElement("canvas");
  canvas.width = im.width;
    canvas.height = im.height;
    var ctx = canvas.getContext("2d");
  ctx.drawImage(im, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace("data:image/png;base64,", "");
}

2.Следующий

getBase64Image(document.getElementById("J-checkcode-img"))

Я не очень разбираюсь в разработке JavaScript.

Я давно не нашел подходящего решения в Интернете.

Не знаюне знаю, как это решить.Я надеюсь, что вы можете помочь, спасибо!

Answer 1

В вашем исследовании кажется, что вы прочитали атрибут crossOrigin, который действительно необходим для доступа к данным ресурсов разных источников.

Однако, похоже, вы не совсем поняли, как он работает.

Этот атрибут является флагом для браузера, чтобы он знал, должны ли они запрашивать ресурс, извлеченный элементом, с заголовками CORS,так что сервер может отправить им ответ с соответствующими заголовками Allow-Origin (или с отказом).

Но этот атрибут ничего не вызывает сам по себе, он простофлаг и посещается только при извлечении ресурса Элемента.
Это означает, что для того, чтобы он имел какой-либо эффект, вы должны установить его перед установкой src.

Элемента.Поэтому, когда в вашем коде вы делаете im.crossOrigin = "";, так как после этой настройки вы не устанавливаете src снова, у извлеченного ресурса нет правильных заголовков Allow-Origin , и ресурс помечаетсянарушая Политику одного и того же происхождения и, таким образом, испортит ваш холст.

Теперь обратите внимание, что некоторые браузеры требуют, чтобы сервер отправлял как минимум заголовок Vary: Origin или даже Allow-Origin: * даже для запросовготовы быть кросс-происхождения. см. Больше.

Так что лучше всего установить атрибут crossOrigin из первого запроса, вы не показываете, где он находится в вашем коде, но вот оба возможных случая:

onload = e => {
  const img2 = new Image();
  img2.crossOrigin = ""; // set it before setting the src
  img2.onload = draw; // wait it's loaded
  img2.src = "https://commons.wikimedia.org/static/images/project-logos/commonswiki.png";
};

function draw(evt) {
  const img1 = document.getElementById('img1');
  const img2 = this;

  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.height = 200;
  ctx.drawImage(img2,50,0,200,200);
  ctx.drawImage(img1,0,0,300,200);
  // export to an <img> in body
  canvas.toBlob( blob =>
    document.body.appendChild(new Image())
      .src = URL.createObjectURL(blob)
  );
  
}

#img1{
  display: none;
}

<!-- set the attribute in the markup directly -->
<img id="img1" crossOrigin="anonymous" src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png">

И, конечно, это предполагает, что ваш сервер правильно настроен для приема анонимных запросов.