webForumDet fria alternativet
Logga in / Bli medlem

Grafiskt ASPjpeg crop skript

ASP

7 svar · 448 visningar · startad av Mattias Nordin

Mattias Nordins avatarMattias NordinMedlem sedan dec. 20051 056 inlägg
Frågan#1

Hej alla glada. Jag använder mig av den trevliga komponenten AspJpeg (https://www.persits.com) och tänkte nu skapa ett skript för att göra "crop" på mina fotografier.

Är det någon som har sett om det finns något skript för att grafiskt marker X och Y kordinaterna på fotot innan man skickar dem för croppning av fotot?

AddeladdeMedlem sedan jan. 20013 406 inlägg
#2

Japp jag byggde ett med hjälp av javascript. Dock innehåller grafiska funktioner till i stort sätt allt som går att göra med aspJpeg.

dumpWebicera.gif
Mattias Nordins avatarMattias NordinMedlem sedan dec. 20051 056 inlägg
#3

Snyggt!

Då vet jag i alla fall att det är möjligt. Du har inte lust att dela med dig av crop funktionen ? ;)

AddeladdeMedlem sedan jan. 20013 406 inlägg
#4

Absolut!

Jag använder ett lager som jag kan förändra storlek på och flytta runt på bilden. Sedan beräknar jag storleken och koordinaterna som jag skickar till asp-koden som sedan cropar bilden.

If action = "crop" Then
  cropX1 = Trim(request("cropLeft"))
  cropY1 = Trim(request("cropTop"))
  cropX2 = cINT(Trim(request("cropWidth")))+cropX1
  cropY2 = cINT(Trim(request("cropHeight")))+cropY1
  
  'response.write cropX1&", "&cropY1&",  "&cropX2&", "&cropY2
  
  Set image = Server.CreateObject("Persits.Jpeg")
  ' Compute path to source image
  image.Open tmpFile
  image.Quality = 100
  image.Crop cropX1, cropY1, cropX2, cropY2
  image.Save tmpFile
  set image = nothing
End if

<script language="JavaScript" type="text/javascript"> 
var Xmouse=0; var Ymouse=0; 
var XmouseOnStartDrag=0; var YmouseOnStartDrag=0;
var XmouseOnEndDrag = 0; var YmouseOnEndDrag = 0;
var dragStart=0;
var selectTool = 0;
var imgOriginalWidth = <%=normalWidth%>;
var imgOriginalHeight = <%=normalHeight%>;

function showCord(){
  var infoHeight=0; var infoWidth=0;
  var zoomConst=parent.document.getElementById('imageArea').style.zoom
  
  if(dragStart==1){
    var tmpXstart=XmouseOnStartDrag; var tmpYstart=YmouseOnStartDrag;
	var tmpXend=XmouseOnEndDrag; var tmpYend=YmouseOnEndDrag;
    var tmpXend=Xmouse; var tmpYend=Ymouse;
  

    if(tmpXend>tmpXstart){
      infoWidth=tmpXend-tmpXstart;
	  tmpXstart=XmouseOnStartDrag;
    }
    if(tmpXend<tmpXstart){
      infoWidth=tmpXstart-tmpXend;
	  tmpXstart=Xmouse;
    }
    if(tmpYend>tmpYstart){
      infoHeight=tmpYend-tmpYstart;
	  tmpYstart=YmouseOnStartDrag;
    }
    if(tmpYend<tmpYstart){
      infoHeight=tmpYstart-tmpYend;
	  tmpYstart=Ymouse
    }
	parent.document.getElementById('infoWidth').innerHTML=infoWidth;
    parent.document.getElementById('infoHeight').innerHTML=infoHeight;
	
	if(infoHeight!=0 || infoWidth!=0){ 
	  tmpXstart=parseInt(tmpXstart/zoomConst);
	  tmpYstart=parseInt(tmpYstart/zoomConst);
      document.getElementById('selectBox').style.width=infoWidth;
      document.getElementById('selectBox').style.height=infoHeight;
      document.getElementById('selectBox').style.top=tmpYstart; 
      document.getElementById('selectBox').style.left=tmpXstart; 
	  document.getElementById('selectBox').style.display=''; 
    }
  }
  
  parent.document.getElementById('Xcoord').innerHTML=parseInt(Xmouse/zoomConst);
  parent.document.getElementById('Ycoord').innerHTML=parseInt(Ymouse/zoomConst);   
}

