This commit is contained in:
季圣华
113
WebRoot/js/imgpreview/imagepreview.js
Normal file
113
WebRoot/js/imgpreview/imagepreview.js
Normal file
@@ -0,0 +1,113 @@
|
||||
function imagepreview(file, view, call) {
|
||||
|
||||
var maxHeight = view.clientHeight,
|
||||
maxWidth = view.clientWidth,
|
||||
doc = document;
|
||||
|
||||
function setsize(info, img){
|
||||
var iwidth, iheight;
|
||||
if((info.width / maxWidth) > (info.height / maxHeight)){
|
||||
iwidth = maxWidth;
|
||||
iheight = Math.round(iwidth * info.height / info.width);
|
||||
} else {
|
||||
iheight = maxHeight;
|
||||
iwidth = Math.round(iheight * info.width / info.height);
|
||||
}
|
||||
with(view.style){
|
||||
height = iheight + "px";
|
||||
width = iwidth + "px";
|
||||
overflow = "hidden";
|
||||
}
|
||||
if(img){
|
||||
with(img.style){
|
||||
height = width = "100%";
|
||||
}
|
||||
view.innerHTML = "";
|
||||
view.appendChild(img);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
try{
|
||||
new FileReader();
|
||||
file.addEventListener("change", function(e){
|
||||
var image = this.files[0];
|
||||
function fireError(){
|
||||
var evObj = doc.createEvent('Events');
|
||||
evObj.initEvent( 'error', true, false );
|
||||
file.dispatchEvent(evObj);
|
||||
file.value = "";
|
||||
}
|
||||
if(!/^image\//.test(image.type)){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
fireError();
|
||||
return false;
|
||||
}
|
||||
var reader = new FileReader(),
|
||||
img = new Image();
|
||||
reader.onerror = img.onerror = fireError;
|
||||
img.onload = function(){
|
||||
var info = {
|
||||
height: img.height,
|
||||
width: img.width,
|
||||
name: image.name,
|
||||
size: image.size
|
||||
};
|
||||
if( call(info) !== false ){
|
||||
setsize(info, img);
|
||||
}
|
||||
img.onload = img.onerror = null;
|
||||
}
|
||||
reader.onload = function (){
|
||||
img.src = reader.result;
|
||||
}
|
||||
reader.readAsDataURL(image);
|
||||
|
||||
}, false);
|
||||
}catch(ex){
|
||||
|
||||
file.attachEvent("onchange", function() {
|
||||
var path = file.value,
|
||||
tt = doc.createElement("tt"),
|
||||
name = path.slice(path.lastIndexOf("\\") + 1 );
|
||||
|
||||
if("XMLHttpRequest" in window){
|
||||
file.select();
|
||||
path = doc.selection.createRange().text,
|
||||
doc.selection.empty();
|
||||
}
|
||||
|
||||
function imgloader (mode){
|
||||
return "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + path + "', sizingMethod='" + mode + "')";
|
||||
}
|
||||
(doc.body || doc.documentElement).appendChild(tt);
|
||||
with(tt.runtimeStyle){
|
||||
filter = imgloader("image");
|
||||
zoom = width = height = 1;
|
||||
position = "absolute";
|
||||
right = "9999em";
|
||||
top = "-9999em";
|
||||
border = 0;
|
||||
}
|
||||
var info = {
|
||||
height: tt.offsetHeight,
|
||||
width: tt.offsetWidth,
|
||||
name: name
|
||||
};
|
||||
if( info.height > 1 || info.width > 1 ){
|
||||
if(call(info) !== false ){
|
||||
view.style.filter = imgloader("scale");
|
||||
setsize(info);
|
||||
}
|
||||
} else {
|
||||
file.fireEvent("onerror");
|
||||
event.cancelBubble = true;
|
||||
event.returnValue = false;
|
||||
this.value = "";
|
||||
}
|
||||
tt.parentNode.removeChild(tt);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
110
WebRoot/js/imgpreview/imgpreview.html
Normal file
110
WebRoot/js/imgpreview/imgpreview.html
Normal file
@@ -0,0 +1,110 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>图片上传前预览</title>
|
||||
<link href="imgup.css" rel="stylesheet" type="text/css">
|
||||
<style type="text/css">
|
||||
::-moz-focus-inner{
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
.ui_button,
|
||||
.ui_fileup {
|
||||
vertical-align: middle;
|
||||
border: 1px solid #ccc;
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
background: #FFF;
|
||||
font-size: 12px;
|
||||
*overflow: visible;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
}
|
||||
.ui_fileup {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ui_fileup input {
|
||||
filter: alpha(opacity=1);
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
font-size: 60px;
|
||||
cursor: default;
|
||||
width: auto;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
left: auto;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.avataria .cont {
|
||||
text-align: center;
|
||||
min-height: 1%;
|
||||
margin: 25px;
|
||||
width: 302px;
|
||||
_zoom: 1;
|
||||
}
|
||||
.avataria form {
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avataria .cont:after {
|
||||
content: "";
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
clear: both;
|
||||
}
|
||||
.thumb {
|
||||
float: right;
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
}
|
||||
.cropaera {
|
||||
clear: both;
|
||||
}
|
||||
.preview {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="avataria" title="头像上传前预览">
|
||||
<div class="cont">
|
||||
<div class="thumb"></div>
|
||||
<form enctype="application/x-www-form-urlencoded">
|
||||
<div class="ui_fileup"><input type="file" id="file" accept="image/*" onerror="alert('请选择一个图片')">浏览</div>
|
||||
|
||||
<input type="submit" class="ui_button" value="保存">
|
||||
<input name="crop" type="hidden">
|
||||
</form>
|
||||
</div>
|
||||
<div class="cont">
|
||||
<div id="preview" class="preview"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="jquery-1.8.3.min.js"></script>
|
||||
<script src="imagepreview.js"></script>
|
||||
<script src="jquery.crop.js"></script>
|
||||
<script>
|
||||
|
||||
imagepreview(document.getElementById("file"), document.getElementById("preview"), function(info){
|
||||
//alert("文件名:" + info.name + "\r\n图片原始高度:" + info.height + "\r\n图片原始宽度:" + info.width);
|
||||
//这里若return false则不预览图片
|
||||
|
||||
$("#preview").css({
|
||||
background: "none"
|
||||
});
|
||||
|
||||
//$("#preview").crop( function(e){
|
||||
//$("input[type='hidden']").val([e.top, e.left, e.height, e.width].toString());
|
||||
//}, ".thumb");
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
199
WebRoot/js/imgpreview/imgup.css
Normal file
199
WebRoot/js/imgpreview/imgup.css
Normal file
@@ -0,0 +1,199 @@
|
||||
.preview {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
.thumb {
|
||||
border: 1px solid #ccc;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.thumb div {
|
||||
position: relative;
|
||||
margin: -50px;
|
||||
left: -50%;
|
||||
top: -50%;
|
||||
zoom: 1;
|
||||
}
|
||||
.cropaera * {
|
||||
background: none;
|
||||
float: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.cropaera {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
margin: auto;
|
||||
}
|
||||
.cropmask {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.cropmask .mask_top,
|
||||
.cropmask .mask_left,
|
||||
.cropmask .mask_right,
|
||||
.cropmask .mask_bottom {
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#66000000,endColorStr=#66000000);
|
||||
background: rgba(0,0,0,.4);
|
||||
overflow: hidden;
|
||||
}
|
||||
.cropmask .mask_top {
|
||||
height: 25%;
|
||||
}
|
||||
.cropmask .mask_middle {
|
||||
height: 50%;
|
||||
}
|
||||
.cropmask .mask_middle {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
.cropmask .mask_middle .mask_left,
|
||||
.cropmask .mask_middle .mask_right {
|
||||
width: 25%;
|
||||
}
|
||||
.cropmask .mask_middle .mask_left,
|
||||
.cropmask .mask_middle .mask_right,
|
||||
.cropmask .mask_middle .mask_center {
|
||||
display: table-cell;
|
||||
}
|
||||
.cropmask .mask_center {
|
||||
height: 100%;
|
||||
}
|
||||
.cropmask .mask_bottom {
|
||||
height: 100%;
|
||||
clear: both;
|
||||
}
|
||||
.cropmask .viewport {
|
||||
border: 1px dashed #ccc;
|
||||
position: relative;
|
||||
cursor: move;
|
||||
margin: -1px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.cropmask .resize_n,
|
||||
.cropmask .resize_e,
|
||||
.cropmask .resize_s,
|
||||
.cropmask .resize_w {
|
||||
position: absolute;
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
}
|
||||
.cropmask .resize_e,
|
||||
.cropmask .resize_w {
|
||||
margin: 0 -3px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
}
|
||||
.cropmask .resize_n,
|
||||
.cropmask .resize_s {
|
||||
margin: -3px 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
.cropmask .resize_n {
|
||||
cursor: n-resize;
|
||||
top: 0;
|
||||
}
|
||||
.cropmask .resize_e {
|
||||
cursor: e-resize;
|
||||
right: 0;
|
||||
}
|
||||
.cropmask .resize_s {
|
||||
cursor: s-resize;
|
||||
bottom: 0;
|
||||
}
|
||||
.cropmask .resize_w {
|
||||
cursor: w-resize;
|
||||
left: 0;
|
||||
}
|
||||
.cropmask .point {
|
||||
border: 1px solid #fff;
|
||||
position: absolute;
|
||||
background: #000;
|
||||
overflow: hidden;
|
||||
margin: -4px;
|
||||
opacity: .4;
|
||||
height: 7px;
|
||||
width: 7px;
|
||||
filter: Alpha(Opacity=40);
|
||||
}
|
||||
.cropmask .resize .point {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
.cropmask .point_ne {
|
||||
cursor: ne-resize;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.cropmask .point_nw {
|
||||
cursor: nw-resize;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.cropmask .point_se {
|
||||
cursor: se-resize;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
.cropmask .point_sw {
|
||||
cursor: sw-resize;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.cropaera .ondrag .point,
|
||||
.cropaera .ondrag .resize,
|
||||
.cropaera .ondrag .viewport {
|
||||
cursor: inherit;
|
||||
}
|
||||
.cropaera .low .resize_e .point,
|
||||
.cropaera .low .resize_w .point,
|
||||
.cropaera .narrow .resize_n .point,
|
||||
.cropaera .narrow .resize_s .point {
|
||||
display: none;
|
||||
}
|
||||
:root .cropmask .mask_top,
|
||||
:root .cropmask .mask_left,
|
||||
:root .cropmask .mask_right,
|
||||
:root .cropmask .mask_bottom,
|
||||
:root .cropmask .viewport .point {
|
||||
filter: none;
|
||||
}
|
||||
.cropaera {
|
||||
*height: expression(firstChild.offsetHeight);
|
||||
*width: expression(firstChild.offsetWidth);
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
}
|
||||
.cropmask {
|
||||
*height: expression(offsetParent.clientHeight);
|
||||
*width: expression(offsetParent.clientWidth);
|
||||
}
|
||||
.cropmask .mask_middle {
|
||||
*overflow: hidden;
|
||||
}
|
||||
.cropmask .mask_left {
|
||||
*float: left;
|
||||
_margin-right: -3px;
|
||||
}
|
||||
.cropmask .mask_right {
|
||||
*float: right;
|
||||
_margin-left: -3px;
|
||||
}
|
||||
.cropmask .mask_left,
|
||||
.cropmask .mask_right {
|
||||
*padding-bottom: 999em;
|
||||
*margin-bottom: -999em;
|
||||
}
|
||||
.cropmask .mask_center {
|
||||
*zoom: 1;
|
||||
}
|
||||
2
WebRoot/js/imgpreview/jquery-1.8.3.min.js
vendored
Normal file
2
WebRoot/js/imgpreview/jquery-1.8.3.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
156
WebRoot/js/imgpreview/jquery.crop.js
Normal file
156
WebRoot/js/imgpreview/jquery.crop.js
Normal file
@@ -0,0 +1,156 @@
|
||||
(function(win, $, doc){
|
||||
var islteie7 /*@cc_on = (document.documentMode || 7) < 8 @*/,
|
||||
cropmask = '<div class="mask_right"></div>';
|
||||
cropmask = '<div class="cropmask"><div class="mask_top"></div><div class="mask_middle"><div class="mask_left"></div>' + ( islteie7 ? cropmask : "" ) + '<div class="mask_center"><div class="viewport"><div class="resize resize_n"><div class="point"></div></div><div class="resize resize_e"><div class="point"></div></div><div class="resize resize_s"><div class="point"></div></div><div class="resize resize_w"><div class="point"></div></div><div class="point point_ne"></div><div class="point point_nw"></div><div class="point point_se"></div><div class="point point_sw"></div></div></div>' + ( islteie7 ? "" : cropmask ) + '</div><div class="mask_bottom"></div></div>';
|
||||
|
||||
$.fn.crop = function(onChange, thumb){
|
||||
|
||||
var aera = $("<div>").addClass("cropaera").css("position", "relative"),
|
||||
image = $(this).css("margin", "auto"),
|
||||
parent = image.parent();
|
||||
|
||||
if(thumb){
|
||||
thumb = $(thumb);
|
||||
setTimeout(function(){
|
||||
thumb.html("");
|
||||
thumb.append(image.clone().removeAttr("id").css({
|
||||
position: "relative"
|
||||
}));
|
||||
setThumb();
|
||||
}, 300);
|
||||
}
|
||||
|
||||
if(parent.hasClass("cropaera")){
|
||||
parent.find(".mask_top, .mask_middle, .mask_left, .mask_right").attr("style", "");
|
||||
return this;
|
||||
}
|
||||
|
||||
aera.insertBefore(image);
|
||||
aera.append(image);
|
||||
aera.append(cropmask);
|
||||
|
||||
aera.bind("selectstart", function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
var drag,
|
||||
size,
|
||||
maskbox = aera.find(".cropmask");
|
||||
mask = {
|
||||
bottom: maskbox.find(".mask_bottom"),
|
||||
middle: maskbox.find(".mask_middle"),
|
||||
viewport: maskbox.find(".viewport"),
|
||||
right: maskbox.find(".mask_right"),
|
||||
left: maskbox.find(".mask_left"),
|
||||
top: maskbox.find(".mask_top"),
|
||||
mask: maskbox
|
||||
};
|
||||
|
||||
function posint(n){
|
||||
return Math.max(n, 0);
|
||||
}
|
||||
|
||||
function prec(n){
|
||||
return Math.round(n * 100) + "%";
|
||||
}
|
||||
|
||||
function getSize(){
|
||||
return {
|
||||
aeraHeight: mask.mask.height(),
|
||||
aeraWidth: mask.mask.width(),
|
||||
height: mask.middle.height(),
|
||||
width: mask.viewport.width(),
|
||||
right: mask.right.width(),
|
||||
left: mask.left.width(),
|
||||
top: mask.top.height()
|
||||
};
|
||||
}
|
||||
|
||||
function setThumb(){
|
||||
var cropSize = getSize(),
|
||||
rx = cropSize.aeraWidth / cropSize.width * thumb.width(),
|
||||
ry = cropSize.aeraHeight / cropSize.height * thumb.height();
|
||||
$(thumb.children()).css({
|
||||
width: rx,
|
||||
height: ry,
|
||||
left: cropSize.left / cropSize.aeraWidth * -rx,
|
||||
top: cropSize.top / cropSize.aeraHeight * -ry
|
||||
});
|
||||
};
|
||||
|
||||
var setSize = {
|
||||
height: function(o) {
|
||||
mask.middle.height(Math.min(mask.mask.height() - mask.top.height(), posint(size.height + o.y)));
|
||||
},
|
||||
right: function(o) {
|
||||
mask.right.width(Math.min(mask.mask.width() - mask.left.width(), posint(size.right - o.x)));
|
||||
},
|
||||
left: function(o) {
|
||||
mask.left.width(Math.min(mask.mask.width() - mask.right.width(), posint(size.left + o.x)));
|
||||
},
|
||||
top: function(o) {
|
||||
return posint(size.top + o.y);
|
||||
}
|
||||
};
|
||||
|
||||
aera.mousedown(function(e) {
|
||||
var cursor = $(e.target).css("cursor");
|
||||
drag = {
|
||||
x: e.pageX,
|
||||
y: e.pageY,
|
||||
type: cursor.replace(/-resize$/, "")
|
||||
};
|
||||
size = getSize();
|
||||
aera.css("cursor", cursor)
|
||||
mask.mask.addClass("ondrag");
|
||||
})
|
||||
$(document).bind("mouseup blur",function(e) {
|
||||
if(drag){
|
||||
onChange(getSize());
|
||||
}
|
||||
aera.css("cursor", "")
|
||||
mask.mask.removeClass("ondrag");
|
||||
drag = null;
|
||||
}).mousemove(function(e) {
|
||||
if(drag){
|
||||
if(thumb){
|
||||
setThumb();
|
||||
}
|
||||
var type = drag.type,
|
||||
offset = {
|
||||
x: e.pageX - drag.x,
|
||||
y: e.pageY - drag.y
|
||||
};
|
||||
if(type == "move"){
|
||||
if(mask.left.width()){
|
||||
setSize.right(offset);
|
||||
}
|
||||
if(mask.right.width()){
|
||||
setSize.left(offset);
|
||||
}
|
||||
|
||||
mask.top.height(Math.min(mask.mask.height() - mask.middle.height(), setSize.top(offset)));
|
||||
} else {
|
||||
if(/n/.test(type)){
|
||||
var top = Math.min(mask.bottom.position().top, setSize.top(offset));
|
||||
mask.top.height(top);
|
||||
mask.middle.height(size.height + size.top - top);
|
||||
}
|
||||
if(/w/.test(type)){
|
||||
setSize.left(offset);
|
||||
}
|
||||
if(/e/.test(type)){
|
||||
setSize.right(offset);
|
||||
}
|
||||
if(/s/.test(type)){
|
||||
setSize.height(offset);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
};
|
||||
})(this, this.jQuery, this.document);
|
||||
Reference in New Issue
Block a user