Question

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

Answer 1

//本地图片回显
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); //得到选中区域的高度 
}