CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

javanic Nybegynder

08. juni 2006 - 17:22 Der er 19 kommentarer og
1 løsning

Drag (flytte rundt på) et layer

Er der en der kan hjælpe med et script, der kan tegne et layer oven på et billede, som man efterfølgende kan "flytte rundt på" på billedet.

jeg har prøvet at lave det fra bunden i håb om at bliver klogere på layers og js, så jeg har en smule kode, hvis du/i skal se noget konkret.

På forhånd tak for hjælpen :)

Synes godt om

mclemens Nybegynder

09. juni 2006 - 00:56 #1

Puha, den var svær... her er lidt at arbejde videre på ...
lægger lige et svar samtidig, hvis det nu kan bruges :o)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
html,body{margin:0px;padding:0px;border:0px;}
body{margin:10px;}
#imgsel{margin:10px 0px;}
#apd{cursor:move;display:none;position:absolute;top:70px;left:10px;width:10px;height:10px;overflow:hidden;background:transparent;border:1px solid #fff;}
#dislo{position:absolute;top:0px;left:0px;width:0px;height:10px;background:transparent;}
#imgholder{position:relative;}
</style>

<script type="text/javascript">
var mp={"x":0,"y":0,"mpxa":0,"mpya":0,"mpxaa":0,"mpyaa":0}; // Mus positions object
var dp={"x":0,"y":0,"w":0,"h":0}; // Billede oplysnings object
var sc={"apd":1,"dislo":1,"dis":"","ditv":"","dith":"","dibv":"","dibh":"","dimx":"","dimy":"","dist":"","disl":"","disw":"","dish":""}; //Shortlink object

var chkfunc=0; // Funktions bestemmer

/* IE kontrol - af hensyn til musplacerings bug */
var IE=((document.all)&&(navigator.userAgent.indexOf("Opera")==-1))?true:false;
if(!IE)document.captureEvents(Event.mousemove)

window.onload=function(){

/* Short link aktivering */
for(i in sc)sc[i]=(sc[i]==1)?document.getElementById([i]):document.getElementsByName([i])[0];

/* Henter billedet position samt størrelse */
tn=sc.dis;
dp.x=tn.offsetLeft;
dp.y=tn.offsetTop;
dp.w=tn.offsetWidth;
dp.h=tn.offsetHeight;
while(tn=tn.offsetParent){
dp.x+=tn.offsetLeft;
dp.y+=tn.offsetTop;
}

/* Midlertidig output af dp objectets billede oplysninger */
sc.dist.value=dp.y;
sc.disl.value=dp.x;
sc.disw.value=dp.w;
sc.dish.value=dp.h;

/* Overfører width og height samt baggrund til ovenliggende div */
sc.dislo.style.width=dp.w+"px";
sc.dislo.style.height=dp.h+"px";
sc.dislo.style.background="url('"+sc.dis.src+"')";

confimg();
confdiv();
}

document.onmouseup=function(){chkfunc=0;}

document.onmousemove=function(e){
if(IE){
dmcst=(tmenu=document.documentElement.scrollTop)?tmenu:document.body.scrollTop;
dmcsl=(lmenu=document.documentElement.scrollLeft)?tmenu:document.body.scrollLeft;
dmcy=event.clientY+dmcst;
dmcx=event.clientX+dmcsl;
}else{
dmcy=e.pageY;
dmcx=e.pageX;
}
mp.x=dmcx;
mp.y=dmcy;

/* Midlertidig output af position ... - husk at
deaktivere i objectet sc også ved fjernelse */
sc.dimx.value=dmcx;
sc.dimy.value=dmcy;
}

function divpaint(){
sc.apd.style.width=((mp.x-dp.x)-sc.ditv.value.match(/[\d]*/g)[2])+"px";
sc.apd.style.height=((mp.y-dp.y)-sc.ditv.value.match(/[\d]*/)[0])+"px";
sc.dith.value=sc.ditv.value.match(/[\d]*/)[0]+","+(parseInt(sc.ditv.value.match(/[\d]*/g)[2])+parseInt(sc.apd.style.width.replace("px","")));

sc.dibv.value=parseInt(sc.ditv.value.match(/[\d]*/g)[0])+parseInt(sc.apd.style.height.replace("px",""))+","+sc.ditv.value.match(/[\d]*/g)[2];

sc.dibh.value=sc.dith.value.match(/[\d]*/g)[2]+","+sc.dibv.value.match(/[\d]*/)[0];
}

function confimg(){
tn=sc.dislo;
tn.onmousedown=function(){
chkfunc=1;
sc.apd.style.width="0px";
sc.apd.style.height="0px";
sc.apd.style.top=mp.y+"px";
sc.apd.style.left=mp.x+"px";
sc.apd.style.display="block";
sc.ditv.value=(mp.y-dp.y)+","+(mp.x-dp.x);
}
tn.onmousemove=function(){if(chkfunc==1)divpaint();}
}

function confdiv(){
tn=sc.apd;
tn.onmousedown=function(){
chkfunc=2;
mp.mpya=mp.y;
mp.mpxa=mp.x;
mp.mpxaa=sc.apd.style.left.replace("px","");
mp.mpyaa=sc.apd.style.top.replace("px","");
}
tn.onmousemove=function(){if(chkfunc==1)divpaint();if(chkfunc==2)divmove();}
}

function divmove(){
sc.apd.style.left=mp.mpxaa-mp.mpxa+mp.x+"px";
sc.apd.style.top=mp.mpyaa-mp.mpya+mp.y+"px";
}

</script>

</head><body>
<br><br><br>
<div id="imgholder"><img name="dis" src="b.jpg" id="disid"><div id="dislo"></div></div>

<form id="imgsel" action="#" method="post"><div>

<b style="text-decoration:underline">IMG - <DIV> OPLYSNINGER:</b><br>
Top venstre hjørne: <input type="text" name="ditv"><br>
Top højre hjørne: <input type="text" name="dith"><br>
Nederste venstre hjørne: <input type="text" name="dibv"><br>
Nederste højre hjørne: <input type="text" name="dibh"><br><br>

<b style="text-decoration:underline">Midlertidige mouse position oplysninger:</b><br>
X-position: <input type="text" name="dimx"><br>
Y-position: <input type="text" name="dimy"><br><br>

<b style="text-decoration:underline">Midlertidige billede oplysninger:</b><br>
Afstand til absolut left: <input type="text" name="disl"><br>
Afstand til absolut top: <input type="text" name="dist"><br>
Bredde på img: <input type="text" name="disw"><br>
Højde på img: <input type="text" name="dish">

</div></form>

<div id="apd"></div>
</body></html>

Synes godt om

mclemens Nybegynder

09. juni 2006 - 01:01 #2

Hov, der var fejl ved modsat drag vej, den havde jeg ikke lige set :/
- Det er lidt sent nu, kigger nok lidt på den i weekenden (lørdag eller søndag) :P

Synes godt om

javanic Nybegynder

09. juni 2006 - 01:02 #3

hej mcclemens :)

jeg kigger lige på det med det samme (og tak fordi du gider og har lyst til at hjælpe)

Sidder pt. og prøver at tilpasse et script, der faktisk kan det jeg søger - men prøver lige at kigge på det du har lavet og vender tilbage asap.

Synes godt om

mclemens Nybegynder

