js固定比例裁剪缩略图????

生成的缩略图宽高比是固定的，但是不会变形。如果原图的宽高比大于设定的宽高比，就会自动剪掉左右两旁多余的图；如果原图的宽高比小于设定的宽高比，就会自动剪掉上下的多余的图,必然是纯js,谢谢！
再比如
一张图片为700*900裁剪后的缩略图为200*100如可实现？？？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

http://www.scriptlover.com/controls/ImageCopper/ImageCopper.html
通过 zoom 等比缩放后，用marginLeft，marginTop与width 裁剪,就将显示出想要的缩略图效果。
做了个比较简单的, 可以参考一下.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function Zoom(){
var div = $("container");
var bigImg = $("bigImg");
var width = parseInt(($("Width").value || 160), 10);
var height = parseInt(($("Height").value || 90), 10);
var oldWidth = bigImg.width;
var oldHeight = bigImg.height;
var scale = Math.max(width / oldWidth, height / oldHeight);

var newWidth = oldWidth * scale;
var newHeight = oldHeight * scale;

div.style.width = width + "px";
div.style.height = height + "px";
div.style.overflow = "hidden"; var smallImg = $("smallImg");
smallImg.style.display = "block";
smallImg.src = bigImg.src;
smallImg.style.width = newWidth + "px";
smallImg.style.height = newHeight + "px";
smallImg.style.marginLeft = (width - newWidth) / 2 + "px";
smallImg.style.marginTop = (height - newHeight) / 2 + "px";
}
</script>
</head><body>
<div id="container"><img id="smallImg" style="display:none" /></div><br />
缩略图大小:<input type="text" name="Width" id="Width" size="4"  /> - <input type="text" name="Height" id="Height" size="4" />
<input type="button" value="裁剪" onclick="Zoom()" />
<img id="bigImg" src="http://hiphotos.baidu.com/中国旅游名县/pic/item/56d16e00e83803a6e850cdb2.jpg" width="800" height="600" border="0" />
</body>
</html>
需要在图片外面加个div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function Zoom(obj, width, height){
var scale = Math.max(width / obj.width, height / obj.height);
var newWidth = obj.width * scale;
var newHeight = obj.height * scale;
var div = obj.parentNode; obj.width = newWidth;
obj.height = newHeight;
div.style.width = width + "px";
div.style.height = height + "px";
div.style.overflow = "hidden";
obj.style.marginLeft = (width - newWidth) / 2 + "px";
obj.style.marginTop = (height - newHeight) / 2 + "px";
}
</script>
</head><body>
<div><img src="http://hiphotos.baidu.com/中国旅游名县/pic/item/56d16e00e83803a6e850cdb2.jpg" onload="Zoom(this, 500, 100)"  border="0" /></div>
</body>
</html>
可以先在<img> 里设置个小点的width 和 height
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function Zoom(obj, width, height){
var img = new Image();
img.src = obj.src;
var scale = Math.max(width / img.width, height / img.height);
var newWidth = img.width * scale;
var newHeight = img.height * scale;
var div = obj.parentNode; obj.width = newWidth;
obj.height = newHeight;
div.style.width = width + "px";
div.style.height = height + "px";
div.style.overflow = "hidden";
obj.style.marginLeft = (width - newWidth) / 2 + "px";
obj.style.marginTop = (height - newHeight) / 2 + "px";
}
</script>
</head><body>
<div><img src="http://hiphotos.baidu.com/中国旅游名县/pic/item/56d16e00e83803a6e850cdb2.jpg" width="400" height="300" onload="Zoom(this, 500, 100)"  border="0" /></div>
</body>
</html>