2015-04-13 3 views
2

Я пытаюсь создать какой-то инструмент для брендинга, который добавляет брендинг к выбранному изображению и позволяет пользователю снова загрузить изображение. Это работает отлично на многих браузерах, но Opera и IE вызывают ошибку безопасности, которая заставляет меня думать, что вскоре другие браузеры тоже могут ошибаться.Нарушение безопасности на Canvas.ToDataUrl с Base64 Изображение

Fiddle: http://jsfiddle.net/2rL8afe0/9/

Комментирование линии делает код работу:

ctx.drawImage(branding, 0, 0, 30, 30); 

Причина, вероятно, некоторыми ложноотрицательная на кросс скриптинга, так как мое приложение работает на стороне клиента.

Любые идеи, как исправить это?

+0

Если вы рисуете изображения на холсте, которые не происходят из того же домена, что и ваша веб-страница, тогда холст автоматически будет «испорчен» нарушением безопасности междоменного доступа. Это ошибка, которую вы видите. Когда полотно испорчено, 'toDataURL' будет запрещен браузером. Решение состоит в размещении изображений в том же домене, что и ваши веб-страницы. – markE

+0

Нет изображений, размещенных в нигде – efkah

+0

Если вы имеете в виду, что изображения отправляются пользователем со своего компьютера, то эти изображения считаются «междоменными» и будут вызывать ошибки нарушения безопасности. Если это так, и у ваших пользователей есть современные браузеры, вы можете использовать новый 'FileReader', чтобы пользователи могли выбирать файлы со своих компьютеров таким образом, чтобы не приводить к нарушениям безопасности. – markE

ответ

2

Проблема в том, что некоторые браузеры очень строгие при использовании SVG с холстом, вкл. например, IE.

Поскольку ваш логотип для брендинга - это SVG, он будет загрязнять полотно в этих браузерах.

Замена изображения вашего бренда PNG, JPEG и т. Д. Устранит эту проблему.

+0

Обновленная скрипка с использованием PNG: https://jsfiddle.net/epistemex/2rL8afe0/13/ – K3N

+1

waoh, я просто выделил совершенно другую проблему (не могу нарисовать 2 изображения в том же холсте на опере: https://jsfiddle.net/2rL8afe0/14/), и ваш подход исходил со всей другой стороны. спас меня там. – efkah

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