09. juni 2006 - 01:13 #4

Helt ok, skal til fødselsdag imorgen - jeg skal nok hjælpe, når jeg kommer
tilbage ... hvis du ikke har fået den til at spille med din egen inden...
Giver mig til at tælle får nu - skal "på arbejde" kl. 8:00 imorgen... :)

Synes godt om

javanic Nybegynder

09. juni 2006 - 01:15 #5

Der er i hvert fald noget i den retning, mcclemens.

Jeg har dog fået tilpasset et script, som pt. (er ikke helt færdig) kan croppe et billede, samt resize det pågældende layer.
Der er lavet lir med opacity, der gør at koden er lidt længere en mest nødvendigt, og det driller rent faktisk også lidt lige nu, hvor ikke helt kan se hvordan jeg initialiserer layeret til "start" størrelse - pt. er dækker layeret hele billedet når man starter...

Du kan lige få koden (i skrabet udgave), så du evt. kan kører eksemplet og kan se hvad jeg mener.

Synes godt om

javanic Nybegynder

09. juni 2006 - 01:25 #6

crop.js
----------------------- KLIP -------------------------
var crop_script_alwaysPreserveAspectRatio = false;
var crop_script_fixedRatio = false; // Fixed aspect ratio(example of value: 1.5). Width of cropping area relative to height(1.5 means that the width is 150% of the height)
// Set this variable to false if you don't want a fixed aspect ratio

var crop_script_browserIsOpera = navigator.userAgent.indexOf('Opera')>=0?true:false;
var cropDiv_left = false;
var cropDiv_top = false;
var cropDiv_right = false;
var cropDiv_bottom = false;
var cropDiv_dotted = false;

var crop_currentResizeType = false;

var cropEvent_posX;
var cropEvent_posY;

var cropEvent_eventX;
var cropEvent_eventY;
var crop_resizeCounter = -1;
var crop_moveCounter = -1;

var crop_imageDiv = false;
var imageDiv_currentWidth = false;
var imageDiv_currentHeight = false;
var imageDiv_currentLeft = false;
var imageDiv_currentTop = false;

var smallSquare_tl;
var smallSquare_tc;
var smallSquare_tr;
var smallSquare_lc;
var smallSquare_rc;
var smallSquare_bl;
var smallSquare_bc;
var smallSquare_br;

var offsetSmallSquares = Math.floor(smallSquareWidth/2);

var cropScriptAjaxObjects = new Array();
var preserveAspectRatio = false;

var cropWidthRatio = false; // width of cropping area relative to height
function crop_createDivElements()
{

crop_imageDiv= document.getElementById('imageContainer');

cropDiv_left = document.createElement('DIV');
cropDiv_left.className = 'crop_transparentDiv';
cropDiv_left.style.visibility = 'visible';
cropDiv_left.style.left = '0px';
cropDiv_left.style.top = '0px';
cropDiv_left.style.height = crop_imageHeight + 'px';
cropDiv_left.style.width = '0px';
cropDiv_left.innerHTML = '<span></span>';
crop_imageDiv.appendChild(cropDiv_left);

cropDiv_top = document.createElement('DIV');
cropDiv_top.className = 'crop_transparentDiv';
cropDiv_top.style.visibility = 'visible';
cropDiv_top.style.left = '0px';
cropDiv_top.style.top = '0px';
cropDiv_top.style.height = '0px';
cropDiv_top.style.width = crop_imageWidth + 'px';
cropDiv_top.innerHTML = '<span></span>';
crop_imageDiv.appendChild(cropDiv_top);

cropDiv_right = document.createElement('DIV');
cropDiv_right.className = 'crop_transparentDiv';
cropDiv_right.style.visibility = 'visible';
cropDiv_right.style.left = (crop_imageWidth) + 'px';
cropDiv_right.style.top = '0px';
cropDiv_right.style.height = crop_imageHeight + 'px';
cropDiv_right.style.width = '0px';
cropDiv_right.innerHTML = '<span></span>';
crop_imageDiv.appendChild(cropDiv_right);

cropDiv_bottom = document.createElement('DIV');
cropDiv_bottom.className = 'crop_transparentDiv';
cropDiv_bottom.style.visibility = 'visible';
cropDiv_bottom.style.left = '0px';
cropDiv_bottom.style.top = (crop_imageHeight) + 'px';
cropDiv_bottom.style.height = '0px';
cropDiv_bottom.style.width = crop_imageWidth + 'px';
cropDiv_bottom.innerHTML = '<span></span>';
crop_imageDiv.appendChild(cropDiv_bottom);

cropDiv_dotted = document.createElement('DIV');
cropDiv_dotted.className='crop_dottedDiv';
cropDiv_dotted.style.left = '0px';
cropDiv_dotted.style.top = '0px';
cropDiv_dotted.style.width = (crop_imageWidth-(cropToolBorderWidth*2)) + 'px';
cropDiv_dotted.style.height = (crop_imageHeight-(cropToolBorderWidth*2)) + 'px';
cropDiv_dotted.innerHTML = '<div></div>';
cropDiv_dotted.style.cursor = 'move';

if(crop_script_browserIsOpera){
var div = cropDiv_dotted.getElementsByTagName('DIV')[0];
div.style.backgroundColor='transparent';
cropDiv_bottom.style.backgroundColor='transparent';
cropDiv_right.style.backgroundColor='transparent';
cropDiv_top.style.backgroundColor='transparent';
cropDiv_left.style.backgroundColor='transparent';

}

cropDiv_dotted.onmousedown = cropScript_initMove;

smallSquare_tl = document.createElement('IMG');
smallSquare_tl.src = 'images/small_square.gif';
smallSquare_tl.style.position = 'absolute';
smallSquare_tl.style.left = (-offsetSmallSquares -(cropToolBorderWidth*2)) + 'px';
smallSquare_tl.style.top = (-offsetSmallSquares -(cropToolBorderWidth*2)) + 'px';
smallSquare_tl.style.cursor = 'nw-resize';
smallSquare_tl.id = 'nw-resize';
smallSquare_tl.onmousedown = cropScript_initResize;
cropDiv_dotted.appendChild(smallSquare_tl);

smallSquare_tr = document.createElement('IMG');
smallSquare_tr.src = 'images/small_square.gif';
smallSquare_tr.style.position = 'absolute';
smallSquare_tr.style.left = (crop_imageWidth - offsetSmallSquares - (cropToolBorderWidth*2)) + 'px';
smallSquare_tr.style.top = (-offsetSmallSquares -(cropToolBorderWidth*2)) + 'px';
smallSquare_tr.style.cursor = 'ne-resize';
smallSquare_tr.id = 'ne-resize';
smallSquare_tr.onmousedown = cropScript_initResize;
cropDiv_dotted.appendChild(smallSquare_tr);

smallSquare_bl = document.createElement('IMG');
smallSquare_bl.src = 'images/small_square.gif';
smallSquare_bl.style.position = 'absolute';
smallSquare_bl.style.left = (-offsetSmallSquares -(cropToolBorderWidth*2)) + 'px';
smallSquare_bl.style.top = (crop_imageHeight - offsetSmallSquares -(cropToolBorderWidth*2)) + 'px';
smallSquare_bl.style.cursor = 'sw-resize';
smallSquare_bl.id = 'sw-resize';
smallSquare_bl.onmousedown = cropScript_initResize;
cropDiv_dotted.appendChild(smallSquare_bl);

smallSquare_br = document.createElement('IMG');
smallSquare_br.src = 'images/small_square.gif';
smallSquare_br.style.position = 'absolute';
smallSquare_br.style.left = (crop_imageWidth - offsetSmallSquares -(cropToolBorderWidth*2)) + 'px';
smallSquare_br.style.top = (crop_imageHeight - offsetSmallSquares -(cropToolBorderWidth*2)) + 'px';
smallSquare_br.style.cursor = 'se-resize';
smallSquare_br.id = 'se-resize';
smallSquare_br.onmousedown = cropScript_initResize;
cropDiv_dotted.appendChild(smallSquare_br);

smallSquare_tc = document.createElement('IMG');
smallSquare_tc.src = 'images/small_square.gif';
smallSquare_tc.style.position = 'absolute';
smallSquare_tc.style.left = (Math.floor(crop_imageWidth/2) - offsetSmallSquares -(cropToolBorderWidth*2)) + 'px';
smallSquare_tc.style.top = (-offsetSmallSquares -(cropToolBorderWidth*2)) + 'px';
smallSquare_tc.style.cursor = 's-resize';
smallSquare_tc.id = 'n-resize';
smallSquare_tc.onmousedown = cropScript_initResize;
cropDiv_dotted.appendChild(smallSquare_tc);

smallSquare_bc = document.createElement('IMG');
smallSquare_bc.src = 'images/small_square.gif';
smallSquare_bc.style.position = 'absolute';
smallSquare_bc.style.left = (Math.floor(crop_imageWidth/2) - offsetSmallSquares -(cropToolBorderWidth*2)) + 'px';
smallSquare_bc.style.top = (crop_imageHeight - offsetSmallSquares -(cropToolBorderWidth*2)) + 'px';
smallSquare_bc.style.cursor = 's-resize';
smallSquare_bc.id = 's-resize';
smallSquare_bc.onmousedown = cropScript_initResize;
cropDiv_dotted.appendChild(smallSquare_bc);

smallSquare_lc = document.createElement('IMG');
smallSquare_lc.src = 'images/small_square.gif';
smallSquare_lc.style.position = 'absolute';
smallSquare_lc.style.left = (-offsetSmallSquares -(cropToolBorderWidth*2)) + 'px';
smallSquare_lc.style.top = (Math.floor(crop_imageHeight/2) - offsetSmallSquares -(cropToolBorderWidth*2)) + 'px';
smallSquare_lc.style.cursor = 'e-resize';
smallSquare_lc.id = 'w-resize';
smallSquare_lc.onmousedown = cropScript_initResize;
cropDiv_dotted.appendChild(smallSquare_lc);

smallSquare_rc = document.createElement('IMG');
smallSquare_rc.src = 'images/small_square.gif';
smallSquare_rc.style.position = 'absolute';
smallSquare_rc.style.left = (crop_imageWidth - offsetSmallSquares -(cropToolBorderWidth*2)) + 'px';
smallSquare_rc.style.top = (Math.floor(crop_imageHeight/2) - offsetSmallSquares -(cropToolBorderWidth*2)) + 'px';
smallSquare_rc.style.cursor = 'e-resize';
smallSquare_rc.id = 'e-resize';
smallSquare_rc.onmousedown = cropScript_initResize;
cropDiv_dotted.appendChild(smallSquare_rc);

crop_imageDiv.appendChild(cropDiv_dotted);
}

