---
title: "Grafiskt ASPjpeg crop skript"
type: "forum-thread"
url: "https://www.webforum.nu/amne/asp/146855-grafiskt-aspjpeg-crop-skript"
topic: "ASP"
topic_url: "https://www.webforum.nu/amne/asp"
author: "Mattias Nordin"
published: "2006-05-14T20:35:39.000Z"
updated: "2006-05-15T20:09:36.000Z"
replies: 7
views: 467
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/asp/146855-grafiskt-aspjpeg-crop-skript"
---

# Grafiskt ASPjpeg crop skript

## #1 — Mattias Nordin, 2006-05-14T20:35Z

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?

Permalänk: https://www.webforum.nu/p/146855

## #2 — Addeladde, 2006-05-14T22:23Z

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.

Bilagor:

- [dumpWebicera.gif](https://www.webforum.nu/a/10763.gif)

Permalänk: https://www.webforum.nu/p/1817041

## #3 — Mattias Nordin, 2006-05-15T07:40Z

Snyggt!

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

Permalänk: https://www.webforum.nu/p/1817070

## #4 — Addeladde, 2006-05-15T13:48Z

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>
```

Permalänk: https://www.webforum.nu/p/1817160

## #5 — Mattias Nordin, 2006-05-15T13:55Z

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

Permalänk: https://www.webforum.nu/p/1817166

## #6 — Mattias Nordin, 2006-05-15T19:58Z

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>
```

Permalänk: https://www.webforum.nu/p/1817290

## #7 — Addeladde, 2006-05-15T20:05Z

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

Permalänk: https://www.webforum.nu/p/1817297

## #8 — Mattias Nordin, 2006-05-15T20:09Z

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

Permalänk: https://www.webforum.nu/p/1817302

---

Tråden på webben: https://www.webforum.nu/amne/asp/146855-grafiskt-aspjpeg-crop-skript