function MoveHandler(evnt) { 
        if(document.all){ 
                Xmouse = window.event.x+document.body.scrollLeft; 
                Ymouse = window.event.y+document.body.scrollTop; 
        } else if(document.getElementById) { 
                Xmouse = evnt.pageX; 
                Ymouse = evnt.pageY; 
        } 
} 

document.onmousemove = function(){
  MoveHandler();
  moveLayer() 
}

function selectImgStart(){
  if(selectTool==1){
    document.getElementById('selectBox').style.display='none'; 
    document.getElementById('selectBox').style.width=0; 
    document.getElementById('selectBox').style.height=0; 
    document.getElementById('selectBox').style.top=0; 
    document.getElementById('selectBox').style.left=0; 

    XmouseOnStartDrag=Xmouse; 
    YmouseOnStartDrag=Ymouse;
	dragStart=1;
  }
}

//Funktion för att flytta lager inom begränsat område
var moveTextLayer = 0;

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

document.onselectstart=new Function ("return false")

function moveLayer(){
  var widthTextLayer = document.getElementById('textLayer').offsetWidth;
  var heightTextLayer = document.getElementById('textLayer').offsetHeight;
  
  if(moveTextLayer==1){
    
	if(widthTextLayer+Xmouse<<%=normalWidth%>+5 && Xmouse>-3){
      document.getElementById('textLayer').style.left=Xmouse-3; 
	}
	if(heightTextLayer+Ymouse<<%=normalHeight%>+5 && Ymouse>-3){
	  document.getElementById('textLayer').style.top=Ymouse-3; 
	}
  }
}

function typeText(){
   var widthTextLayer;
   var heightTextLayer;
   var originalText;
   originalText=document.getElementById('textWidth').innerHTML;
   
   //Förhindra att textfält blir tomt
   if(document.getElementById('textfalt').value==''){
     document.getElementById('textfalt').value='  ';
   }
   
   document.getElementById('textWidth').innerHTML = document.getElementById('textfalt').value;
   widthTextLayer=document.getElementById('textWidth').offsetWidth+1;
   heightTextLayer=document.getElementById('textWidth').offsetHeight+1;
   document.getElementById('textfalt').style.width = widthTextLayer
   document.getElementById('textfalt').style.height = heightTextLayer
   if(parseInt(document.getElementById('textLayer').style.pixelLeft)+widthTextLayer><%=normalWidth%>){
     document.getElementById('textfalt').value=originalText;
	 document.getElementById('textWidth').innerHTML=originalText;
	 alert('Du kan inte skriva utanför bilden');
	 return 1;
   }
   if(parseInt(document.getElementById('textLayer').style.pixelTop)+heightTextLayer><%=normalHeight%>){   
     alert('Du kan inte skriva utanför bilden');
	 return 1;
   }
   return 0;
}

// Slut funktioner för att flytta textlager
</script>

<body onload="parent.typeOnInitSetup();">
<div id="imageBody" class="imageArea" onMouseDown="selectImgStart();" onMouseUp="dragStart=0;" onMouseOut="parent.document.getElementById('Ycoord').innerHTML='0';parent.document.getElementById('Xcoord').innerHTML='0';" onMouseMove="showCord()" ondrag="return false;"><img src="../bilder/spacer.gif"></div>
<div id="selectBox" onMouseMove="showCord()" onMouseDown="selectImgStart();" onMouseUp="dragStart=0;" ondrag="return false;" style="display:none; cursor: crosshair; position:absolute; width:0px; height:0px; z-index:1; left: 56px; top: 59px;" class="imgSelect"><img src="../../bilder/system/spacer.gif"></div>
<div id="textLayer" onMouseDown="moveTextLayer=1;" style="position:absolute; padding: 0px; z-index:2; left: 1px; margin: 0px; border: 1px dotted #CCCCCC; top: 1px; cursor: pointer; display: none;">
  <input name="text" type="text" id="textfalt" onKeyUp="typeText()" value="Text" style="padding: 0px; margin: 0px; border: 0px; width: 30px; background-color: transparent; font-family: Arial; font-size: 10px;">
