Проблемы с getImageData

Я пытаюсь прочитать данные изображения через тег canvas, и каждый раз, когда я пытаюсь получить и отображать эти данные, все это получается 0. Даже если я ограничу захват данных до 1 пикселя, он появляется «0, 0, 0, 0». Странно, что я могу использовать fillRect и извлекать эти данные, но при рисовании изображения появляются нули. Я буду использовать этот скрипт для сравнения пикселей, чтобы узнать, повторяется ли шаблон, но сначала мне нужно убедиться, что я могу прочитать эти данные в первую очередь.Проблемы с getImageData

Ниже приведен мой код. Я как бы устарел и использую текстовый редактор и браузер для тестирования. В результате у меня нет таких редакторов WYSIWYG, которые некоторые люди используют. Вам просто нужно использовать изображение и изменить источник, чтобы заставить его работать локально. Хотя я мог бы настроить его в другом месте, если потребуется.

Надеюсь, я получу некоторое представление о том, почему это не работает.

<!DOCTYPE HTML> 
    <html> 
     <head> 
      <style type="text/css"> 
       body { background-color:#dedddd } 
       canvas { background-color:white; padding:20px } 
       #colorInfo { width:300px; background-color:white; padding:20px } 
      </style> 
     </head> 
     <body> 
      <canvas id="iLikeCookies" width="300" height="300">Your browser kinda sucks. Can't even draw a canvas. For shame.</canvas> 
      <div id="header"></div> 
      <div id="colorInfo"></div> 
      <script> 
       var canvas = document.getElementById('iLikeCookies'); 
       var ctx = canvas.getContext('2d'); 
       var img = new Image(); 
       pixelData = ''; 

       // function to read all pixels and build into string of RGBa values. 
       var read = function() { 
        // loop through each row 
        for(var y = 0; y < canvas.height; y++) { 
         // loop through each column 
         for(var x = 0; x < canvas.width; x++) { 
          // grabbing individual pixel data 
          var red = pixels[((canvas.width * y) + x) * 4]; 
          var green = pixels[((canvas.width * y) + x) * 4 + 1]; 
          var blue = pixels[((canvas.width * y) + x) * 4 + 2]; 
          var alpha = pixels[((canvas.width * y) + x) * 4 + 3]; 
          // adding current pixel data to string 
          pixelData += "RGBa(" + red + ", " + green + ", " + blue + ", " + alpha + ") <br/>"; 
         } 
        } 
       }; 

       img.onload = function() { 
        ctx.drawImage(img, 0, 0, 300, 300); 
       }; 

       // ctx.fillStyle = "rgb(123,40,170)" 
       // ctx.fillRect(0,0,300,300) 
       img.src = 'pattern2.jpg'; 
       imgData = ctx.getImageData(0, 0, canvas.width-299, canvas.height-299); 
       pixels = imgData.data   
       read(); 
       console.log(img.width + ", " + img.height); 
       document.getElementById("header").innerHTML = "Here are the " + canvas.height*canvas.width + " pixels found in the image.<br/>";     
       document.getElementById("colorInfo").innerHTML = pixelData; 
       console.log(pixelData); 

      </script> 
     </body> 
    </html>

источник

2015-07-26 aphero

Смотрите здесь для удовлетворения требований кросс происхождения, так что вы не получите ошибки безопасности : http://enable-cors.org/ – markE

Поместите свой код, начинающийся с imgData = …img.onload внутри функции и установить img.crossOrigin = 'anonymous';, чтобы избавиться от SecurityError:

img.crossOrigin = 'anonymous'; 
img.src = 'pattern2.jpg'; 
img.onload = function() { 
    ctx.drawImage(img, 0, 0, 300, 300); 

    // ctx.fillStyle = "rgb(123,40,170)" 
    // ctx.fillRect(0,0,300,300) 

    imgData = ctx.getImageData(0, 0, canvas.width - 299, canvas.height - 299); 
    pixels = imgData.data 
    read(); 
    console.log(img.width + ", " + img.height); 
    document.getElementById("header").innerHTML = "Here are the " + canvas.height * canvas.width + " pixels found in the image.<br/>"; 
    document.getElementById("colorInfo").innerHTML = pixelData; 
    console.log(pixelData); 
};

источник

2015-07-26 19:30:27 Xufox

При этом он запускает следующее в консоль: Uncaught SecurityError: Не удалось выполнить 'getImageData' в 'CanvasRenderingContext2D': холст был испорчен данными перекрестного происхождения. – aphero

См. Edit: 'img.crossOrigin = 'anonymous';' должно исправить это. – Xufox

Теперь получение: Изображение из исходного файла: // 'было заблокировано от загрузки по политике совместного использования ресурсов Cross-Origin: получил недопустимый ответ. Поэтому исходный 'null' не допускается. – aphero

Проблемы с getImageData

ответ

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