Javascript CORS image/canvas manipulation

Question

Я пытаюсь получить изображение из другого домена, который я настроил, чтобы разрешить CORS и манипулировать пикселями, а затем я хочу отобразить результат и иметь возможность манипулировать результатом. Я могу использовать как getImageData, так и toDataURL на изображении, которое я запросил, поэтому я знаю, что часть сервера работает. Однако, когда я пытаюсь изменить атрибут src изображения на dataURL с холста, я получаю сообщение об ошибке «Неверная загрузка изображения с помощью Cross-Origin».

function manipulateImage(img, func) { 
    var canvas = document.createElement('canvas'); 
    canvas.width = img.width; 
    canvas.height = img.height; 

    c = canvas.getContext('2d'); 
    c.drawImage(img, 0, 0); 

    width = canvas.width; 
    height = canvas.height; 
    imageData = c.getImageData(0, 0, width, height); 
    y = 0; 
    while (y < height) { 
     x = 0; 
     while (x < width) { 
      var pixel = getPixel(imageData, x, y); 
      func(pixel); 
      setPixel(imageData, x, y, pixel); 
      x++; 
     } 
     y++; 
    } 
    c.putImageData(imageData, 0, 0); 
    console.log('done'); 
    img.src = canvas.toDataURL(); 
} 


$(function() { 
    img = new Image(); 
    img.crossOrigin = ''; 
    img.onload = function() { 
     document.body.appendChild(img); 
    } 
    img.src = 'https://choros-cognition-test.s3.amazonaws.com/geotiffs/X8pEm_cl3_sm16_ra15_style_warp.png' 

    $('#increase-button').on('click', function() { 
     manipulateImage(img, function(pixel) { 
      pixel[2] += 30; 
     }); 
    }); 
}); 

Странная часть что если сбросить атрибут crossOrigin изображения в нуль в функции manipulateImage, то он работает. Почему это?

function manipulateImage(img, func) { 
    img.crossOrigin = null; 
    .... 

Answer 1

Ну, я посмотрел docs on the crossorigin atribute.

Вот соответствующая информация:

crossorigin HTML5

Этот Перечислимый атрибут указывает, если выборка из соответствующего изображения должно быть сделано с использованием CORS или нет. Изображения с поддержкой CORS могут быть повторно использованы в элементе, не будучи испорченным. Допустимые значения:

анонимный
запрос Поперечного происхождения (т.е. с происхождением: HTTP заголовка) выполняются. Но никакие учетные данные не отправляются (т. Е. Ни cookie, ни сертификат X.509, ни HTTP-аутентификация не отправляется). Если сервер не дает полномочия на сайте происхождения (не устанавливая в Access-Control-Allow-Origin: HTTP заголовка), то изображение будет испорчен и его использование ограничено ..

потребительных полномочия
Запрос на перекрестный поиск (т. Е. С заголовком Origin: HTTP) выполняется с отправкой учетных данных (т. Е. Выполняется проверка файлов cookie, сертификата и базовой проверки HTTP). Если сервер не предоставляет учетные данные исходному сайту (через Access-Control-Allow-Credentials: HTTP-заголовок), изображение будет испорчено и его использование ограничено.

Если нет, то ресурс извлекается без запроса CORS (т. Е. Без отправки заголовка Origin: HTTP), что предотвращает его использование, не используемое в элементах. Если это недействительно, оно обрабатывается, как если бы использовалось анонимное ключевое слово с перечислением.

Таким образом, я предполагаю, что значение null равно либо не присутствует, либо является недействительным, и в этом случае оно обрабатывается как анонимное.