Разблокируйте N поз холста, экспортируя изображения между доменами~

Canvas

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Считается, что вышеуказанная ошибка используется всеми.canvasвоплощать в жизньtoDataUrlЯ столкнулся с этим при экспорте картинок.Доменное имя сервера картинок отличается от текущего, так как политика безопасности не разрешает междоменный экспорт картинок.

Есть много способов решить эту проблему кроссовера

Во-первых, изображение преобразуется в Base64

Как только картинка становится base64, доменного имени нет.Естественно, нет и междоменного.

Примечание: Преобразуйте изображение в base64 и увеличьте размер файла изображения.Если изображение относительно большое, не рекомендуется преобразовывать base64, иначе это увеличит время загрузки страницы и повлияет на скорость работы сайта.Этот метод обычно подходит для небольших изображений.

Во-вторых, настройки сервера изображений позволяют междоменное

То есть заголовок ответа, возвращаемый изображением запроса, содержитAccess-Control-Allow-OriginЗначением переключателя является * (разрешает всем веб-сайтам запрашивать междоменные запросы) или имя текущего домена веб-сайта (разрешает междоменные запросы только под фиксированным доменным именем), а затем внешний интерфейс загружает изображение, устанавливая перекрестие изображения. -атрибут доменаimg.crossOrigin="anonymous". Конкретный код выглядит следующим образом

  var canvas = document.getElementById('myCanvas')
  var ctx = canvas.getContext('2d')
  var img = document.createElement('img')
  img.crossOrigin="anonymous"
  img.src = 'https://p4-q.mafengwo.net/s12/M00/CA/3B/wKgED1w8fL6ADk16AAXyDaz2bdU61.jpeg'
  img.onload = function() {
    ctx.drawImage(img,0,0,500,300);
    console.log(canvas.toDataURL())
  }

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

3. Поместите картинку под текущим доменным именем

原谅我不厚道的笑了，这的确是一种可以解决问题。
BUT 实际项目中图片一般都存储在cdn上，所以这种方式不太现实🌚🌝🌞

Как только картинка становится base64, доменного имени нет.Естественно, нет и междоменного.

4. Когда служба изображений не может установить заголовок междоменного ответа

Такая ситуация действительно существует, например, получение аватара стороннего веб-сайта, например аватара WeChat, а затем динамическая генерация нового изображения во внешнем интерфейсе.Изображение аватара WeChat нельзя экспортировать между доменами. я должен делать? ? ? Вышеуказанные методы не работают

В этой ситуации требуется помощь бэкэнда, бэкэнд выполняет уровень пересылки, сервер получает аватар, конвертирует его в base64 и возвращает во фронтенд, либо сохраняет на локальном сервере, что позволяет кросс -domain, создает новую ссылку на изображение и возвращает ее во внешний интерфейс. В сочетании с методом 1 или методом 2 междоменные проблемы решаются естественным образом.

если вы используетеhtmlToCanvasЕсли плагин экспортирует картинки, вам нужно добавитьuseCORS: trueЭлемент конфигурации, принцип тот же, что и в способе 2, конечно, предварительным условием является то, что имя домена изображения позволяет междоменное

На этом знакомство с известными мне N методами завершено, можно добавить

Категории