Skip to content
GitLab
Commit dd5bee0e authored by 季圣华's avatar 季圣华
Browse files

No commit message 

No commit message
parent 943f1ecf
Expand all Hide whitespace changes
Inline Side-by-side
WebRoot/js/imgpreview/imagepreview.js 0 → 100644
View file @ dd5bee0e
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);
});
}
}
\ No newline at end of file
WebRoot/js/imgpreview/imgpreview.html 0 → 100644
View file @ dd5bee0e
<!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>
&nbsp;
<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>
WebRoot/js/imgpreview/imgup.css 0 → 100644
View file @ dd5bee0e
.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;
}
\ No newline at end of file
WebRoot/js/imgpreview/jquery-1.8.3.min.js 0 → 100644
View file @ dd5bee0e
This diff is collapsed.
WebRoot/js/imgpreview/jquery.crop.js 0 → 100644
View file @ dd5bee0e
(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);
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment