调整宽高比图像大小时出现excanvas错误
调整宽高比图像大小时出现excanvas错误
提问于 2012-03-03 06:16:50
下面的代码创建了全屏图像，并具有合适的比例。但这不适用于ie和excanvas。我不能解决这个问题。有什么帮助吗？
这是jsfiddle链接：http://jsfiddle.net/salt/Zs6uV/
解决方案：http://jsfiddle.net/salt/xpwZh/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>aspectratio test</title>
<script type="text/javascript">
function getWindowSize(typ) {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
if(typ=="width"){
return myWidth;
}else{
return myHeight;
};
};
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<!--[if IE]><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script><![endif]-->
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body style="margin:0px;" onLoad="setupBackground();">
<canvas id="myCanvas" style="position:absolute;left: 0px; top: 0px; z-index: 1;"></canvas>
<script type="text/javascript">
function setupBackground() {
canvas = document.getElementById('myCanvas');
if (typeof window.G_vmlCanvasManager!="undefined") {
canvas=window.G_vmlCanvasManager.initElement(canvas);
var ctx = canvas.getContext('2d');
}else{
var ctx = canvas.getContext('2d');
};
function draw() {
canvas.width = 0;
canvas.height = 0;
var divWidth = getWindowSize("width");
var divHeight = getWindowSize("height");
var yScale = divHeight / img.height;
var xScale = divWidth / img.width;
var newImgHeight = img.height * xScale;
var newImgWidth = divWidth;
if (divHeight >= newImgHeight) {
newImgHeight = divHeight;
newImgWidth = img.width * yScale;
};
canvas.width = divWidth;
canvas.height = divHeight;
var diffX =(Math.max(newImgWidth,divWidth)-Math.min(newImgWidth,divWidth))/2;
var diffY =(Math.max(newImgHeight,divHeight)-Math.min(newImgHeight,divHeight))/2;
var imgX=0-diffX;
var imgY=0-diffY;
ctx.drawImage(img,imgX,imgY,newImgWidth,newImgHeight);
};
var img = new Image();
img.onload = function() {
$(window).bind('resize', function() {
draw();
});
draw();
};
img.src ='http://userserve-ak.last.fm/serve/_/460496/Popperklopper.jpg';
};
</script>
</body>
</html>回答 1
Stack Overflow用户
发布于 2012-05-20 21:51:14
不确定这是不是你的问题，但是当你这样做的时候：
<!--[if IE]><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script><![endif]-->
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->应该是：
<!--[if IE]--><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script><!--[endif]-->
<!--[if lt IE 9]--><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><!--[endif]-->你保留了你的脚本文档，所以它不能在IE版本上工作，希望它能解决你的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9541137
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号