HTML>根据窗口和图像大小旋转和缩放图像
[英]HTML > Rotate and scale an image based on window and image size
问题描述
I am working in HTML / Javascript and am tyring to have an image be resized based on the window size. 
我正在使用HTML / Javascript工作，并根据窗口大小调整图像大小。 The image will take up all of the window space but maintain its aspect ratio when being resized. 图像将占用所有窗口空间，但在调整大小时保持其纵横比。 Also, the image will rotate and resize if the window size becomes greater than its longest side. 此外，如果窗口大小大于其最长边，则图像将旋转并调整大小。
For example, if an image is more wide than tall, and the window size changes to be very tall the image should rotate and resize in order to maximize the window space while keeping the aspect ratio of the image the same. 例如，如果图像比高度更宽，并且窗口尺寸变得非常高，则图像应该旋转并调整大小以便最大化窗口空间，同时保持图像的纵横比相同。 The image should also be centered on the screen so it will have the same dead speace on either side of the image. 图像也应该在屏幕上居中，这样它在图像的两侧都会有相同的死角。
I am not able to get this to work. 我无法让它发挥作用。 Here is my code so far. 到目前为止，这是我的代码。
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="test.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function resize_canvas(){
var main_canvas=document.getElementById("test");
var cxt=main_canvas.getContext("2d");
var img=new Image();
var ratio = 1;
var changed = 1;
var mid = 1;
var srcLink = "tall.JPG"; // test with tall and wide pics
main_canvas.width = window.innerWidth;
main_canvas.height = window.innerHeight;
img.src=srcLink;
if(window.innerWidth > window.innerHeight){ // if window port is wider than tall
changed = window.innerWidth / (img.width / img.height);
mid = window.innerHeight / 2;
img.onload = function()
{
if (img.width < img.height){
ratio = window.innerHeight / img.height;
changed = img.width * ratio;
cxt.rotate(90 * Math.PI / 180);
cxt.drawImage(img, 0, -img.height,changed,window.innerWidth);
} else {
cxt.drawImage(img,0,mid,window.innerWidth,changed);
}
} // end img onload call
}else{ // if window port is taller than wide
ratio = window.innerHeight / img.height;
changed = img.width * ratio;
mid = window.innerWidth / 2;
img.onload = function()
{
if (img.width > img.height){
ratio = window.innerWidth / img.width;
changed = img.height * ratio;
mid = window.innerHeight / 2 - changed / 2;
cxt.rotate(90 * Math.PI / 180);
cxt.drawImage(img, 0, -img.height,window.innerHeight,changed);
} else {
cxt.drawImage(img,mid,0,changed,window.innerHeight);
}
} // end img on load
} // end window size else block
} // end resize function
</script>
</head>
<body onload="resize_canvas();" onresize="resize_canvas();">
<canvas id="test"> canvas not supported </canvas>
</body>
</html>
css file
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#test
{
width: 100%; height: auto;
}
I spent many days on this as I am just learning but I'm running out of ideas on how to solve the problem. 我花了很多天才研究这个问题，但是我对如何解决这个问题的想法已经不多了。 Any help would be much appreciated. 任何帮助将非常感激。
Thanks. 谢谢。
1 个解决方案
解决方案1
1 2012-02-05 09:34:12
<html>
<head>
<script type="text/javascript" charset="utf-8">
window.onload = function() {
var fitAspectRatio = function(srcWidth, srcHeight, fitWidth, fitHeight) {
if(fitHeight > fitWidth) {
theta = Math.PI / 2;
var temp = srcWidth;
srcWidth = srcHeight;
srcHeight = temp;
} else {
theta = 0;
}
var ratio = [fitWidth / srcWidth, fitHeight / srcHeight];
ratio = Math.min(ratio[0], ratio[1]);
return {
width : srcWidth * ratio,
height : srcHeight * ratio,
angle : theta
};
};
var img = new Image();
img.src = 'tall.JPG';
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
window.onresize = function() {
var newsize = fitAspectRatio(img.width, img.height, window.innerWidth, window.innerHeight);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
img.centerX = canvas.width / 2;
img.centerY = canvas.height / 2;
if(newsize.angle != 0) {
ctx.translate(img.centerX, img.centerY);
ctx.rotate(newsize.angle);
ctx.translate(-img.centerX, -img.centerY);
ctx.drawImage(img, (canvas.width - newsize.height) / 2, (canvas.height - newsize.width) / 2, newsize.height, newsize.width);
} else {
ctx.drawImage(img, (canvas.width - newsize.width) / 2, (canvas.height - newsize.height) / 2, newsize.width, newsize.height);
}
};
window.onresize();
};
</script>
<style>
body {
background: #001;
}
#canvas1 {
position: absolute;
top: 0;
left: 0;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<canvas id="canvas1"></canvas>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.