php+ajax カットピクチャ_PHP チュートリアル
- WBOYオリジナル
- 2016-07-20 11:05:401195ブラウズ
< script>
//ターゲット ソース
var target;
//補助コンテナをドラッグ
var helper;
//デフォルトのマウス状態 (false=押されていない)
var iMouseDown=false;
//現在のターゲット ソース
var ctar;
//マウスオフセット
var MouseOff;
//ajax関連
var ajax;
//数値クラスのNANA0を継承します。目的は、数値が100pxの場合、100を返すことです。
Number.prototype.NaN0=function(){return isNaN(this)?0:this;}
//AJAXの初期化
function createRequest(){
var ajax;
if(window.ActiveXObject){
try{
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
ajax = false;
}
}else{
try{
ajax = new XMLHttpRequest();
}catch(e){
ajax = false;
}
}
if(!ajax){
alert("XMLHttpRequestオブジェクトの作成中にエラーが発生しました。");
}else{
return ajax;
}
}
//Return AJAX request
function Cutp(cutC ) {
ajax=createRequest();
ajax.onreadystatechange = action;
//リクエストされた URL を送信します
url = "path=./test1.jpg&x="+parseInt(cutC.style.left)+"&y=" + parseInt(cutC.style.top)+"&width="+parseInt(cutC.offsetWidth)+"&height="+parseInt
(cutC.offsetHeight);
window.status = url;
ajax.open("GET" , "image.php?"+url, true);
ajax.send(null);
}
function action(){
var show = document.getElementById("show");
//元々このコンテナを SHOW する場合 If子ノードがある場合、子ノードがわかります
if(show.hasChildNodes()){
show.removeChild(show.childNodes[0]);
}
//ステータスが 4&200 の場合に情報を返します
if(ajax .readyState= =4&&ajax.status==200){
show.innerHTML = ajax.responseText;
}
}
//ドラッグ可能なコンテナを作成します
function createContainer(arg){
helper = document.getElementById('helper') ;
//属性を設定します
helper.setAttribute("cut",1);
arg.onmouseover = function(){
helper.style.display="block";
}
arg.onmouseout = function(){
helper. style.display="none";
}
helper.ondblclick = function(){
cutp(helper);
}
}
//マウスの位置を取得します
function MouseCoords(ev){
if(ev. pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y :ev. clientY + document.body.scrollTop - document.body.clientTop
};
}
//現在のコンテナのマウス オフセットを取得します
function getMouseOffset(target, ev){
ev = ev ||イベント;
var docPos = getPosition(target);
var MousePos = MouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}
//Getマウスの相対位置 親ノードのオフセット
function getPosition(e){
var left = 0;
var top = 0;
while (e.offsetParent){
left += e.offsetLeft + (e.currentStyle? (parseInt(e .currentStyle.borderLeftWidth)).NaN0():0);
top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
e = e.offsetParent;
}
left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top += e.offsetTop + (e. currentStyle?(parseInt (e.currentStyle.borderTopWidth)).NaN0():0);
return {x:left, y:top};
}
//マウス移動ペナルティ function
function MouseMove(ev){
ev = ev| |window.event;
var tar = ev.target||ev.srcElement;
var MousePos = MouseCoords(ev);
var rootar = tar.parentNode;
var MouseOf = getPosition(rootar);
//ステータスを判断します
if(iMouseDown&&mouseOff){
var limLefX=mouseOf. var conTop =mousePos.y-mouseOff.y;
if(conLeft>=mouseOf.x&&conLeft<=limLefX){
helper.style.left = MousePos.x- MouseOff.x;
}
if(conTop>=mouseOf. y&&conTop<=limBottomY){
helper.style.top =mousePos.y-mouseOff.y;
}
}
}
//マウスボタンを押す関数
functionmouseUp(){
iMouseDown = false;
}
//マウスボタンを押す関数
functionmouseDown(ev){
iMouseDown = true;
ev = ev||window.event;
var tar = ev.target||ev.srcElement;
if(tar.getAttribute("cut")){
var hmouseOff = getPosition(tar);
ヘルパー.style.left = hmouseOff.x;
helper.style.top = hmouseOff.y;
MouseOff = getMouseOffset(tar,ev);
}
}
//イベントをリッスンします
document.onmouseup = MouseUp;
document。 onmousemove = MouseMove;
document.onmousedown = MouseDown;
window.onload=function(){
target = document.getElementById("image");
createContainer(target);
}