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, встроены.