Javascript 未捕获安全性错误：未能执行'；getImageData'；在'；CanvasRenderingContext2D'；：_Javascript_Jquery_Html_Css

Javascript 未捕获安全性错误：未能执行'；getImageData'；在'；CanvasRenderingContext2D'；：

javascript jquery html css

Javascript 未捕获安全性错误：未能执行'；getImageData'；在'；CanvasRenderingContext2D'；：,javascript,jquery,html,css,Javascript,Jquery,Html,Css,每当我运行这段代码时，得到的错误如下。未捕获的安全性错误：未能在“CanvasRenderingContext2D”上执行“getImageData”：画布已被跨源数据污染。我也尝试了这个语句img.crossorigin=“anonymous”，但没有得到正确的输出，如果有人知道，请帮助我 <!DOCTYPE html> <html lang="en"> <head> <met

每当我运行这段代码时，得到的错误如下。未捕获的安全性错误：未能在“CanvasRenderingContext2D”上执行“getImageData”：画布已被跨源数据污染。我也尝试了这个语句img.crossorigin=“anonymous”，但没有得到正确的输出，如果有人知道，请帮助我

          <!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>


正文，html{高度：100%；}
.内容
{
宽度：100%；
身高：100%；
利润率：10px自动；
}
.chroma gallery徽标
{
宽度：300px；
高度：124px；
背景：url（images/chromagallery_logo.png）无重复；
保证金：25像素自动；
}
.mygallery{页边距：25px 0；}
@媒体屏幕和（最大宽度：400px）/*小徽标*/
{
.chroma gallery徽标
{
宽度：200px；
高度：83px；
背景尺寸：200px 83px；
}
}
@媒体屏幕和（最小宽度：980px）/*桌面*/
{
.content{宽度：60%；}
}   
彩色画廊
$（文档）.ready（函数（）
{
$（“.mygallery”）.chromaGallery（）；
});

您的浏览器可能正在阻止本地内容上的图像数据。这似乎是基于“images/”URL的。你可以做两件事

尝试其他浏览器。Firefox对本地数据的策略与Safari/Chrome不同。在Firefox中查看您的页面，看看是否有差异

通过internet连接提供您的页面，以使浏览器采用不同的策略。如果使用python，请打开命令行并转到项目的文件夹。运行

python-msimplehttpserver 8080

并打开浏览器以

http://127.0.0.1:8080/yourpage.html

查看这是否有效

浏览器不喜欢来自不同地方的代码访问图像数据。您需要让浏览器相信代码来自同一个地方，或者让服务器发送一个允许跨源的特殊标题。

谢谢@wolfhammer，它在Firefox上有效，但在Google chrome上无效。您的信息非常有用。如果您有python以外的选项，请告诉我。