html2canvas - SecurityError: операция небезопасна

Question

Я использовал html2canvas.js в своем проекте для преобразования моего элемента (тела) в холст, а затем конвертирования холста в изображение. Мой элемент содержит изображения, которые загружаются из перекрестного домена. Canvas create from element работает отлично, но при попытке canvas.toDataURL("image/png"); он дает ошибку SecurityError: The operation is insecure Пожалуйста, помогите мне решить эту проблему. canvas.toDataURL("image/png"); работает нормально, когда изображение не загружается из перекрестного домена.

Заранее спасибо.

Answer 1

Не проблема html2canvas - проблема безопасности.

Если действительно повезло ...

Вы можете использовать imageObject.crossOrigin='anonymous' при скачивании междоменное изображение. Это требует и сервера и браузера, чтобы разрешить анонимные передачи домена x. К сожалению, почти все серверы и большинство браузеров еще не позволяют.

Альтернативно

Не ходи междоменного ... служить этому изображение на вашем собственном веб-сайте.

Альтернативно

Wrap запрос изображения в запросе JSon. Вот сценарий, который делает это: http://www.maxnov.com/getimagedata/

Answer 2

Даже я столкнулся с той же проблемой для своего проекта. Но вместо использования html2canvasproxy.php (как многие сайты мне советовали), плагин html2canvas имеет встроенное свойство, которое по умолчанию является ложным и которое переключается между изображениями между доменами.

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

Для проблемы с перекрестными изображениями используйте useCors и установите значение true. Если вы изменили изображения перекрестных доменов (например, конвертируете их в DataURI), холст может испортиться, что html2canvas не позволит. Здесь установка allowTaint в true позволит решить проблему и сделать html2canvas для принятия вашего холста.

Реализации образца,

 html2canvas(document.getElementById('mainImage'), { 
     allowTaint:true, 
     useCORS:true, 
     /*proxy:"lib/html2canvas_proxy/html2canvasproxy.php",*/ 
     onrendered: function(canvas) { 
      var result = canvas.toDataURL(); 
     } 
    }); 

Надеется, что это помогает. Или, если у вас есть какие-то другие идеи, я был бы рад узнать. Спасибо.

Answer 3

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

STEP BY STEP ПРОЦЕССЕ:

Hide different elements in the container that you are taking a canvas screenshot of 
and test whether the error is still thrown. 

В конце концов, я был в состоянии определить, что select inputs were the culprits.

1. Проверьте, есть ли какие-либо выбор входы
2. Скрыть выбор входов, прежде чем принимать скриншот и добавить их обратно после того, как (с помощью JQuery $('.selector').hide(); и $('.selector').show();)