imediasun1,
думаю что настоящую обрезку можно сделать только на сервере, в скрипт добавил настройку показа фото сейчас берётся середина...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">*{
margin:0;
padding:0;
}
body{
background:#ccc;
}
.slider{
width:320px;
position:relative;
padding-top:320px;
margin:100px auto;
box-shadow:0 10px 20px -5px rgba(0,0,0,0.75);
overflow:hidden;
padding-bottom:20px;
}
.sp img{
position:absolute;
left:0;
top:0;
}
.slider input[name='slide_switch']{
display:none;
}
.slider label{
margin:18px 0 0 18px;
border:3px solid #999;
float:left;
cursor:pointer;
transition:all 0.5s;
opacity:0.6;
}
.slider label img{
display:block;
height:45px;
}
.slider input[name='slide_switch']:checked+label{
border-color:#666;
opacity:1;
}
.slider input[name='slide_switch']~span{
opacity:0;
-moz-transform:scale(1.1);
-ms-transform:scale(1.1);
-webkit-transform:scale(1.1);
-o-transform:scale(1.1);
transform:scale(1.1);
}
.slider input[name='slide_switch']:checked+label+span{
opacity:1;
-moz-transform:scale(1);
-ms-transform:scale(1);
-webkit-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
}
span{
width:320px;
position:absolute;
left:0;
top:0;
height:320px;
overflow:hidden;
transition:all 0.5s;
}
</style>
</head>
<body>
<input type="file" name="my-pic" id="file-field" class="image" multiple=""/><br>
<div class="slider" ></div>
<script>
$(function () {
$(".image").change(showPreviewImage_click);
})
var num = 0;
function showPreviewImage_click(e) {
var $input = $(this);
var inputFiles = this.files;
if (inputFiles == undefined || inputFiles.length == 0) return;
for (var i = 0; i < inputFiles.length; i++) {
var id = 'id' + ++num;
var input = $('<input/>', {
'type': "radio",
'name': "slide_switch",
'id': id
});
input.appendTo($('.slider'));
var label = $('<label/>', {
'for': id
});
var img_min = $('<img/>', {
'class': 'min'
});
img_min.appendTo(label);
label.appendTo($('.slider'));
var inputFile = inputFiles[i];
var img = $('<img/>', {
'class': 'slide'
});
var span = $('<span/>', {
'class': 'sp'
})
img.appendTo(span)
span.appendTo($('.slider'))
var reader = new FileReader();
reader.onload = (function (img1, img2) {
return function (event) {
img1.attr("src", event.target.result);
img2.load(function () {
var w = this.width;
var h = this.height;
w > h ? (this.height = 320, w = 320 * w / h, this.width = w, h = 320) : (this.width = 320, h = 320 * h / w, this.height = h, w = 320);
img2.css({
left: -(w - 320) / 2,//лево -> убрать в left /2 или право весь убрать весь left -> left : -(h-320)/2, для горизонтальных картинок
top: -(h - 320) / 2 //низ -> убрать в top /2 или верх весь убрать весь top -> ,top : -(h-320)/2 для вертикальных картинок
})
});
img2.attr("src", event.target.result);
};
})(img_min, img)
reader.onerror = function (event) {
alert("I AM ERROR: " + event.target.error.code);
};
reader.readAsDataURL(inputFile);
}
input.prop({
'checked': true
});
}
</script>
</body>
</html>
