<script type="text/javascript">
var imgCut = {
imgOpt : {
imgPrototypeId : 'imgPrototype',
imgViewId: 'imgView',
cutBox: 'cut',
viewLeft:0,
viewTop:0,
viewW:340, //裁剪宽
viewH:340, //裁剪高
protoW:440, //原宽 显示原图
protoH:440, //原高 显示原图
Callback : null
},
init : function(opts){
$.extend(imgCut.imgOpt, opts);
if(!document.getElementById(imgCut.imgOpt.imgPrototypeId) || !document.getElementById(imgCut.imgOpt.imgViewId) || !document.getElementById(imgCut.imgOpt.cutBox)){
alert('配置错误');
return false;
}
var imgA = document.getElementById(imgCut.imgOpt.imgPrototypeId);
var imgB = document.getElementById(imgCut.imgOpt.imgViewId);
var cut = document.getElementById(imgCut.imgOpt.cutBox);
var imgNew = new Image();
imgNew.src = imgA.src;
imgNew.onload = function() {
var _this = this;
var imgW = _this.width;
var imgH = _this.height;
imgCut.imgOpt.viewLeft = (imgCut.imgOpt.protoW-imgCut.imgOpt.viewW)/2;
imgCut.imgOpt.viewTop = (imgCut.imgOpt.protoH-imgCut.imgOpt.viewH)/2;
imgB.src = imgA.src;
imgB.style.left = -imgCut.imgOpt.viewLeft+(imgCut.imgOpt.protoW-Number(imgW))/2+'px';
imgB.style.top = -imgCut.imgOpt.viewTop+(imgCut.imgOpt.protoH-Number(imgH))/2+'px';
cut.style.left = imgCut.imgOpt.viewLeft+'px';
cut.style.top = imgCut.imgOpt.viewTop+'px';
cut.style.display = 'block';
imgCut.move();
return imgCut.imgOpt;
}
imgNew.onerror = function(){
alert('图片加载失败');
}
return imgCut.imgOpt;
},
move:function(){
var imgB = document.getElementById(imgCut.imgOpt.imgViewId);
var imgW = imgB.width;
var imgH = imgB.height;
var obj = document.getElementById(imgCut.imgOpt.cutBox);
var isMove = false;
var startPosition = movePosition = {x:0,y:0};
var cutPosition = {l:0,t:0};
obj.onmousedown = function(e){
isMove = true;
cutPosition = {l:this.style.left.replace('px',''),t:this.style.top.replace('px','')};
e = e ? e : window.event;
startPosition = {
x: e.pageX,
y: e.pageY
}
}
obj.onmouseup = obj.onmouseout = function(){ isMove = false; }
obj.onmousemove = function(e){
if(!isMove){ return}
e = e ? e : window.event;
movePosition = {
x: e.pageX,
y: e.pageY
}
var deltaX = Number(movePosition.x) - Number(startPosition.x) + Number(cutPosition.l);
var deltaY = Number(movePosition.y) - Number(startPosition.y) + Number(cutPosition.t);
0 > deltaX && (deltaX = 0);
0 > deltaY && (deltaY = 0);
(imgCut.imgOpt.protoW-imgCut.imgOpt.viewW) < deltaX && (deltaX = imgCut.imgOpt.protoW-imgCut.imgOpt.viewW);
(imgCut.imgOpt.protoH-imgCut.imgOpt.viewH) < deltaY && (deltaY = imgCut.imgOpt.protoH-imgCut.imgOpt.viewH);
imgCut.imgOpt.viewLeft = deltaX;
imgCut.imgOpt.viewTop = deltaY;
this.style.left = deltaX + 'px';
this.style.top = deltaY + 'px';
imgB.style.left = -imgCut.imgOpt.viewLeft+(imgCut.imgOpt.protoW-Number(imgW))/2+'px';
imgB.style.top = -imgCut.imgOpt.viewTop+(imgCut.imgOpt.protoH-Number(imgH))/2+'px';
}
}
};
var t = null;
function uploadCutImg(replaceUrl,fileElementId,past){
$.ajaxFileUpload
(
{
url:'/index.php?s=/Pc/Centerall/upload1.html', //用于文件上传的服务器端请求地址
secureuri: false, //一般设置为false
fileElementId: fileElementId, //文件上传空间的id属性 <input type="file" id="file" name="file" />
dataType: 'HTML', //返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
{
data = $.parseJSON(data);
$path = './Uploads/'+data.savepath+data.savename;
$("#"+replaceUrl).attr('src',$path);
$pastPath = $("#"+past).val();
if($pastPath != ""){
//删掉之前的照片
delImage($pastPath);
}
$("#"+past).val($path);
$("#doImgCut").css("display","inline-block");
t = imgCut.init();
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
}
)
}
function delImage(path){
$.post("/index.php?s=/Pc/Base/delImage.html",{
path : path
}, function(data, textStatus) {});
}
$('#doImgCut').on('click',function(){
var ileft=t.viewLeft;
var itop=t.viewTop;
var iw=t.viewW;
var ih=t.viewH;
var jqimg=$("#imgPrototype").attr('src');
$.ajax({
url: "{:U('Centerall/uploadImgCut')}",
type: 'post',
cache: false,
async: true, /*true异步执行,false*/
data: {'ileft':ileft,'itop':itop,'iw':iw,'ih':ih,'jqimg':jqimg},
dataType: 'json',
beforeSend:function(){ tusi("正在截图中...");},
success:function(data) {
if(data.state){
$("#vipuid").attr('src',data.url);
}
$("#doImgCut").css("display","none");
tusi(data.msg);
},
error : function() {
tusi("系统错误!");
}
});
});