</div>
<div id="textWidth" style="position:absolute; visibility:hidden; padding: 0px; margin: 0px;" nowrap></div>
</body>
Mattias Nordins avatarMattias NordinMedlem sedan dec. 20051 056 inlägg
#5

Fantastiskt! Nu är jag sugen på att gå hem och prova...

Mattias Nordins avatarMattias NordinMedlem sedan dec. 20051 056 inlägg
#6

Jag är tyvärr inte så bra på javascript. Det såg ut som att du skrev ut en del värden till en annan frame där jag antar att du hade en del andra div:ar. Jag får inte till det... *ler*
Jag får dock inte heller några felmeddelanden längre. Functionen showCord() returnerar 0 när musen är utanför bilden och NaN när jag för muspekaren över bilden.

Hur många fel gör jag ? *ler*

<script language="JavaScript" type="text/javascript"> 
var Xmouse=0; var Ymouse=0; 
var XmouseOnStartDrag=0; var YmouseOnStartDrag=0;
var XmouseOnEndDrag = 0; var YmouseOnEndDrag = 0;
var dragStart=0;
var selectTool = 0;
var imgOriginalWidth = 600;
var imgOriginalHeight = 443;

function showCord(){
  var infoHeight=0; var infoWidth=0;
  var zoomConst=document.getElementById('imageArea').style.zoom
  
  if(dragStart==1){
    var tmpXstart = XmouseOnStartDrag; var tmpYstart = YmouseOnStartDrag;
	var tmpXend = XmouseOnEndDrag; var tmpYend = YmouseOnEndDrag;
    var tmpXend = Xmouse; var tmpYend = Ymouse;
  

    if(tmpXend > tmpXstart){
      infoWidth = tmpXend - tmpXstart;
	  tmpXstart = XmouseOnStartDrag;
    }
    if(tmpXend < tmpXstart){
      infoWidth = tmpXstart - tmpXend;
	  tmpXstart = Xmouse;
    }
    if(tmpYend > tmpYstart){
      infoHeight = tmpYend - tmpYstart;
	  tmpYstart = YmouseOnStartDrag;
    }
    if(tmpYend < tmpYstart){
      infoHeight = tmpYstart - tmpYend;
	  tmpYstart = Ymouse
    }
	document.getElementById('infoWidth').innerHTML = infoWidth;
    document.getElementById('infoHeight').innerHTML = infoHeight;
	
	if(infoHeight!=0 || infoWidth!=0){ 
	  tmpXstart=parseInt(tmpXstart/zoomConst);
	  tmpYstart=parseInt(tmpYstart/zoomConst);
      document.getElementById('selectBox').style.width=infoWidth;
      document.getElementById('selectBox').style.height=infoHeight;
      document.getElementById('selectBox').style.top=tmpYstart; 
      document.getElementById('selectBox').style.left=tmpXstart; 
	  document.getElementById('selectBox').style.display=''; 
    }
  }
  
  document.getElementById('Xcoord').innerHTML=parseInt(Xmouse/zoomConst);
  document.getElementById('Ycoord').innerHTML=parseInt(Ymouse/zoomConst);   
}

function MoveHandler(evnt){ 
        if(document.all){ 
                Xmouse = window.event.x+document.body.scrollLeft; 
                Ymouse = window.event.y+document.body.scrollTop; 
        } else if(document.getElementById){ 
                Xmouse = evnt.pageX; 
                Ymouse = evnt.pageY; 
        } 
} 

document.onmousemove = function(){
  MoveHandler();
  moveLayer() 
}

function selectImgStart(){
  if(selectTool==1){
    document.getElementById('selectBox').style.display='none'; 
    document.getElementById('selectBox').style.width=0; 
    document.getElementById('selectBox').style.height=0; 
    document.getElementById('selectBox').style.top=0; 
    document.getElementById('selectBox').style.left=0; 

    XmouseOnStartDrag=Xmouse; 
    YmouseOnStartDrag=Ymouse;
	dragStart=1;
  }
}

//Funktion för att flytta lager inom begränsat område
var moveTextLayer = 0;

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

document.onselectstart=new Function("return false")

