Tainted Canvas, благодаря CORS и SVG?
Я знаю, что это часто задавали раньше, но после того, как 3 дня попытались исправить это, я явно нуждаюсь в помощи.
У меня была проблема какое-то время. Я пытался сделать что-то вроде этого (это упрощенный код):
var media = Array();
$(document).ready(function(){
img = new Image();
img.crossOrigin = "*";
img.src = "http://domain.com/pics/picture.svg";
img.width = 200;
img.height = 300;
img.onload = function(){
media['test'] = img;
///var layer = img;
$.jCanvas({
fromCenter: false
});
$("#collider").drawImage({
source: media['test'],
width: 200,
height: 300,
x: 0, y: 0,
click: function(layer){
alert(layer.eventX);
}
});
var pixelData = document.getElementById("collider").getContext('2d').getImageData(50, 50, 20, 20).data;
console.log(pixelData);//*/
}
});
Проблема в том, что полотно становится испорченным. Из-за этого я не могу получить данные пикселя.
Я попытался установить заголовки источника управления доступом следующим кодом в .htaccess:
# with AJAX withCredentials=false (cookies NOT sent)
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, PUT, OPTIONS, PATCH, DELETE"
Header always set Access-Control-Allow-Headers "X-Accept-Charset,X-Accept,Content-Type"
# with AJAX withCredentials=true (cookies sent, SSL allowed...)
SetEnvIfNoCase ORIGIN (.*) ORIGIN=$1
Header always set Access-Control-Allow-Methods "POST, GET, PUT, OPTIONS, PATCH, DELETE"
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Credentials "true"
Header always set Access-Control-Allow-Headers "X-Accept-Charset,X-Accept,Content-Type"
И когда я проверил заголовки в браузере при серфинге на URL-адрес изображения, они, казалось, работали (все заголовки отправляются так, как они должны). Но когда они загружаются через javascript, как-то их нет (никаких заголовков вообще не отправляют, когда они проверяются в браузере), и из-за этого холст становится испорченным
Мои вопросы:
1) Почему мой файл .htaccess не позволяет передавать данные через orgin?
2) Почему у меня даже проблема с данными перекрестного происхождения, так как мой html, javascript и файл изображения размещаются в одном домене?
Дополнительная информация:
Сервер: Ubunthu LTS 12.04, Apache2
ИЗМЕНИТЬ
Я попытался изменить picture.svg на .jpg pic, а теперь все работает, поэтому, похоже, проблема возникает из включенного файла .svg.
Любой, кто знает, как это сделать с файлами .svg?
Ответы
Ответ 1
Как указано. Изображения SVG могут повредить полотно. Даже когда-нибудь (как и в моем случае), когда в файле SVG нет внешних ресурсов.
Но я нашел одно решение, поэтому возможности формата SVG можно было бы использовать без испорчения холста.
Это возможно с canvg (http://code.google.com/p/canvg/). То, что script также утверждает, что может получить SVG с использованием CORS (я еще не проверял это, хотя)
Надеюсь, это поможет кому-то!
пример кода
//...prev code
canvg(document.getElementById('collider'), media['test']);
var pixelData = document.getElementById("collider").getContext('2d').getImageData(50, 50, 20, 20).data;
console.log(pixelData);
Ответ 2
Обновление
Пропустили, что вы используете SVG файл. Если файл SVG содержит ссылки на внешние источники (CSS, объекты, изображения и т.д.), Это не сработает. Все в SVG должно быть встроено. Или вы будете иметь ту же ситуацию, что и внешние ресурсы, но поскольку они инкапсулированы в SVG, браузер более строгий, поэтому вы не можете использовать CORS в этих случаях.
Это функция безопасности браузера, и вы не можете многое изменить, но убедитесь, что все ресурсы, необходимые для SVG, встроены.