function cropScript_initMove(e)
{
if(document.all)e=event;

if (e.target) source = e.target;
else if (e.srcElement) source = e.srcElement;
if (source.nodeType == 3) // defeat Safari bug
source = source.parentNode;

if(source.id && source.id.indexOf('resize')>=0)return;

imageDiv_currentLeft = cropDiv_dotted.style.left.replace('px','')/1;
imageDiv_currentTop = cropDiv_dotted.style.top.replace('px','')/1;
imageDiv_currentWidth = cropDiv_dotted.style.width.replace('px','')/1;
imageDiv_currentHeight = cropDiv_dotted.style.height.replace('px','')/1;
cropEvent_eventX = e.clientX;
cropEvent_eventY = e.clientY;

crop_moveCounter = 0;
cropScript_timerMove();
return false;
}

function cropScript_timerMove()
{
if(crop_moveCounter>=0 && crop_moveCounter<10){
crop_moveCounter++;
setTimeout('cropScript_timerMove()',1);
return;
}

}

function cropScript_initResize(e)
{
if(document.all)e = event;

cropDiv_dotted.style.cursor = 'default';
crop_currentResizeType = this.id;

cropEvent_eventX = e.clientX;
cropEvent_eventY = e.clientY;
crop_resizeCounter = 0;
imageDiv_currentWidth = cropDiv_dotted.style.width.replace('px','')/1;
imageDiv_currentHeight = cropDiv_dotted.style.height.replace('px','')/1;
imageDiv_currentLeft = cropDiv_dotted.style.left.replace('px','')/1;
imageDiv_currentTop = cropDiv_dotted.style.top.replace('px','')/1;

cropWidthRatio = cropDiv_dotted.offsetWidth / cropDiv_dotted.offsetHeight;
if(crop_script_fixedRatio)cropWidthRatio = crop_script_fixedRatio;

if(document.all){
var div = cropDiv_dotted.getElementsByTagName('DIV')[0];
div.style.display='none';
}

cropScript_timerResize();
return false;

}

function cropScript_timerResize()
{
if(crop_resizeCounter>=0 && crop_resizeCounter<10){
crop_resizeCounter = crop_resizeCounter + 1;
setTimeout('cropScript_timerResize()',1);
return;
}

}

function cropScript_executeCrop(buttonObj)
{
buttonObj.style.visibility='hidden';
var ajaxIndex = cropScriptAjaxObjects.length;
cropScriptAjaxObjects[ajaxIndex] = new sack();
var url = crop_script_server_file + '?image_ref=' + document.getElementById('input_image_ref').value
+ '&x=' + document.getElementById('input_crop_x').value
+ '&y=' + document.getElementById('input_crop_y').value
+ '&width=' + document.getElementById('input_crop_width').value
+ '&height=' + document.getElementById('input_crop_height').value
+ '&percentSize=' + document.getElementById('crop_percent_size').value
+ '&convertTo=' + document.getElementById('input_convert_to').options[document.getElementById('input_convert_to').selectedIndex].value;

cropScriptAjaxObjects[ajaxIndex].requestFile = url; // Specifying which file to get
cropScriptAjaxObjects[ajaxIndex].onCompletion = function(){ cropScript_cropCompleted(ajaxIndex,buttonObj); }; // Specify function that will be executed after file has been found
cropScriptAjaxObjects[ajaxIndex].runAJAX(); // Execute AJAX function
}

function cropScript_cropCompleted(ajaxIndex,buttonObj)
{
buttonObj.style.visibility='';
eval(cropScriptAjaxObjects[ajaxIndex].response)
cropScriptAjaxObjects[ajaxIndex] = false;
}

function crop_cancelEvent(e)
{
if(document.all)e = event;
if (e.target) source = e.target;
else if (e.srcElement) source = e.srcElement;
if (source.nodeType == 3) // defeat Safari bug
source = source.parentNode;

if(source.tagName && source.tagName.toLowerCase()=='input')return true;
return false;
}

