如何用jquery在缩略图的基础上裁剪出原图的尺寸

[yangyile2011]

我在本地导出一张图片到浏览器上显示（是ie浏览器），然后对这张图片进行裁剪，裁剪得到的图片宽高希望是按原图的宽高比例来得到的。意思就是若是一张图片1000*600，导入到浏览器显示成500*500，而后对图片进行裁剪，而裁剪的图片宽高是相对于1000*600的，而不是相对于500*500的。
想问一下用jquery如何回显图片并且能得到相对于原图尺寸的裁剪图片宽高？具体的代码示例再好不过了
我之前做的图片是1600*1200的，回显设为300*300，而后裁剪图片的宽高最多也就300*300，而我就是想变成宽高最多是1600*1200.可是就是不行，
有人说回显原图就行了呗，可是ie我死活就回显不出来原图，更别提能拿到原图的宽高了。
希望有人帮帮忙

[xuzuning]

贴出你的代码，凭空说不清楚

[yangyile2011]

引用 1 楼 xuzuning 的回复:

贴出你的代码，凭空说不清楚

//本地图片回显
function PreviewImage(obj, imgPreviewId, divPreviewId) {
    var allowExtention = ".jpg,.bmp,.gif,.png"; //,允许上传文件的后缀名
    var extention = obj.value.substring(obj.value.lastIndexOf(".") + 1).toLowerCase();
    var browserVersion = window.navigator.userAgent.toUpperCase();
    if (allowExtention.indexOf(extention) > -1) {
        if (browserVersion.indexOf("MSIE") > -1) {
            if (browserVersion.indexOf("MSIE 6.0") > -1) {//ie6
                document.getElementById(imgPreviewId).setAttribute("src", obj.value);
            } else {//ie[7-8]、ie9
                obj.select();
                var newPreview = document.getElementById(divPreviewId + "New");
                if (newPreview == null) {
                    newPreview = document.createElement("div");
                    newPreview.setAttribute("id", divPreviewId + "New");
                    newPreview.style.width = 300;
                    newPreview.style.height = 300;
                    newPreview.style.border = "solid 1px #d2e2e2";
                }
                newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + "../../imgs/cssimg/table/iconedit.gif" + "')";
                var tempDivPreview = document.getElementById(divPreviewId);
                tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview);
                tempDivPreview.style.display = "none";
            }
        } else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
            var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
            if (firefoxVersion < 7) {//firefox7以下版本
                document.getElementById(imgPreviewId).setAttribute("src", obj.files[0].getAsDataURL());
            } else {//firefox7.0+                    
                document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(obj.files[0]));
            }
        } else if (obj.files) {
            //兼容chrome、火狐等，HTML5获取路径                   
            if (typeof FileReader !== "undefined") {
                var reader = new FileReader();
                reader.onload = function (e) {
                    document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
                };
                reader.readAsDataURL(obj.files[0]);
            } else if (browserVersion.indexOf("SAFARI") > -1) {
                alert("暂时不支持Safari浏览器!");
            }
        } else {
            document.getElementById(divPreviewId).setAttribute("src", obj.value);
        }
    } else {
        alert("仅支持" + allowExtention + "为后缀名的文件!");
        obj.value = ""; //清空选中文件
        if (browserVersion.indexOf("MSIE") > -1) {
            obj.select();
            document.selection.clear();
        }
        obj.outerHTML = obj.outerHTML;
    }
    
}


 //选取车辆图片的特征
function openImg(){
//	window.showModalDialog("openCarImg.jsp", "","dialogHeight:300px;dialogWidth:300px");
	var picUrl = document.selection.createRange().text;//图片路径
	if(picUrl == "" || picUrl == null){
		alert("请先导入图片");
		return;
	}
	$("#divNewPreviewNew").Jcrop({
		onChange:showCoords, //当选择区域变化的时候，执行对应的回调函数 
		onSelect:showCoords //当选中区域的时候，执行对应的回调函数 
	}); 
}
function showCoords(c) { 
	$("#txtX1").val(c.x); //得到选中区域左上角横坐标 
	$("#txtY1").val(c.y); //得到选中区域左上角纵坐标 
	$("#txtX2").val(c.x2); //得到选中区域右下角横坐标 
	$("#txtY2").val(c.y2); //得到选中区域右下角纵坐标 
	$("#txtWidth").val(c.w); //得到选中区域的宽度 
	$("#txtHeight").val(c.h); //得到选中区域的高度 
}

<td width="10%" align="right">
		选择车辆图片：
</td>
<td width="18%" id="">
		<input type="file" name="file5" id="file5" onchange="PreviewImage(this,'imgView','divNewPreview')"/> 
		<div id="divNewPreview" class="">
			<img id="imgView" src=""  alt=""/><br/>
		</div>
</td>
<td width="33%">
		<input  id='chooseBt' name="button" type="button" onclick="openImg()" value="选取车辆特征" />		
</td>

<tr>
	<td width="10%" align="right"><label>x1:</label><input type="text" id="txtX1" /></td>
	<td>      <label>y1:</label><input type="text" id="txtY1" /> </td> 
</tr>
<tr>
	<td width="10%" align="right"><label>x2:</label><input type="text" id="txtX2" /></td>
	<td>      <label>y2:</label><input type="text" id="txtY2" /></td>
</tr>	
<tr>
	<td width="10%" align="right"><label>width:</label><input type="text" id="txtWidth" /></td>
	<td><label>height:</label><input type="text" id="txtHeight" /></td>
</tr>

这个就是我的代码，包括本地导入图片回显和图片裁剪。裁剪到的x1,x2,y1,y2都是相对于回显的图片来说，而我真正想要的是按原图尺寸裁剪到的宽高

[yangyile2011]

有谁能解答呀，帮帮忙