2016-08-31 2 views
1

Я использую html2canvas для создания изображения из набора элементов HTML. Однако один из этих элементов имеет свойство background-image с изображением, загруженным из другого источника. Это приводит к холсту получения испорчено, когда он генерация, в противном случае моего поколения изображения со следующей ошибкойТонкие холсты могут не экспортироваться при использовании CSS background-image

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

при попытке вызова toDataUrl() на возвращенном холсте.

Изображение имеет Access-Control-Allow-Origin заголовок установлен в * так что я чувствую, что должен работать однако ошибка, конечно, не дает мне много идти дальше.

Есть много вопросов о загрузке изображений из разных источников в холсты с использованием image.crossOrigin = 'anonymous', но никто не упоминает изображения, загруженные как фоновое изображение, используя CSS, поэтому мне интересно, как с этим бороться?

+1

Проверьте, действительно ли ваше изображение проходит CORS: можете ли вы использовать 'toDataURL', когда рисуете изображение непосредственно на пустом холсте (не как задний фон)? Кроме того, вы установили для html2canvas [useCORS] (http://html2canvas.hertzen.com/documentation.html) значение true? Если проблема сохраняется, возможно, html2canvas не проверяет фоновые изображения, и вам может понадобиться наложить img под div вместо использования фонового изображения. – markE

ответ

0

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

Исправлено с html2canvas optionuseCORS: true. Кроме того, важно также иметь значение по умолчанию для опции allowTaint, которая равна false

Смежные вопросы