关于canvas的getImageData()函数

是菠萝不是萝卜 · 发表于 2018-10-31 11:51:10

马上注册，结交更多好友，享用更多功能^_^

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

x

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>鱼C出品</title>
</head>
<style>
canvas{
border:1px solid red;
}
</style>
<body>
<img src="1-9.jpg" id="img"/>
<canvas id="canvas" width="2000px" height="900px"></canvas>
<script>
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=document.getElementById("img");
var particles=[];
//img.src="1-9.jpg";
img.onload=function(){
ctx.drawImage(img,0,0);
//ctx.clearRect(0,0,canvas.width,canvas.height);
//ctx.fillStyle="rgb(0,128,0)";
//ctx.fillRect(200,200,20,20);
//var data=imgdata.data;
//alert(data[20000]);
};
var imgdata=ctx.getImageData(0,0,900,800);
console.log(imgdata.data);
//ctx.clearRect(0,0,canvas.width,canvas.height);
function calculate(){
var cols=45,rows=40;
var s_width=parseInt(900/cols),s_height=parseInt(800/rows);
//alert(s_width);
var pos=0;
var data=imgdata.data;
//alert(data[10]);
//alert(data.length);
for(var i=1;i<=cols;i++){
for(var j=1;j<=rows;j++){
pos=[(j*s_height-1)*900+(i*s_width-1)]*4;
//alert(data[pos]);
var particle={
x:900+i*s_width,
y:j*s_height,
fillstyle:"rgb("+data[pos]+","+data[pos+1]+","+data[pos+2]+")"
};
particles.push(particle);
}
}
}
function draw(){
//ctx.clearRect(0,0,canvas.width,canvas.height);
//alert(canvas.width);
for(var i=0;i<particles.length;i++){
ctx.fillStyle=particles[i].fillstyle;
ctx.fillRect(particles[i].x,particles[i].y,2,2);
//alert(particles[i].x+"and"+particles[i].y+particles[i].fillstyle);
}
}
calculate();
//alert(particles.length);
//ctx.clearRect(0,0,canvas.width,canvas.height);
draw();
</script>
</body>
</html>

复制代码

为什么getImageData获得的都是0

是菠萝不是萝卜 · 发表于 2018-10-31 13:40:22

找到答案了，原来是我在图片没加载完就执行后面的语句了，不过现在又有一个跨域问题，现在只有在本地搭一个服务器才能看见效果i

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

关于canvas的getImageData()函数

马上注册，结交更多好友，享用更多功能^_^

浏览过的版块