var mouseMoveEventInProgress = false;
function cropScript_mouseMove(e)
{

if(mouseMoveEventInProgress)return;
if(crop_moveCounter<10 && crop_resizeCounter<10)return;
if(document.all)mouseMoveEventInProgress = true;
if(document.all)e = event;

if(crop_resizeCounter==10){

if(crop_currentResizeType=='e-resize' || crop_currentResizeType=='ne-resize' || crop_currentResizeType == 'se-resize'){
cropDiv_dotted.style.width = Math.max(crop_minimumWidthHeight,(imageDiv_currentWidth + e.clientX - cropEvent_eventX)) + 'px';
}
if(crop_currentResizeType=='s-resize' || crop_currentResizeType=='sw-resize' || crop_currentResizeType == 'se-resize'){
cropDiv_dotted.style.height = Math.max(crop_minimumWidthHeight,(imageDiv_currentHeight + e.clientY - cropEvent_eventY)) + 'px';
}

if(crop_currentResizeType=='w-resize' || crop_currentResizeType=='sw-resize' || crop_currentResizeType=='nw-resize'){
var tmpTop = cropDiv_dotted.style.left.replace('px','')/1;
var newTop = Math.max(0,(imageDiv_currentLeft + e.clientX - cropEvent_eventX));
if((newTop + crop_minimumWidthHeight)> (cropDiv_dotted.style.left.replace('px','')/1 + cropDiv_dotted.style.width.replace('px','')/1)){
newTop = (cropDiv_dotted.style.left.replace('px','')/1 + cropDiv_dotted.style.width.replace('px','')/1) - crop_minimumWidthHeight;
}
cropDiv_dotted.style.left = newTop + 'px';
cropDiv_dotted.style.width = (cropDiv_dotted.style.width.replace('px','')/1 + tmpTop - cropDiv_dotted.style.left.replace('px','')/1) + 'px';
}

if(crop_currentResizeType=='n-resize' || crop_currentResizeType=='nw-resize' || crop_currentResizeType=='ne-resize'){
var tmpTop = cropDiv_dotted.style.top.replace('px','')/1;
var newTop = Math.max(0,(imageDiv_currentTop + e.clientY - cropEvent_eventY));
if((newTop + crop_minimumWidthHeight)> (cropDiv_dotted.style.top.replace('px','')/1 + cropDiv_dotted.style.height.replace('px','')/1)){
newTop = (cropDiv_dotted.style.top.replace('px','')/1 + cropDiv_dotted.style.height.replace('px','')/1) - crop_minimumWidthHeight;
}
cropDiv_dotted.style.top = newTop + 'px';
cropDiv_dotted.style.height = (cropDiv_dotted.style.height.replace('px','')/1 + tmpTop - cropDiv_dotted.style.top.replace('px','')/1) + 'px';
}

if((cropDiv_dotted.offsetHeight + (cropToolBorderWidth*2) + cropDiv_dotted.style.top.replace('px','')/1) > crop_imageHeight)
cropDiv_dotted.style.height = (crop_imageHeight - cropDiv_dotted.style.top.replace('px','')/1 - (cropToolBorderWidth*2)) + 'px';

if((cropDiv_dotted.offsetWidth + (cropToolBorderWidth*2) + cropDiv_dotted.style.left.replace('px','')/1) > crop_imageWidth)
cropDiv_dotted.style.width = (crop_imageWidth - cropDiv_dotted.style.left.replace('px','')/1 - (cropToolBorderWidth*2)) + 'px';

if(e.ctrlKey || crop_script_alwaysPreserveAspectRatio)preserveAspectRatio=true; else preserveAspectRatio = false;

if(preserveAspectRatio){
var tmpRatio = cropDiv_dotted.offsetWidth / cropDiv_dotted.offsetHeight;
if(tmpRatio<cropWidthRatio){
cropDiv_dotted.style.width = (cropDiv_dotted.style.height.replace('px','')/1 * cropWidthRatio) + 'px';
}else{
cropDiv_dotted.style.height = (cropDiv_dotted.style.width.replace('px','')/1 / cropWidthRatio) + 'px';
}

if((cropDiv_dotted.offsetHeight + (cropToolBorderWidth*2) + cropDiv_dotted.style.top.replace('px','')/1) > crop_imageHeight){
var ratioToAdjust = crop_imageHeight/(cropDiv_dotted.offsetHeight + (cropToolBorderWidth*2) + cropDiv_dotted.style.top.replace('px','')/1);
cropDiv_dotted.style.height = Math.round((cropDiv_dotted.style.height.replace('px','') * ratioToAdjust) + cropToolBorderWidth) + 'px';
cropDiv_dotted.style.width = Math.round((cropDiv_dotted.style.width.replace('px','') * ratioToAdjust) + cropToolBorderWidth) + 'px';

}

if((cropDiv_dotted.offsetWidth + (cropToolBorderWidth*2) + cropDiv_dotted.style.left.replace('px','')/1) > crop_imageWidth){
var ratioToAdjust = crop_imageWidth/(cropDiv_dotted.offsetWidth + (cropToolBorderWidth*2) + cropDiv_dotted.style.left.replace('px','')/1);

cropDiv_dotted.style.height = Math.round((cropDiv_dotted.style.height.replace('px','') * ratioToAdjust) + cropToolBorderWidth) + 'px';
cropDiv_dotted.style.width = Math.round((cropDiv_dotted.style.width.replace('px','') * ratioToAdjust) + cropToolBorderWidth) + 'px';

}

}
if(!crop_script_fixedRatio && !e.ctrlKey)cropWidthRatio = cropDiv_dotted.offsetWidth / cropDiv_dotted.offsetHeight;

}

if(crop_moveCounter==10){
var tmpLeft = imageDiv_currentLeft + e.clientX - cropEvent_eventX;
if(tmpLeft<0)tmpLeft=0;
if((tmpLeft + imageDiv_currentWidth + (cropToolBorderWidth*2))>crop_imageWidth)tmpLeft = crop_imageWidth - imageDiv_currentWidth - (cropToolBorderWidth*2);
cropDiv_dotted.style.left = tmpLeft + 'px';
var tmpTop = imageDiv_currentTop + e.clientY - cropEvent_eventY;
if(tmpTop<0)tmpTop=0;
if((tmpTop + imageDiv_currentHeight + (cropToolBorderWidth*2))>crop_imageHeight)tmpTop = crop_imageHeight - imageDiv_currentHeight - (cropToolBorderWidth*2);
cropDiv_dotted.style.top = tmpTop + 'px';

}

repositionSmallSquares();
resizeTransparentSquares();
if(updateFormValuesAsYouDrag)cropScript_updateFormValues();
mouseMoveEventInProgress = false;

}

function repositionSmallSquares()
{
smallSquare_tc.style.left = (Math.floor((cropDiv_dotted.style.width.replace('px','')/1 + (cropToolBorderWidth*2)) /2) - offsetSmallSquares -(cropToolBorderWidth*2)) + 'px';
smallSquare_bc.style.left = (Math.floor((cropDiv_dotted.style.width.replace('px','')/1 + (cropToolBorderWidth*2)) /2) - offsetSmallSquares -(cropToolBorderWidth*2)) + 'px';
smallSquare_tr.style.left = (cropDiv_dotted.style.width.replace('px','')/1 + (cropToolBorderWidth*2) - offsetSmallSquares -(cropToolBorderWidth*2)) + 'px';
smallSquare_rc.style.left = (cropDiv_dotted.style.width.replace('px','')/1 + (cropToolBorderWidth*2) - offsetSmallSquares -(cropToolBorderWidth*2)) + 'px';
smallSquare_br.style.left = (cropDiv_dotted.style.width.replace('px','')/1 + (cropToolBorderWidth*2) - offsetSmallSquares -(cropToolBorderWidth*2)) + 'px';

smallSquare_br.style.top = (cropDiv_dotted.style.height.replace('px','')/1 + (cropToolBorderWidth*2) - offsetSmallSquares -(cropToolBorderWidth*2)) + 'px';
smallSquare_bc.style.top = (cropDiv_dotted.style.height.replace('px','')/1 + (cropToolBorderWidth*2) - offsetSmallSquares -(cropToolBorderWidth*2)) + 'px';
smallSquare_bl.style.top = (cropDiv_dotted.style.height.replace('px','')/1 + (cropToolBorderWidth*2) - offsetSmallSquares -(cropToolBorderWidth*2)) + 'px';
smallSquare_lc.style.top = (Math.floor((cropDiv_dotted.style.height.replace('px','')/1 + cropToolBorderWidth)/2) - offsetSmallSquares -(cropToolBorderWidth*2)) + 'px';
smallSquare_rc.style.top = (Math.floor((cropDiv_dotted.style.height.replace('px','')/1 + cropToolBorderWidth)/2) - offsetSmallSquares -(cropToolBorderWidth*2)) + 'px';

}

function resizeTransparentSquares()
{

cropDiv_left.style.width = cropDiv_dotted.style.left;
cropDiv_right.style.width = Math.max(0,crop_imageWidth - (cropToolBorderWidth*2) - (cropDiv_dotted.style.width.replace('px','')/1 + cropDiv_dotted.style.left.replace('px','')/1)) + 'px';
cropDiv_right.style.left = (cropDiv_dotted.style.width.replace('px','')/1 + (cropToolBorderWidth*2) + cropDiv_dotted.style.left.replace('px','')/1) + 'px';
cropDiv_bottom.style.height = Math.max(0,crop_imageHeight - (cropToolBorderWidth*2) - (cropDiv_dotted.style.height.replace('px','')/1 + cropDiv_dotted.style.top.replace('px','')/1)) + 'px';
cropDiv_bottom.style.top = (cropDiv_dotted.style.height.replace('px','')/1 + (cropToolBorderWidth*2) + cropDiv_dotted.style.top.replace('px','')/1) + 'px';

cropDiv_top.style.height = cropDiv_dotted.style.top;

cropDiv_bottom.style.left = cropDiv_dotted.style.left;
cropDiv_bottom.style.width = (cropDiv_dotted.style.width.replace('px','')/1 + (cropToolBorderWidth*2)) + 'px' ;
cropDiv_top.style.left = cropDiv_dotted.style.left;
cropDiv_top.style.width = (cropDiv_dotted.style.width.replace('px','')/1 + (cropToolBorderWidth*2)) + 'px' ;

if(cropDiv_left.style.width=='0px')cropDiv_left.style.visibility='hidden';else cropDiv_left.style.visibility='visible';
if(cropDiv_right.style.width=='0px')cropDiv_right.style.visibility='hidden';else cropDiv_right.style.visibility='visible';
if(cropDiv_bottom.style.width=='0px')cropDiv_bottom.style.visibility='hidden';else cropDiv_bottom.style.visibility='visible';

}

function cropScript_updateFormValues()
{
document.getElementById('input_crop_x').value = Math.round(cropDiv_dotted.style.left.replace('px','')/1 * (crop_originalImageWidth/crop_imageWidth));
document.getElementById('input_crop_y').value = Math.round(cropDiv_dotted.style.top.replace('px','')/1 * (crop_originalImageHeight/crop_imageHeight));
document.getElementById('input_crop_width').value = Math.round((cropDiv_dotted.style.width.replace('px','')/1 + (cropToolBorderWidth*2)) * (crop_originalImageWidth/crop_imageWidth));
document.getElementById('input_crop_height').value = Math.round((cropDiv_dotted.style.height.replace('px','')/1 + (cropToolBorderWidth*2)) * (crop_originalImageHeight/crop_imageHeight));

}

function cropScript_stopResizeMove()
{
crop_resizeCounter = -1;
crop_moveCounter = -1;
cropDiv_dotted.style.cursor = 'move';
cropScript_updateFormValues();
if(document.all){
var div = cropDiv_dotted.getElementsByTagName('DIV')[0];
div.style.display='block';
}
}

function cropScript_setCropSizeByInput()
{
var obj_x = document.getElementById('input_crop_x');
var obj_y = document.getElementById('input_crop_y');
var obj_width = document.getElementById('input_crop_width');
var obj_height = document.getElementById('input_crop_height');

obj_x.value = obj_x.value.replace(/[^0-9]/gi,'');
obj_y.value = obj_y.value.replace(/[^0-9]/gi,'');
obj_width.value = obj_width.value.replace(/[^0-9]/gi,'');
obj_height.value = obj_height.value.replace(/[^0-9]/gi,'');

if(obj_x.value.length==0)obj_x.value=0;
if(obj_y.value.length==0)obj_y.value=0;
if(obj_width.value.length==0)obj_width.value=crop_originalImageWidth;
if(obj_height.value.length==0)obj_height.value=crop_originalImageHeight;

if(obj_x.value>(crop_originalImageWidth-crop_minimumWidthHeight))obj_x.value = crop_originalImageWidth-crop_minimumWidthHeight;
if(obj_y.value>(crop_originalImageHeight-crop_minimumWidthHeight))obj_y.value = crop_originalImageHeight-crop_minimumWidthHeight;

if(obj_width.value/1 > crop_originalImageWidth)obj_width.value = crop_originalImageWidth - obj_x.value/1;
if(obj_height.value/1 > crop_originalImageHeight)obj_height.value = crop_originalImageHeight - obj_y.value/1;

if(obj_x.value/1 + obj_width.value/1 > crop_originalImageWidth)obj_width.value = crop_originalImageWidth - obj_x.value;
if(obj_y.value/1 + obj_height.value/1 > crop_originalImageHeight)obj_height.value = crop_originalImageHeight - obj_y.value;

cropDiv_dotted.style.left = Math.round(obj_x.value/1 * (crop_imageWidth / crop_originalImageWidth)) + 'px';
cropDiv_dotted.style.top = Math.round(obj_y.value/1 * (crop_imageHeight / crop_originalImageHeight)) + 'px';
cropDiv_dotted.style.width = Math.round((obj_width.value/1 - (cropToolBorderWidth*2)) * (crop_imageWidth / crop_originalImageWidth)) + 'px';
cropDiv_dotted.style.height = Math.round((obj_height.value/1 - (cropToolBorderWidth*2)) * (crop_imageHeight / crop_originalImageHeight)) + 'px';

repositionSmallSquares();
resizeTransparentSquares();

}

