js中函数执行位置不同的问题
为了实现一个简单的滤镜效果，有如下代码：<html><head><scripttype='text/javascript'>functiondrawImg(imgPath...
为了实现一个简单的滤镜效果，有如下代码：
<html>
<head>
<script type='text/javascript'>
function drawImg(imgPath){
var canvas = document.getElementById('img_test');
if(canvas.getContext){
var ctx=canvas.getContext('2d');
}
var img = new Image();
img.src = imgPath;
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img,0,0);
}
function setColor(){
var canvas = document.getElementById('img_test');
var color_value = document.getElementById('color_value');
if(canvas.getContext){
var ctx=canvas.getContext('2d');
}
var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
for(var i=0;i<imgData.data.length;i+=4){
imgData.data[i] = .299*imgData.data[i];
imgData.data[i+1] = .587*imgData.data[i+1];
imgData.data[i+2] = .114*imgData.data[i+2];
imgData.data[i+3] = 255;
}
ctx.putImageData(imgData,0,0);
}
</script>
</head>
<body>
<canvas id="img_test" >
您的浏览器不支持canvas!
</canvas>
<button onclick="drawImg('./images/lvjing.jpg');" >画图</button>
<button onclick="setColor();">添加颜色</button>
</body>
</html>
但是为什么将drawImg函数放在body的onload事件中，drawImg函数中的img对象的长宽却变成了0；如果单独在网页代码中嵌入<script>标签来执行该函数，得到的长宽也是0；但是如果写在一个按钮的onclick事件里面（比如代码中写在画图按钮的事件上），长宽就对了（即图片的长宽）。
上面代码是正确的。只是想去掉“画图”按钮，在网页加载完成的时候执行“画图”。但是问题就出现在该函数放在onload里面就出现了上面说的问题 展开
<html>
<head>
<script type='text/javascript'>
function drawImg(imgPath){
var canvas = document.getElementById('img_test');
if(canvas.getContext){
var ctx=canvas.getContext('2d');
}
var img = new Image();
img.src = imgPath;
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img,0,0);
}
function setColor(){
var canvas = document.getElementById('img_test');
var color_value = document.getElementById('color_value');
if(canvas.getContext){
var ctx=canvas.getContext('2d');
}
var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
for(var i=0;i<imgData.data.length;i+=4){
imgData.data[i] = .299*imgData.data[i];
imgData.data[i+1] = .587*imgData.data[i+1];
imgData.data[i+2] = .114*imgData.data[i+2];
imgData.data[i+3] = 255;
}
ctx.putImageData(imgData,0,0);
}
</script>
</head>
<body>
<canvas id="img_test" >
您的浏览器不支持canvas!
</canvas>
<button onclick="drawImg('./images/lvjing.jpg');" >画图</button>
<button onclick="setColor();">添加颜色</button>
</body>
</html>
但是为什么将drawImg函数放在body的onload事件中，drawImg函数中的img对象的长宽却变成了0；如果单独在网页代码中嵌入<script>标签来执行该函数，得到的长宽也是0；但是如果写在一个按钮的onclick事件里面（比如代码中写在画图按钮的事件上），长宽就对了（即图片的长宽）。
上面代码是正确的。只是想去掉“画图”按钮，在网页加载完成的时候执行“画图”。但是问题就出现在该函数放在onload里面就出现了上面说的问题 展开
1个回答
展开全部
出现这个问题的原因是图片加载需要时间。你可以改成这样：
</body>
<script>
var img=new Image();
img.onload=function(){
drawImg('./images/lvjing.jpg');
};
img.src='./images/lvjing.jpg';
</script>
等待图片加载完成，再调用drawImg方法即可
</body>
<script>
var img=new Image();
img.onload=function(){
drawImg('./images/lvjing.jpg');
};
img.src='./images/lvjing.jpg';
</script>
等待图片加载完成，再调用drawImg方法即可
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
