suweixuan1998 发表于 2020-1-13 17:20:09

HTML庖丁解牛0078中使用getImageData导致的跨域问题

如图，在0078的例子中，使用getImageData后会出现canvas污染的问题，参考了CSDN上提到的增加img.crossOrigin = '';img.crossOrigin="anonymous"都没法解决，请问有人知道这个吗？萌新自学中，欢迎讨论。<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鱼C工作室</title>
    <style type="text/css">
      html,body{
            height: 100%;
            margin: 333px;
      }
    </style>
</head>
<body>
<canvas id="fishcCanvas" width="1000" height="999">大兄弟，你的浏览器咋不支持Canvas呢？</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("fishcCanvas");
    var context = canvas.getContext("2d");
    var img = new Image();
    img.src = "FishC.png";

    img.onload = function () {

      context.drawImage(img,0,0,530,530);
      
      img = context.getImageData(0,0,530,530);


    var pixcount = 530 * 530;
    for(var i = 0 ;i < pixcount * 4 ; i += 4)
    {
      var myRed = img.data; //红色
      var myGreen = img.data; //绿色
      var myBlue = img.data; //蓝色
      var myAlpha = img.data;//透明度
      var myGray = parseInt((myRed + myGreen + myBlue) / 3);//均值获得灰度值
      img.data = myGray;
      img.data=myGray;
      img.data=myGray;
    }

    context.putImageData(img,0,0);
    }
</script>
</body>
</html>

不二如是 发表于 2020-1-14 17:25:45

最简单就是搭建一个本地服务器环境。

Node（下载 VSCode，配置即可） 或者 XAMPP（参看：教你如何在本地搭建服务器测试环境）

suweixuan1998 发表于 2020-1-14 19:30:06

不二如是 发表于 2020-1-14 17:25
最简单就是搭建一个本地服务器环境。

Node（下载 VSCode，配置即可） 或者 XAMPP（参看：教你如何在本地 ...

好的老哥，我试试哈~

suweixuan1998 发表于 2020-1-16 11:10:03

不二如是 发表于 2020-1-14 17:25
最简单就是搭建一个本地服务器环境。

Node（下载 VSCode，配置即可） 或者 XAMPP（参看：教你如何在本地 ...

{:10_262:}XAMPP官网点开下载后在弹出下载窗口前有较长的一段等待时间，请耐心等待。（后面来的小伙伴记住啦！）
页: [1]
查看完整版本: HTML庖丁解牛0078中使用getImageData导致的跨域问题