function cropScript_setBasicEvents()
{
document.documentElement.ondragstart = crop_cancelEvent;
document.documentElement.onselectstart = crop_cancelEvent;
document.documentElement.onmousemove = cropScript_mouseMove;
document.documentElement.onmouseup = cropScript_stopResizeMove;

document.getElementById('input_crop_x').onblur = cropScript_setCropSizeByInput;
document.getElementById('input_crop_y').onblur = cropScript_setCropSizeByInput;
document.getElementById('input_crop_width').onblur = cropScript_setCropSizeByInput;
document.getElementById('input_crop_height').onblur = cropScript_setCropSizeByInput;
document.getElementById('crop_percent_size').onblur = cropScript_validatePercent;

}

function cropScript_validatePercent()
{
this.value=this.value.replace(/[^0-9]/gi,'');
if(this.value.length==0)this.value='1';
if(this.value/1>crop_maximumPercent)this.value='100';
if(this.value/1<crop_minimumPercent)this.value=crop_minimumPercent
}

function init_imageCrop()
{
document.getElementById('label_dimension').innerHTML = crop_originalImageWidth + 'x' + crop_originalImageHeight;
cropScript_setBasicEvents();
crop_createDivElements();
cropScript_updateFormValues();

}
----------------------- KLIP -------------------------

- og her er så en lille testside, der benytter det:
----------------------- KLIP -------------------------

<html>
<head>
<title>Image crop</title>
<link rel="stylesheet" href="css/crop.css">

<script type="text/javascript">

var cropToolBorderWidth = 1; // Width of dotted border around crop rectangle
var smallSquareWidth = 7; // Size of small squares used to resize crop rectangle

// Size of image shown in crop tool
var crop_imageWidth = 600;
var crop_imageHeight = 450;

// Size of original image
var crop_originalImageWidth = 2272;
var crop_originalImageHeight = 1704;

var crop_minimumPercent = 10; // Minimum percent - resize
var crop_maximumPercent = 200; // Maximum percent -resize

var crop_minimumWidthHeight = 15; // Minimum width and height of crop area

var updateFormValuesAsYouDrag = true; // This variable indicates if form values should be updated as we drag. This process could make the script work a little bit slow. That's why this option is set as a variable.
if(!document.all)
updateFormValuesAsYouDrag = false; // Enable this feature only in IE

/* End of variables you could modify */
</script>

<script type="text/javascript" src="crop.js"></script>

</head>
<body>
<div id="pageContent">
<div id="dhtmlgoodies_xpPane">
<div class="dhtmlgoodies_panel">
<div>

<form>
<input type="hidden" id="input_image_ref" value="demo-images/nature_orig.jpg">
<table>
<tr>
<td>
X:</td>
<td>
<input type="text" class="textInput" name="crop_x" id="input_crop_x"></td>
</tr>
<tr>
<td>
Y:</td>
<td>
<input type="text" class="textInput" name="crop_y" id="input_crop_y"></td>
</tr>
<tr>
<td>
Width:</td>
<td>
<input type="text" class="textInput" name="crop_width" id="input_crop_width"></td>
</tr>
<tr>
<td>
Height:</td>
<td>
<input type="text" class="textInput" name="crop_height" id="input_crop_height"></td>
</tr>
<tr>
<td>
Percent size:</td>
<td>
<input type="text" class="textInput" name="crop_percent_size" id="crop_percent_size"
value="100"></td>
</tr>
<tr>
<td>
Convert to:</td>
<td>
<select class="textInput" id="input_convert_to">
<option value="gif">Gif</option>
<option value="jpg" selected>Jpg</option>
<option value="png">Png</option>
</select>
</td>
</tr>
<tr>
<td>
</td>
<td id="cropButtonCell">
<input type="button" onclick="cropScript_executeCrop(this)" value="Crop">
</td>
</tr>
</table>
<div id="crop_progressBar">
</div>
</form>

</div>
</div>
<div class="dhtmlgoodies_panel">
<div>

<table>
<tr>
<td>
<b>Picture from Norway</b></td>
</tr>
<tr>
<td>
Dimension: <span id="label_dimension"></span>
</td>
</tr>
</table>

</div>
</div>
<div class="dhtmlgoodies_panel">
<div>

To select crop area, drag and move the dotted rectangle or type in values directly
into the form.

</div>
</div>
</div>
<div class="crop_content">
<div id="imageContainer">
<img src="demo-images/nature.jpg">
</div>
</div>
</div>

<script type="text/javascript">
init_imageCrop();
</script>

</body>
</html>

----------------------- KLIP -------------------------

Synes godt om

javanic Nybegynder

09. juni 2006 - 01:28 #7

ved godt, at det ikke er så overskueligt, men det vil være fedt, hvis du kan spotte hvordan man sætte start positionen/størrelsen på "crop-layeret" :)

og lige for en god ordens skyld, har du allerede tjent de 100 point - alene for din tid på dit eksempel - tak for det, mc :)

Synes godt om

mclemens Nybegynder

09. juni 2006 - 01:29 #8

Kast det bare, men jeg kan desværre ikke mere iaften ... da jeg skal
på arbejde ... m.h.t. implementeringen skal der nok gribes fat i:

/* IE kontrol - af hensyn til musplacerings bug */
var IE=((document.all)&&(navigator.userAgent.indexOf("Opera")==-1))?true:false;
if(!IE)document.captureEvents(Event.mousemove)

og den document.mousemove jeg bruger med mindre din egen kode selv tager forbehold for IE bugget med musens placering ... kast f.eks. 10 <br> lige efter starten af body ... så ser du om du har taget den med i betragtningen ...

- og så selvfølgelig en implementering af det ekstra layer - overførsel af billedet til layerets baggrund og placering af layeret - - - IE er vist ikke helt glad for den drag - funktion jeg lavede da den vil markere det andet ... det kan nok løses ved at lægge div'en ind sammen med billedet og det andet og så køre placeringen der igennem og tage med i musens placerings output den absolutte afstand til top og left fra den relativt placerede billede div holder....

- men, det kan hurtig blive en længere smøre ... ikke uløseligt
bare udfordrende - men det er jo også rart engang imellem :)

P.s.: Håber ovenstående ikke blev for meget volapyk...

Synes godt om

mclemens Nybegynder

09. juni 2006 - 01:57 #9

Scriptet ser overskueligt ud... jeg kan dog ikke lige umiddelbart se hvilken variabel man skal ind og redigere i og hvor man skal tilføje/kombinere de to scripts ... jeg er sikkert også lidt for træt p.t. - Jeg er nødt til kigge den lidt grundigere igennem i weekenden for at kunne sige/vise præcis hvordan det skal implementeres ...

Synes godt om

mclemens Nybegynder

09. juni 2006 - 09:14 #10

... måske hjælper dette lidt?

js scriptet:

//...

crop_imageDiv.appendChild(cropDiv_bottom);

cropDiv_dotted = document.createElement('DIV');
cropDiv_dotted.className='crop_dottedDiv';
cropDiv_dotted.style.position = "absolute";
cropDiv_dotted.style.left = imgtnl+'px';
cropDiv_dotted.style.top = imgtnt+'px';
cropDiv_dotted.style.width = (crop_imageWidth-(cropToolBorderWidth*2)) + 'px';
cropDiv_dotted.style.height = (crop_imageHeight-(cropToolBorderWidth*2)) + 'px';
cropDiv_dotted.innerHTML = '<div></div>';
cropDiv_dotted.style.cursor = 'move';

if(crop_script_browserIsOpera){

//...

-----------------------------

html:

<html>
<head>
<title>Image crop</title>
<link rel="stylesheet" href="css/crop.css">

<script type="text/javascript">

// Size of image shown in crop tool
var crop_imageWidth,crop_imageHeight,imgtn,imgtnt,imgtnl;

window.onload=function(){
tn=document.getElementById("miso");
crop_imageWidth=tn.offsetWidth;
crop_imageHeight=tn.offsetHeight;
imgtnt=tn.offsetTop;imgtnl=tn.offsetLeft;
while(tn=tn.offsetParent){imgtnt+=tn.offsetTop;imgtnl+=tn.offsetLeft;}
init_imageCrop();
}

var cropToolBorderWidth = 1; // Width of dotted border around crop rectangle
var smallSquareWidth = 7; // Size of small squares used to resize crop rectangle

// Size of original image
var crop_originalImageWidth = 2272;
var crop_originalImageHeight = 1704;

var crop_minimumPercent = 10; // Minimum percent - resize
var crop_maximumPercent = 200; // Maximum percent -resize

var crop_minimumWidthHeight = 15; // Minimum width and height of crop area

var updateFormValuesAsYouDrag = true; // This variable indicates if form values should be updated as we drag. This process could make the script work a little bit slow. That's why this option is set as a variable.
if(!document.all)
updateFormValuesAsYouDrag = false; // Enable this feature only in IE

/* End of variables you could modify */
</script>

<script type="text/javascript" src="crop.js"></script>

</head>
<body>
<div id="pageContent">
<div id="dhtmlgoodies_xpPane">
<div class="dhtmlgoodies_panel">
<div>

<form>
<input type="hidden" id="input_image_ref" value="demo-images/nature_orig.jpg">
<table>
<tr>
<td>
X:</td>
<td>
<input type="text" class="textInput" name="crop_x" id="input_crop_x"></td>
</tr>
<tr>
<td>
Y:</td>
<td>
<input type="text" class="textInput" name="crop_y" id="input_crop_y"></td>
</tr>
<tr>
<td>
Width:</td>
<td>
<input type="text" class="textInput" name="crop_width" id="input_crop_width"></td>
</tr>
<tr>
<td>
Height:</td>
<td>
<input type="text" class="textInput" name="crop_height" id="input_crop_height"></td>
</tr>
<tr>
<td>
Percent size:</td>
<td>
<input type="text" class="textInput" name="crop_percent_size" id="crop_percent_size"
value="100"></td>
</tr>
<tr>
<td>
Convert to:</td>
<td>
<select class="textInput" id="input_convert_to">
<option value="gif">Gif</option>
<option value="jpg" selected>Jpg</option>
<option value="png">Png</option>
</select>
</td>
</tr>
<tr>
<td>
</td>
<td id="cropButtonCell">
<input type="button" onclick="cropScript_executeCrop(this)" value="Crop">
</td>
</tr>
</table>
<div id="crop_progressBar">
</div>
</form>

</div>
</div>
<div class="dhtmlgoodies_panel">
<div>

<table>
<tr>
<td>
<b>Picture from Norway</b></td>
</tr>
<tr>
<td>
Dimension: <span id="label_dimension"></span>
</td>
</tr>
</table>

</div>
</div>
<div class="dhtmlgoodies_panel">
<div>

To select crop area, drag and move the dotted rectangle or type in values directly
into the form.

</div>
</div>
</div>
<div class="crop_content">
<div id="imageContainer">
<img id="miso" src="demo-images/nature.jpg">
</div>
</div>
</div>
</body>
</html>

Synes godt om

mclemens Nybegynder

09. juni 2006 - 09:29 #11

virkede ikke helt efter hensigten prøv denne istedet...

<html>
<head>
<title>Image crop</title>
<link rel="stylesheet" href="css/crop.css">

<script type="text/javascript">

// Size of image shown in crop tool
var crop_imageWidth,crop_imageHeight;

window.onload=function(){
tn=document.getElementById("miso");
crop_imageWidth=tn.offsetWidth;
crop_imageHeight=tn.offsetHeight;
init_imageCrop();
}

var cropToolBorderWidth = 1; // Width of dotted border around crop rectangle
var smallSquareWidth = 7; // Size of small squares used to resize crop rectangle

// Size of original image
var crop_originalImageWidth = 2272;
var crop_originalImageHeight = 1704;

var crop_minimumPercent = 10; // Minimum percent - resize
var crop_maximumPercent = 200; // Maximum percent -resize

var crop_minimumWidthHeight = 15; // Minimum width and height of crop area

var updateFormValuesAsYouDrag = true; // This variable indicates if form values should be updated as we drag. This process could make the script work a little bit slow. That's why this option is set as a variable.
if(!document.all)
updateFormValuesAsYouDrag = false; // Enable this feature only in IE

/* End of variables you could modify */
</script>

<script type="text/javascript" src="crop.js"></script>

</head>
<body>
<div id="pageContent">
<div id="dhtmlgoodies_xpPane">
<div class="dhtmlgoodies_panel">
<div>

<form>
<input type="hidden" id="input_image_ref" value="demo-images/nature_orig.jpg">
<table>
<tr>
<td>
X:</td>
<td>
<input type="text" class="textInput" name="crop_x" id="input_crop_x"></td>
</tr>
<tr>
<td>
Y:</td>
<td>
<input type="text" class="textInput" name="crop_y" id="input_crop_y"></td>
</tr>
<tr>
<td>
Width:</td>
<td>
<input type="text" class="textInput" name="crop_width" id="input_crop_width"></td>
</tr>
<tr>
<td>
Height:</td>
<td>
<input type="text" class="textInput" name="crop_height" id="input_crop_height"></td>
</tr>
<tr>
<td>
Percent size:</td>
<td>
<input type="text" class="textInput" name="crop_percent_size" id="crop_percent_size"
value="100"></td>
</tr>
<tr>
<td>
Convert to:</td>
<td>
<select class="textInput" id="input_convert_to">
<option value="gif">Gif</option>
<option value="jpg" selected>Jpg</option>
<option value="png">Png</option>
</select>
</td>
</tr>
<tr>
<td>
</td>
<td id="cropButtonCell">
<input type="button" onclick="cropScript_executeCrop(this)" value="Crop">
</td>
</tr>
</table>
<div id="crop_progressBar">
</div>
</form>

</div>
</div>
<div class="dhtmlgoodies_panel">
<div>

<table>
<tr>
<td>
<b>Picture from Norway</b></td>
</tr>
<tr>
<td>
Dimension: <span id="label_dimension"></span>
</td>
</tr>
</table>

</div>
</div>
<div class="dhtmlgoodies_panel">
<div>

To select crop area, drag and move the dotted rectangle or type in values directly
into the form.

</div>
</div>
</div>
<div class="crop_content">
<div id="imageContainer" style="position:relative;">
<img id="miso" src="demo-images/nature.jpg">
</div>
</div>
</div>
</body>
</html>

---------------------

//...

crop_imageDiv.appendChild(cropDiv_bottom);

cropDiv_dotted = document.createElement('DIV');
cropDiv_dotted.className='crop_dottedDiv';
cropDiv_dotted.style.position = "absolute";
cropDiv_dotted.style.left = '0px';
cropDiv_dotted.style.top = '0px';
cropDiv_dotted.style.width = (crop_imageWidth-(cropToolBorderWidth*2)) + 'px';
cropDiv_dotted.style.height = (crop_imageHeight-(cropToolBorderWidth*2)) + 'px';
cropDiv_dotted.innerHTML = '<div></div>';
cropDiv_dotted.style.cursor = 'move';

if(crop_script_browserIsOpera){

//...

Synes godt om

mclemens Nybegynder

09. juni 2006 - 10:08 #12

... hvis den ikke skal fylde 100% højde og bredde så
tag ovenstående og denne rettelse i html delen:

//...

window.onload=function(){
tn=document.getElementById("miso");
crop_imageWidth=tn.offsetWidth;
crop_imageHeight=tn.offsetHeight;
init_imageCrop();

document.getElementById('input_crop_width').value=200;
document.getElementById('input_crop_height').value=200;
cropScript_setCropSizeByInput();
}

//...

Synes godt om

mclemens Nybegynder

09. juni 2006 - 10:16 #13

eller denne

window.onload=function(){
tn=document.getElementById("miso");
crop_imageWidth=tn.offsetWidth;
crop_imageHeight=tn.offsetHeight;
init_imageCrop();

tn=document.getElementById('input_crop_width')
tn.value=tn.value/2;
tn=document.getElementById('input_crop_height');
tn.value=tn.value/2;
cropScript_setCropSizeByInput();
}

Synes godt om

javanic Nybegynder

09. juni 2006 - 14:05 #14

det ser rigtig godt ud :)

...dog er der en lille bug i form af forkerte koordinater, når man dragger crop-layeret. prøver lige at fikse det.

af ren og skær nysgerrighed - tn, er en forkortelse for... :) ?? hehe

