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

yangyile2011 2015-07-02 01:06:06
我在本地导出一张图片到浏览器上显示(是ie浏览器),然后对这张图片进行裁剪,裁剪得到的图片宽高希望是按原图的宽高比例来得到的。意思就是若是一张图片1000*600,导入到浏览器显示成500*500,而后对图片进行裁剪,而裁剪的图片宽高是相对于1000*600的,而不是相对于500*500的。
想问一下用jquery如何回显图片并且能得到相对于原图尺寸的裁剪图片宽高?具体的代码示例再好不过了
我之前做的图片是1600*1200的,回显设为300*300,而后裁剪图片的宽高最多也就300*300,而我就是想变成宽高最多是1600*1200.可是就是不行,
有人说回显原图就行了呗,可是ie我死活就回显不出来原图,更别提能拿到原图的宽高了。
希望有人帮帮忙
...全文
167 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
yangyile2011 2015-07-03
  • 打赏
  • 举报
回复
有谁能解答呀,帮帮忙
yangyile2011 2015-07-02
  • 打赏
  • 举报
回复
引用 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都是相对于回显的图片来说,而我真正想要的是按原图尺寸裁剪到的宽高
xuzuning 2015-07-02
  • 打赏
  • 举报
回复
贴出你的代码,凭空说不清楚

87,885

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