我们想在一个背景图片里面合适的位置获取一个坐标（x, y）. 有了坐标在php中通过这些坐标位置合成一个新的图片。
如下面图所示：
[php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>在背景图片或者div层里面获取div成的坐标</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<style type="text/css">
table .tab-pane {display: none;border: 0px #F7F8F9;background: #F7F8F9;}
table .in {display: block;}
.tab-nav span a {font-size: 16px;margin-left: 18px;font-weight: bold;color: #2d7200;}
.tab-nav .current a {color: red;}
.a_fuzhi{border:1px solid #ccc; background-color:#ddd; padding:7px 13px; text-decoration:none;}
.a_fuzhi:hover{text-decoration:none;}
a.a_btn{border:1px solid #ccc; background-color:#ddd; padding:8px 20px; margin:10px 0 20px; font-size:18px;}
a.a_btn:hover{text-decoration:none;}
ul.ul_shuoming li{width:24%; display:inline-block; line-height:22px;}
.edit_operating a{border:1px solid #ccc; padding:2px 5px; border-radius:2px; background-color:#f5f5f5; text-decoration:none; margin:0 7px;}
#div_head_images_url{width:130px; height:130px; position:absolute; top:0; background:#fff; border-radius:65px; cursor:move; text-align:center; line-height:130px;}
#div_qrcode_images_url{width:216px; height:216px; position:absolute; bottom:0; background:#fff; cursor:move; text-align:center; line-height:216px;}
#div_nickname_images_url{position:absolute; top:135px; background:#fff; cursor:move; text-align:center; height:30px; line-height:30px; width:110px; font-size:12px;}
.qrcode_chongzhi{border:1px solid #ccc; background-color:#ddd; padding:4px 20px; margin:7px 0 20px; font-size:14px;}
a.qrcode_chongzhi:hover{text-decoration:none;}
</style>
</head>
<body>
<table id="addeditable" border="1" cellpadding="0" cellspacing="0" bordercolor="#DDDDDD">
<tbody id="tab" class="tab-pane tabqrcode_coordinate in">
<tr>
<td width="115px" align="right">头像当前坐标：</td>
<td> <input name="head_image_coordinate" type="text" class="head_image_coordinate" value="257,405" style="width:300px" /></td>
</tr>
<tr>
<td width="115px" align="right">昵称当前坐标：</td>
<td> <input name="nickname_image_coordinate" type="text" class="nickname_image_coordinate" value="263,580" style="width:300px" /></td>
</tr>
<tr>
<td width="115px" align="right">二维码当前坐标：</td>
<td> <input name="qrcode_image_coordinate" type="text" class="qrcode_image_coordinate" value="72,710" style="width:300px" /></td>
</tr>
<tr>
<td width="115px" align="right"></td>
<td height="50px;"> <a class="qrcode_chongzhi" href="javascript:void()"> 重置坐标 </a> </td>
</tr>
<tr>
<td width="115px" align="right"></td>
<td>
<div class="images_edit" style="position:relative; background:#666;"><img id="upload_img_url" class="get_bj_img" src="http://sayii2.hainibao.com/upload/2017/1217/16334453096.jpg" /><div id="div_head_images_url" style="left:257px; top:405px;">头像</div><div id="div_nickname_images_url" style="left:263px; top:580px;">昵称昵称昵称昵称</div><div id="div_qrcode_images_url" style="left:72px; top:710px;">二维码</div></div>
</td>
</tr>
<tr>
<td> </td>
<td> <input type="hidden" name="substatus" value="1"><input type="submit" name="sub" value=" 保 存 "></td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function(){
var _x, _y, isMove = false;
//头像坐标获取
$(‘#div_head_images_url’).mousedown(function(e){
_x = e.pageX – parseInt($(‘#div_head_images_url’).css(‘left’));
_y = e.pageY – parseInt($(‘#div_head_images_url’).css(‘top’));
$(‘#div_head_images_url’).fadeTo(20, 0.5);
isMove = true;
});
$(‘#div_head_images_url’).mousemove(function(e){
if(isMove){
var x = e.pageX – _x;
var y = e.pageY – _y;
var wth = $(‘.images_edit .get_bj_img’).width() – $(this).width();
var hth = $(‘.images_edit .get_bj_img’).height() – $(this).height();
if(x < 0){
x = 0;
$("#div_head_images_url").css({left:x});
}
if(y < 0){
y = 0;
$("#div_head_images_url").css({top:y});
}
if(x > wth){
x = wth;
$("#div_head_images_url").css({left:wth});
}
if(y > hth){
y = hth;
$("#div_head_images_url").css({top:hth});
}
$("#div_head_images_url").css({left:x, top:y});
$(‘.head_image_coordinate’).val(x+’,’+y);
}
});
$(‘#div_head_images_url’).mouseup(function(e){
isMove = false;
$(‘#div_head_images_url’).fadeTo(‘fast’, 1);
});
//二维码坐标获取
$(‘#div_qrcode_images_url’).mousedown(function(e){
_x = e.pageX – parseInt($(‘#div_qrcode_images_url’).css(‘left’));
_y = e.pageY – parseInt($(‘#div_qrcode_images_url’).css(‘top’));
$(‘#div_qrcode_images_url’).fadeTo(20, 0.5);
isMove = true;
});
$(‘#div_qrcode_images_url’).mousemove(function(e){
if(isMove){
var x = e.pageX – _x;
var y = e.pageY – _y;
var wth = $(‘.images_edit .get_bj_img’).width() – $(this).width();
var hth = $(‘.images_edit .get_bj_img’).height() – $(this).height();
if(x < 0){
x = 0;
$("#div_qrcode_images_url").css({left:x});
}
if(y < 0){
y = 0;
$("#div_qrcode_images_url").css({top:y});
}
if(x > wth){
x = wth;
$("#div_qrcode_images_url").css({left:wth});
}
if(y > hth){
y = hth;
$("#div_qrcode_images_url").css({top:hth});
}
$("#div_qrcode_images_url").css({left:x, top:y});
$(‘.qrcode_image_coordinate’).val(x+’,’+y);
}
});
$(‘#div_qrcode_images_url’).mouseup(function(e){
isMove = false;
$(‘#div_qrcode_images_url’).fadeTo(‘fast’, 1);
});
//昵称坐标获取
$(‘#div_nickname_images_url’).mousedown(function(e){
_x = e.pageX – parseInt($(‘#div_nickname_images_url’).css(‘left’));
_y = e.pageY – parseInt($(‘#div_nickname_images_url’).css(‘top’));
$(‘#div_nickname_images_url’).fadeTo(20, 0.5);
isMove = true;
});
$(‘#div_nickname_images_url’).mousemove(function(e){
if(isMove){
var x = e.pageX – _x;
var y = e.pageY – _y;
var wth = $(‘.images_edit .get_bj_img’).width() – $(this).width();
var hth = $(‘.images_edit .get_bj_img’).height() – $(this).height();
if(x < 0){
x = 0;
$("#div_nickname_images_url").css({left:x});
}
if(y < 0){
y = 0;
$("#div_nickname_images_url").css({top:y});
}
if(x > wth){
x = wth;
$("#div_nickname_images_url").css({left:wth});
}
if(y > hth){
y = hth;
$("#div_nickname_images_url").css({top:hth});
}
$("#div_nickname_images_url").css({left:x, top:y});
$(‘.nickname_image_coordinate’).val(x+’,’+y);
}
});
$(‘#div_nickname_images_url’).mouseup(function(e){
isMove = false;
$(‘#div_nickname_images_url’).fadeTo(‘fast’, 1);
});
$(‘.qrcode_chongzhi’).click(function(){
$("#div_head_images_url").css({left:0, top:0});
$("#div_nickname_images_url").css({left:0, top:135});
$("#div_qrcode_images_url").css({left:150, top:0});
});
});
</script>
</body>
</html>
[/php]
发表评论