function moveLayer(){
  var widthTextLayer = document.getElementById('textLayer').offsetWidth;
  var heightTextLayer = document.getElementById('textLayer').offsetHeight;
  
  if(moveTextLayer==1){
    
	if(widthTextLayer+Xmouse<600+5 && Xmouse>-3){
      document.getElementById('textLayer').style.left=Xmouse-3; 
	}
	if(heightTextLayer+Ymouse<443+5 && Ymouse>-3){
	  document.getElementById('textLayer').style.top=Ymouse-3; 
	}
  }
}

function typeText(){
   var widthTextLayer;
   var heightTextLayer;
   var originalText;
   originalText=document.getElementById('textWidth').innerHTML;  
   
   //Förhindra att textfält blir tomt
   if(document.getElementById('textfalt').value==''){
     document.getElementById('textfalt').value='  ';
   }
   
   document.getElementById('textWidth').innerHTML = document.getElementById('textfalt').value;
   widthTextLayer=document.getElementById('textWidth').offsetWidth+1;
   heightTextLayer=document.getElementById('textWidth').offsetHeight+1;
   document.getElementById('textfalt').style.width = widthTextLayer
   document.getElementById('textfalt').style.height = heightTextLayer
   if(parseInt(document.getElementById('textLayer').style.pixelLeft)+widthTextLayer > 600){
     document.getElementById('textfalt').value=originalText;
	 document.getElementById('textWidth').innerHTML=originalText;  
	 alert('Du kan inte skriva utanför bilden');
	 return 1;
   }
   if(parseInt(document.getElementById('textLayer').style.pixelTop)+heightTextLayer > 443){   
     alert('Du kan inte skriva utanför bilden');
	 return 1;
   }
   return 0;
}

// Slut funktioner för att flytta textlager
</script>
</head>
<body>

1) <div id="imageBody" class="imageArea" onMouseDown="selectImgStart();" onMouseUp="dragStart=0;" onMouseOut="document.getElementById('Ycoord').innerHTML='0';document.getElementById('Xcoord').innerHTML='0';" onMouseMove="showCord()" ondrag="return false;"><img src="bil_ny_fälg.jpg"></div>

2) <div id="selectBox" onMouseMove="showCord()" onMouseDown="selectImgStart();" onMouseUp="dragStart=0;" ondrag="return false;" style="display:none; cursor: crosshair; position:absolute; width:0px; height:0px; z-index:1; left: 56px; top: 59px;" class="imgSelect"><img src="bil_ny_fälg.jpg"></div>

3) <div id="textLayer" onMouseDown="moveTextLayer=1;" style="position:absolute; padding: 0px; z-index:2; left: 1px; margin: 0px; border: 1px dotted #CCCCCC; top: 1px; cursor: pointer; display: none;">
  <input name="text" type="text" id="textfalt" onKeyUp="typeText()" value="Text" style="padding: 0px; margin: 0px; border: 0px; width: 30px; font-family: Arial; font-size: 10px;">
</div>

4) <div id="textWidth" style="position:absolute; visibility:hidden; padding: 0px; margin: 0px;" nowrap></div>
5) <div id="imageArea" style="border: 1px solid #CCCCCC;"></div>
6) <div id="infoWidth" style="border: 1px solid #CCCCCC;"></div>
7) <div id="infoHeight" style="border: 1px solid #CCCCCC;"></div>
8) <div id="selectBox"  style="border: 1px solid #CCCCCC;"></div>
9) <div id="Xcoord" style="border: 1px solid #CCCCCC;"></div> 
10) <div id="Ycoord" style="border: 1px solid #CCCCCC;"></div>
AddeladdeMedlem sedan jan. 20013 406 inlägg
#7

Hej Mathias

Jag mailar över hela lösningen till dig så kan du titta i den. Dock är jag tacksam om du inte sprider den vidare.

Publicera gärna cropfunktionen här sen när du löst det.

/Andreas

Mattias Nordins avatarMattias NordinMedlem sedan dec. 20051 056 inlägg
#8

Väldigt bussigt. Jag ska inte sprida det vidare!

266 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
125 ms — deklarationer (db)
0 ms — hämta statistik (cache)
135 ms — hämta tråd, inlägg och bilagor (db)
128 ms — ändringar (db)