javascript canvas getImageData error [duplicate]

Пока вопрос очень старый, проблема остается, и в Интернете мало что нужно для ее решения. Я придумал решение, которое хочу поделиться:

Вы можете использовать изображение (или видео) без установленного атрибута crossorigin и проверить, можете ли вы получить запрос HEAD на один и тот же ресурс через AJAX. Если это не удается, вы не можете использовать ресурс. если это удается, вы можете добавить атрибут и повторно установить источник изображения / видео с прикрепленной меткой времени, которая перезагружает его.

Это обходное решение позволяет вам показывать свой ресурс пользователю и просто скрывать некоторые функции если CORS не поддерживается.

HTML:

<img id="testImage" src="path/to/image.png?_t=1234">

JavaScript:

var target = $("#testImage")[0];
    currentSrcUrl = target.src.split("_t=").join("_t=1"); // add a leading 1 to the ts
$.ajax({
    url: currentSrcUrl,
    type:'HEAD',
    withCredentials: true
})
.done(function() {
    // things worked out, we can add the CORS attribute and reset the source
    target.crossOrigin = "anonymous";
    target.src = currentSrcUrl;
    console.warn("Download enabled - CORS Headers present or not required");
    /* show make-image-out-of-canvas-functions here */
})
.fail(function() {
    console.warn("Download disabled - CORS Headers missing");
    /* ... or hide make-image-out-of-canvas-functions here */
});

Протестировано и работает в IE10 + 11 и текущем Chrome 31, FF25 , Safari 6 (рабочий стол). В IE10 и FF вы можете столкнуться с проблемой, если и только если вы пытаетесь получить доступ к http-файлам из https-скрипта. Я еще не знаю об обходном пути для этого.

UPDATE Jan 2014:

Необходимые заголовки CORS для этого должны быть следующими (синтаксис конфигурации Apache):

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "referer, range, accept-encoding, x-requested-with"

х-заголовок требуется только для запроса ajax. Насколько мне известно

Также стоит отметить, что CORS будет применяться, если вы работаете локально, независимо от того, находится ли ресурс в том же каталоге, что и файл index.html, с которым вы работаете. Для меня это означает, что проблемы CORS исчезли, когда я загрузил его на свой сервер, поскольку у него есть домен.