Uncaught SecurityError: Не удалось выполнить 'getImageData' в 'CanvasRenderingContext2D':

всякий раз, когда я запускаю этот код, получите ошибку ниже. Uncaught SecurityError: Не удалось выполнить 'getImageData' в 'CanvasRenderingContext2D': холст был испорчен данными перекрестного происхождения. i m также попробуйте это утверждение img.crossorigin = «анонимный», но не получите правильный вывод, если кто-нибудь знает, тогда помогите мне.Uncaught SecurityError: Не удалось выполнить 'getImageData' в 'CanvasRenderingContext2D':

  <!DOCTYPE html> 
      <html lang="en"> 
      <head> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width,initial-scale=1"> 
     <link rel="stylesheet" href="stylesheets/chromagallery.css"> 
     <style type="text/css"> 

    body,html{height: 100%;} 
    .content 
    { 
     width: 100%; 
     height: 100%; 
     margin: 10px auto; 
    } 

    .chroma-gallery-logo 
    { 
     width: 300px; 
     height: 124px; 
     background: url(images/chromagallery_logo.png) no-repeat; 
     margin: 25px auto; 
    } 

    .mygallery{margin: 25px 0;} 

    @media screen and (max-width: 400px) /* small logo */ 
    { 
     .chroma-gallery-logo 
     { 
     width: 200px; 
     height: 83px; 
     background-size:200px 83px; 
     } 
    } 

    @media screen and (min-width: 980px) /* Desktop */ 
    { 
     .content {width: 60%;} 
    } 

    </style> 
    <title>Chroma Gallery</title> 
     </head> 
     <body> 

<div class="chroma-gallery-logo"></div> 

<div class="content"> 
    <div class="chroma-gallery mygallery"> 
     <img src="images/thumbs/1.jpg" alt="Pic 1" data-largesrc="images/1.jpg"> 
     <img src="images/thumbs/2.jpg" alt="Pic 2" data-largesrc="images/2.jpg"> 
     <img src="images/thumbs/3.jpg" alt="Pic 3" data-largesrc="images/3.jpg"> 
     <img src="images/thumbs/4.jpg" alt="Pic 4" data-largesrc="images/4.jpg"> 
     <img src="images/thumbs/5.jpg" alt="Pic 5" data-largesrc="images/5.jpg"> 
     <img src="images/thumbs/6.jpg" alt="Pic 6" data-largesrc="images/6.jpg"> 
     <img src="images/thumbs/7.jpg" alt="Pic 7" data-largesrc="images/7.jpg"> 
     <img src="images/thumbs/8.jpg" alt="Pic 8" data-largesrc="images/8.jpg"> 
     <img src="images/thumbs/9.jpg" alt="Pic 9" data-largesrc="images/9.jpg"> 
     <img src="images/thumbs/10.jpg" alt="Pic 10" data-largesrc="images/10.jpg"> 
    </div> 
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="scripts/modernizr-chrg.min.js"></script> 
<script src="scripts/masonry.min.js"></script> 
<script src="scripts/chromagallery.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     $(".mygallery").chromaGallery(); 
    }); 
</script> 
    </body> 
    </html>

источник

2015-12-14 sagar more

Возможно, ваш браузер может блокировать изображениеДобавить локальный контент. Это то, что, по-видимому, основано на URL-адресах «images/..». Есть две вещи, которые вы могли бы сделать.

Попробуйте другой браузер. У Firefox есть другая политика, чем Safari/Chrome для локальных данных. Просмотрите свою страницу в Firefox и посмотрите, есть ли разница.
Передайте свою страницу через подключение к Интернету, чтобы заставить браузер выполнять другую политику. Если у вас есть python, откройте командную строку и перейдите в папку вашего проекта. Запустите python -m SimpleHTTPServer 8080 и откройте браузер от http://127.0.0.1:8080/yourpage.html, чтобы узнать, работает ли это.

Браузеру не нравится код из разных мест, доступ к данным изображения. Вам также необходимо убедить браузер, что код идет с одного места или серверы отправляют специальный заголовок, разрешающий перекрестное происхождение.

источник

2015-12-14 22:45:48 wolfhammer

thanks @ wolfhammer, его работы на Firefox, но не в Google chrome. Ваша информация очень полезна. Если у вас есть какой-либо параметр, отличный от python, скажите, пожалуйста. –

Uncaught SecurityError: Не удалось выполнить 'getImageData' в 'CanvasRenderingContext2D':

ответ

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