Synes godt om

javanic Nybegynder

09. juni 2006 - 14:33 #15

mcclemens, har du tilføjet ændringer, der gør det muligt at placere crop-layerets start x,y korrdinat?

uanset hvad skal du have mange tak for din hjælp? men jeg ville blive glad, hvis du kunne hjælpe med de sidste par ting.

de velfortjente point er i hvert fald på vej :)

Synes godt om

mclemens Nybegynder

09. juni 2006 - 21:06 #16

Tak for point, kigger lige på den sidste del :P

Synes godt om

mclemens Nybegynder

09. juni 2006 - 21:12 #17

Prøv med det her ...
- bemærk jeg har sat imagecontaineren til position
relative og implementeret rettelserne fra 09/06-2006 09:29:53

- poster lige begge filer...

<html>
<head>
<title>Image crop</title>
<link rel="stylesheet" href="css/crop.css">

<script type="text/javascript">

// Size of image shown in crop tool
var crop_imageWidth,crop_imageHeight;

window.onload=function(){
tn=document.getElementById("miso");
crop_imageWidth=tn.offsetWidth;
crop_imageHeight=tn.offsetHeight;
init_imageCrop();

document.getElementById('input_crop_x').value="200"; // Placerer div 200 px divideret med målestoksforholdet px fra left placering
document.getElementById('input_crop_y').value="200"; // Placerer div 200 px divideret med målestoksforholdet px fra top placering
tn=document.getElementById('input_crop_width')
tn.value=tn.value/2;
tn=document.getElementById('input_crop_height');
tn.value=tn.value/2;
cropScript_setCropSizeByInput();
}

var cropToolBorderWidth = 1; // Width of dotted border around crop rectangle
var smallSquareWidth = 7; // Size of small squares used to resize crop rectangle

// Size of original image
var crop_originalImageWidth = 2272;
var crop_originalImageHeight = 1704;

var crop_minimumPercent = 10; // Minimum percent - resize
var crop_maximumPercent = 200; // Maximum percent -resize

var crop_minimumWidthHeight = 15; // Minimum width and height of crop area

var updateFormValuesAsYouDrag = true; // This variable indicates if form values should be updated as we drag. This process could make the script work a little bit slow. That's why this option is set as a variable.
if(!document.all)
updateFormValuesAsYouDrag = false; // Enable this feature only in IE

/* End of variables you could modify */
</script>

<script type="text/javascript" src="crop.js"></script>

</head>
<body>
<div id="pageContent">
<div id="dhtmlgoodies_xpPane">
<div class="dhtmlgoodies_panel">
<div>

<form>
<input type="hidden" id="input_image_ref" value="demo-images/nature_orig.jpg">
<table>
<tr>
<td>
X:</td>
<td>
<input type="text" class="textInput" name="crop_x" id="input_crop_x"></td>
</tr>
<tr>
<td>
Y:</td>
<td>
<input type="text" class="textInput" name="crop_y" id="input_crop_y"></td>
</tr>
<tr>
<td>
Width:</td>
<td>
<input type="text" class="textInput" name="crop_width" id="input_crop_width"></td>
</tr>
<tr>
<td>
Height:</td>
<td>
<input type="text" class="textInput" name="crop_height" id="input_crop_height"></td>
</tr>
<tr>
<td>
Percent size:</td>
<td>
<input type="text" class="textInput" name="crop_percent_size" id="crop_percent_size"
value="100"></td>
</tr>
<tr>
<td>
Convert to:</td>
<td>
<select class="textInput" id="input_convert_to">
<option value="gif">Gif</option>
<option value="jpg" selected>Jpg</option>
<option value="png">Png</option>
</select>
</td>
</tr>
<tr>
<td>
</td>
<td id="cropButtonCell">
<input type="button" onclick="cropScript_executeCrop(this)" value="Crop">
</td>
</tr>
</table>
<div id="crop_progressBar">
</div>
</form>

</div>
</div>
<div class="dhtmlgoodies_panel">
<div>

<table>
<tr>
<td>
<b>Picture from Norway</b></td>
</tr>
<tr>
<td>
Dimension: <span id="label_dimension"></span>
</td>
</tr>
</table>

</div>
</div>
<div class="dhtmlgoodies_panel">
<div>

To select crop area, drag and move the dotted rectangle or type in values directly
into the form.

</div>
</div>
</div>
<div class="crop_content">
<div id="imageContainer" style="position:relative;">
<img id="miso" src="demo-images/nature.jpg">
</div>
</div>
</div>
</body>
</html>

Synes godt om

mclemens Nybegynder

09. juni 2006 - 21:12 #18

Synes godt om

mclemens Nybegynder

09. juni 2006 - 21:14 #19

[ mcclemens, har du tilføjet ændringer, der gør det muligt at placere crop-layerets start x,y korrdinat? ]
- function cropScript_setCropSizeByInput() var i scriptet i forvejen ... jeg retter bare oplysningerne i de forskellige inputs ved onload og beder den om at recalculere beregningen for div'ets placering...

[ uanset hvad skal du have mange tak for din hjælp? men jeg ville blive glad, hvis du kunne hjælpe med de sidste par ting. ]
- Jeg håber det x og y input redigering var det du tænkte på?

Synes godt om

mclemens Nybegynder

09. juni 2006 - 21:15 #20

P.s.: Undskyld langsom respons :o)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS