<script language="JavaScript">
var flag=false;
function DrawImage(ImgD){
var image=new Image();
imagesrc=ImgDsrc;
if(imagewidth>0 && imageheight>0){
flag=true;
if(imagewidth/imageheight>= 200/200){
if(imagewidth>200){
ImgDwidth=200;
ImgDheight=(imageheight200)/imagewidth;
}else{
ImgDwidth=imagewidth;
ImgDheight=imageheight;
}
}
else{
if(imageheight>200){
ImgDheight=200;
ImgDwidth=(imagewidth200)/imageheight;
}else{
ImgDwidth=imagewidth;
ImgDheight=imageheight;
}
}
}
}
</script>
上面这段写在 head里
下面的代码写到body里：
<img src=# onload=javascript:DrawImage(this); >如果你的是用img插入的，那么就在js中控制img标签的宽高；
如果是以背景插入的，那你应该用一个class来控制容器的样式。
当然如果你容器是固定宽高的话，最好的办法就是制作等大小的。同时css中有个backgroud-size可以很好来缩放背景。
见证奇迹的时刻到了：
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<style>
{
margin: 0;
padding: 0
}
box {
position: absolute;
top: 100px;
left: 100px;
}
/四边/
box t,
box b,
box l,
box r {
position: absolute;
z-index: 1;
background:#666;
}
box l,
box r {
width: 10px;
height: 100%;
cursor: col-resize;
}
box t,
box b {
width: 100%;
height: 10px;
cursor: row-resize;
}
box t {
top: 0;
}
box b {
bottom: 0;
}
box l {
left: 0;
}
box r {
right: 0;
}
/四角/
box tl,
box bl,
box br,
box tr {
width: 20px;
height: 20px;
position: absolute;
background: #CCC;
z-index: 2;
cursor: nwse-resize
}
box tl,
box bl {
left: -5px;
}
box tr,
box br {
right: -5px;
}
box br,
box bl {
bottom: -5px;
}
box tl,
box tr {
top: -5px;
}
box tr,
box bl {
cursor: nesw-resize;
}
//
img {
width: 100%;
height: 100%;
}
</style>
<script>
windowonload = function () {
var oDiv = documentgetElementsByTagName('div')[0];
oDivstylewidth = '500px';
var aSpan = oDivgetElementsByTagName('span');
for (var i = 0; i < aSpanlength; i++) {
dragFn(aSpan[i]);
}
function dragFn(obj) {
objonmousedown = function (ev) {
var oEv = ev || event;
var oldWidth = oDivoffsetWidth;
var oldHeight = oDivoffsetHeight;
var oldX = oEvclientX;
var oldY = oEvclientY;
var oldLeft = oDivoffsetLeft;
var oldTop = oDivoffsetTop;
documentonmousemove = function (ev) {
var oEv = ev || event;
if (objclassName == 'tl') {
oDivstylewidth = oldWidth - (oEvclientX - oldX) + 'px';
oDivstyleheight=oldHeight-(oEvclientY-oldY)+'px';
oDivstyleleft = oldLeft + (oEvclientX - oldX) + 'px';
oDivstyletop = oldTop + (oEvclientY - oldY) + 'px';
}
else if (objclassName == 'bl') {
oDivstylewidth = oldWidth - (oEvclientX - oldX) + 'px';
oDivstyleheight=oldHeight+(oEvclientY-oldY)+'px';
oDivstyleleft = oldLeft + (oEvclientX - oldX) + 'px';
oDivstylebottom = oldTop + (oEvclientY + oldY) + 'px';
}
else if (objclassName == 'tr') {
oDivstylewidth = oldWidth + (oEvclientX - oldX) + 'px';
oDivstyleheight = oldHeight - (oEvclientY - oldY)+'px';
oDivstyleright = oldLeft - (oEvclientX - oldX) + 'px';
oDivstyletop = oldTop + (oEvclientY - oldY) + 'px';
}
else if (objclassName == 'br') {
oDivstylewidth = oldWidth + (oEvclientX - oldX) + 'px';
oDivstyleheight = oldHeight + (oEvclientY - oldY)+'px';
oDivstyleright = oldLeft - (oEvclientX - oldX) + 'px';
oDivstylebottom = oldTop + (oEvclientY + oldY) + 'px';
}
else if (objclassName == 't') {
oDivstyleheight=oldHeight-(oEvclientY-oldY)+'px';
oDivstyletop = oldTop + (oEvclientY - oldY) + 'px';
}
else if (objclassName == 'b') {
oDivstyleheight = oldHeight + (oEvclientY - oldY)+'px';
oDivstylebottom = oldTop - (oEvclientY + oldY) + 'px';
}
else if (objclassName == 'l') {
oDivstyleheight = oldHeight + 'px';
oDivstylewidth = oldWidth - (oEvclientX - oldX) + 'px';
oDivstyleleft = oldLeft + (oEvclientX - oldX) + 'px';
}
else if (objclassName == 'r') {
oDivstyleheight = oldHeight + 'px';
oDivstylewidth = oldWidth + (oEvclientX - oldX) + 'px';
oDivstyleright = oldLeft - (oEvclientX - oldX) + 'px';
}
};
documentonmouseup = function () {
documentonmousemove = null;
};
return false;
};
}
};
</script>
</head>
<body>
<div class="box">
<span class="r"></span>
<span class="l"></span>
<span class="t"></span>
<span class="b"></span>
<span class="br"></span>
<span class="bl"></span>
<span class="tr"></span>
<span class="tl"></span>
<img src=">你说的这种最好用flash 实现，首先js截图不现实，好多浏览器都不行。
如果一定要用js的话，只能是先设置要截图的位置坐标，然后把要截取的位置信息坐标传给java，java后台根据位置坐标截取。我做的那个头像上传的差价都是用flash做的。这个我想跟您的flash有关系，如果flash是自适应宽高的话（flash宽度改变里面的内容也自动按比例改变）那你只需要修改
var focus_width = 660;
var focus_height = 310;
这两个参数就可以了。但是如果是flash里面是把宽高写死的话那你就只有修改flash的源文件代码了。接到了一个开发任务，需要能够拉伸缩放，以及上缩放边框。
简单来说，就是个宽度不超过范围，高度自由拉伸的效果，以及一个有底图，宽高都要在 *** 作对象内的缩放。
具体的处理细节，将上传到我的zjj-components中。组件名为PictureResize
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）