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

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

您需要登录才可以下载或查看，没有账号？立即注册

x

如图，在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[i]; //红色
var myGreen = img.data[i +1 ]; //绿色
var myBlue = img.data[i + 2]; //蓝色
var myAlpha = img.data[i + 3];//透明度
var myGray = parseInt((myRed + myGreen + myBlue) / 3);//均值获得灰度值
img.data[i] = myGray;
img.data[i+1]=myGray;
img.data[i+2]=myGray;
}
context.putImageData(img,0,0);
}
</script>
</body>
</html>

复制代码

最佳答案

不二如是

2020-1-14 17:25:45

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

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

不二如是 · 发表于 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（参看：教你如何在本地 ...

XAMPP官网点开下载后在弹出下载窗口前有较长的一段等待时间，请耐心等待。（后面来的小伙伴记住啦！）

账号		自动登录	找回密码
密码			立即注册